src/components/tool-selector/index.vue

@@ -0,0 +1,180 @@
+<template>
+  <el-dialog
+    title="工具选择"
+    :visible.sync="visible"
+    :close-on-click-modal="false"
+    width="80%"
+    append-to-body>
+    <div class="el-card__body">
+      <el-form :model="queryParams" ref="queryForm"  v-show="showSearch" label-width="68px" :inline="true">
+        <el-form-item label="工具编号" prop="toolCode">
+          <el-input
+            v-model.trim="queryParams.toolCode"
+            placeholder="请输入"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="工具名称" prop="toolName">
+          <el-input
+            v-model.trim="queryParams.toolName"
+            placeholder="请输入"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <el-card class="gray-card">
+        <el-table
+          v-loading="loading"
+          :data="dataList"
+          border
+          @selection-change="handleSelectionChange"
+          ref="multipleTable"
+          header-align="left"
+        >
+          <el-table-column type="selection" width="50" align="center" v-if="multiple" :selectable="(row,index)=>selectableFun(row,index,toolData,selectInfoData)"/>
+          <el-table-column label="工具编号" align="center" key="toolCode" prop="toolCode"/>
+          <el-table-column label="工具名称" align="center" key="toolName" prop="toolName":show-overflow-tooltip="true" />
+          <el-table-column label="工具类别" align="center" key="toolType" prop="toolType" :show-overflow-tooltip="true" >
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.tool_type" :value="scope.row.toolType"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="归属单位" align="center" key="toolRespDeptName" prop="toolRespDeptName"  :show-overflow-tooltip="true" />
+          <el-table-column label="负责人" align="center" key="toolPrincipalsName" prop="toolPrincipalsName" width="120" />
+          <el-table-column label="操作" v-if="!multiple" width="100px" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                @click="selectHandle(scope.row)"
+              >选择</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+    <div slot="footer" v-if="multiple">
+      <el-button @click="visible = false">取 消</el-button>
+      <el-button type="primary" @click="selectHandle(selectInfoData)">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { listTool } from '@/api/tool/tool'
+export default {
+  name: "ToolSelector",
+  components: {},
+  dicts:['tool_type'],
+  props: {
+    toolData: {
+      type: Array,
+      default: ()=>[],
+    },
+    selectableFun: {
+      type: Function,
+      default: (row, index, toolData, selectInfoData)=>{
+        if (toolData) {
+          return toolData.findIndex(item=>item.id===row.id)<0
+        }else {
+          return true
+        }
+      },
+    },
+    selectValidate:{
+      type: Boolean,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      source: undefined,
+      index: undefined,
+      multiple: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 表格数据
+      dataList: [],
+      // 弹出层标题
+      title: "",
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        toolCode: undefined,
+        toolName: undefined,
+        status: undefined,
+        recordStatus: 'done',
+      },
+      selectInfoData: [],
+    };
+  },
+  methods: {
+    //来源、序号、是否多选
+    init(source,index,multiple){
+      this.visible = true
+      this.source = source
+      this.index = index
+      this.multiple= multiple
+      this.resetQuery()
+    },
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      listTool(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+          this.dataList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm('queryForm')
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.selectInfoData = selection;
+    },
+    selectHandle(data){
+      let _this = this
+      if (_this.selectValidate) {
+        this.$emit("selectHandle", this.source, this.index, data,(res)=>{_this.visible = !res})
+      }else{
+        this.$emit("selectHandle", this.source, this.index, data)
+        _this.visible = false
+      }
+    },
+  },
+};
+</script>

src/views/tool/toolDetail.vue

@@ -18,6 +18,11 @@
                 <el-col :span="12"> <el-form-item label="适用条件">{{toolDetail.applyCondition}}</el-form-item> </el-col>
                 <el-col :span="12"> <el-form-item label="操作说明">{{toolDetail.operateExplain}}</el-form-item> </el-col>
                 <el-col :span="12"> <el-form-item label="备注">{{toolDetail.remark}}</el-form-item> </el-col>
