工具发布流程和使用申请流程细节优化

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>