+                <el-col :span="24">
+                  <el-form-item label="关联工具">
+                     <el-tag :key="tag.toolId" v-for="tag in JSON.parse(toolDetail.association)" type="info" style="margin-right: 5px">{{tag.toolName}}</el-tag>
+                  </el-form-item>
+                </el-col>
               </el-row>
             </el-form><!--el-form-->
           </div><!--el-form-border 表单-->

src/views/workflowList/addWorkflow/tool_release.vue

@@ -128,6 +128,29 @@
               </el-form-item>
             </el-col>
           </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="关联工具" prop="association">
+                <el-select
+                  :disabled="!editStatus"
+                  v-model="form.association"
+                  ref="selectHeadTool"
+                  multiple
+                  value-key="toolId"
+                  filterable
+                  remote
+                  placeholder="请选择关联工具"
+                  @focus="toolSelect">
+                  <el-option
+                    v-for="item in form.association"
+                    :key="item.toolId"
+                    :label="item.toolName"
+                    :value="item">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
         </div>
         <div>
           <div class="box-title">
@@ -235,7 +258,7 @@
       v-if="monitorDrawerVisible"
       ref="monitorDrawer"
     ></monitor-drawer>
-
+    <tool-selector ref="toolSelect" @selectHandle="selectHandle"></tool-selector>
     <bl-user-selector  ref="peopleSelect" :type="'single'" :isCheck="true" :open="toolPrincipalsChoose" @cancel="toolPrincipalsChoose=false"   @submit="submitPeople"></bl-user-selector>
   </div>
 </template>
@@ -254,10 +277,12 @@ import Treeselect from '@riophae/vue-treeselect'
 import { deptTreeSelect } from "@/api/system/user";
 import { addTool, checkToolExist, getInfoByBpmcId, updateTool } from '@/api/tool/tool'
 import blUserSelector from '@/components/user-selector/src/user-selector.vue'
+import ToolSelector from '@/components/tool-selector/index.vue'
 // PDF本地文件预览
 export default {
   dicts: ['sys_normal_disable','tool_type'],
   components: {
+    ToolSelector,
     blUserSelector,
     Treeselect, AddDoc,
     WorkflowLogs,
@@ -420,6 +445,7 @@ export default {
       getInfoByBpmcId(procInstId).then(async (res) => {
         let formData = res.data;
         formData.type = _this.form.type
+        formData.association = JSON.parse(res.data.association)
         _this.form = formData
         _this.getDocumentList(res.data.toolId)
       }).finally(()=>{
@@ -519,6 +545,7 @@ export default {
       let formData = JSON.parse(JSON.stringify(_this.form))
       formData.recordStatus = "draft";
       formData.editStatus = _this.editStatus
+      formData.association = JSON.stringify(_this.form.association)
       if (formData.toolId) {
         updateTool(formData).then((res) => {
           if (res.code===200) {
@@ -632,6 +659,7 @@ export default {
     handleWorkflowSubmit() {
       let _this = this
       let formData = JSON.parse(JSON.stringify(_this.form))
+      formData.association = JSON.stringify(_this.form.association)
       let wf_receivers = [];
       if (_this.$refs.prochild.receiveUserList.length < 1 &&_this.$refs.prochild.nextData.actDefType!=='endEvent') {
         _this.$message.warning("请选择人员！");
@@ -747,8 +775,21 @@ export default {
     handleSelectNode(node){
       this.$set(this.form,'toolRespDeptName',node.label)
     },
-    handleFileAdd(fileList){
+    toolSelect(){
-      console.log(fileList)
+      this.$refs.selectHeadTool.blur();
+      this.$nextTick(()=>{
+        this.$refs.toolSelect.init(null,null,true)
+      })
+    },
+    selectHandle(source,index,data){
+      let list = this.form.association
+      if (!list) {
+        list = []
+      }
+      data.forEach(itme=>{
+        list.push({toolId:itme.toolId,toolName:itme.toolName})
+      })
+      this.form.association = list
     }
   },
 };