初始化

packages/processManagement/mattersConfig/components/attachmentMaterial.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="attachment-material">
+    <ai-card title="附件材料">
+      <template #right>
+        <span class="iconfont iconAdd rightBtn"></span>
+        <span class="rightBtn" style="margin-left: 8px;" @click="dialog=true">新增行数</span>
+      </template>
+      <template #content>
+        <el-table
+          :data="materialList"
+          stripe
+          style="width: 100%"
+          header-cell-class-name="table-header"
+          align="center"
+          empty-text="材料列表信息为空，点击标题右侧添加按钮进行添加"
+        >
+          <el-table-column align="left" prop="annexName" label="材料名称" width="280">
+            <template slot-scope="scope">
+              <div class="table-border">{{ scope.row.annexName }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="exampleFileId" label="样例">
+            <template slot-scope="{row}">
+              <el-upload action :on-exceed="list=>handleUpload({file:list[0]}).then(v=>row.exampleFileId=v)"
+                         :http-request="args=>handleUpload(args).then(v=>row.exampleFileId=v)" :limit="1" accept=".jpg,.png">
+                <el-button style="width: 102px">{{ row.exampleFileId ? '重新选择图片' : '选择图片文件' }}</el-button>
+              </el-upload>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="emptyFileId" label="空表">
+            <template slot-scope="{row}">
+              <el-upload action :on-exceed="list=>handleUpload({file:list[0]}).then(v=>row.emptyFileId=v)"
+                         :http-request="args=>handleUpload(args).then(v=>row.emptyFileId=v)" :limit="1" accept=".doc,.docx">
+                <el-button style="width: 102px">{{ row.emptyFileId ? '重新选择word' : '选择word文件' }}</el-button>
+              </el-upload>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="name" label="是否必填">
+            <template slot-scope="scope">
+              <el-switch
+                v-model="scope.row.mustFill"
+                active-value="1" inactive-value="0"
+                active-color="#5088FF"
+                inactive-color="#D0D4DC">
+              </el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="操作">
+            <template slot-scope="scope">
+              <span class="iconfont iconEdit icon-color89B" title="编辑" @click="editInfo(scope.$index)" style="margin-right: 10px;"/>
+              <span class="iconfont iconDelete icon-color89B" title="删除" @click="deleteInfo(scope.$index)"/>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+    </ai-card>
+    <ai-dialog
+        title="添加附件材料"
+        :visible.sync="dialog"
+        @closed="form.annexName='',idAdd=true,index=null"
+        @onConfirm="onConfirm"
+        @onCancel="dialog=false"
+        width="720px">
+      <el-form :rules="rules" ref="materialForm" label-width="100px" :model="form">
+        <el-form-item label="材料名称：" prop="annexName">
+          <el-input v-model.trim="form.annexName" size="small" placeholder="请输入材料名称" show-word-limit :maxlength="32"/>
+        </el-form-item>
+      </el-form>
+    </ai-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "attachmentMaterial",
+  inject: ['config'],
+  props: {
+    instance: Function,
+  },
+  data() {
+    return {
+      materialList: [],
+      dialog: false,
+      idAdd: true,
+      index: null,
+      form: {
+        annexName: ""
+      },
+    }
+  },
+  computed: {
+    rules() {
+      return {
+        annexName: [{required: true, message: '请输入材料名称', trigger: 'blur'}]
+      }
+    }
+  },
+  methods: {
+    handleAttachmentMaterial() {
+      return Promise.resolve(this.materialList)
+    },
+    handleUpload(file) {
+      let formData = new FormData()
+      formData.append('file', file.file)
+      return this.instance.post(`/admin/file/add`, formData).then(res => {
+        if (res?.code == 0) {
+          this.$message.success('上传成功')
+          let data = res.data[0].split(';')
+          return data[1]
+        }
+      })
+    },
+
+    /**
+     * 添加附件材料
+     * */
+    onConfirm() {
+      this.$refs['materialForm'].validate(valid => {
+        if (valid) {
+          if(this.idAdd){
+            this.materialList.push({
+              annexName: this.form.annexName,
+              mustFill: "1",
+              exampleFileId: "",
+              emptyFileId: "",
+            })
+          }else {
+            this.materialList[this.index].annexName = this.form.annexName
+          }
+          this.dialog = false
+        }
+      })
+    },
+
+    /**
+     * 删除
+     */
+    deleteInfo(index) {
+      this.$confirm("是否删除？").then(res => {
+        this.materialList.splice(index, 1)
+      })
+    },
+
+    /**
+     * 编辑标题
+     */
+    editInfo(index) {
+      this.dialog = true
+      this.idAdd = false
+      this.index = index
+      this.form.annexName = JSON.parse(JSON.stringify(this.materialList[index].annexName))
+    }
+  },
+
+  created() {
+    if (this.config.detailObj?.id) {
+      this.materialList = JSON.parse(JSON.stringify(this.config.detailObj?.processAnnexDefs))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.attachment-material {
+  .rightBtn {
+    font-size: 14px;
+    color: #5088FF;
+    user-select: none;
+    cursor: pointer;
+  }
+
+  .table-border {
+    width: 260px;
+    height: 32px;
+    box-sizing: border-box;
+    padding: 0 14px;
+    display: flex;
+    align-items: center;
+    border-radius: 2px;
+    border: 1px solid #D0D4DC;
+    color: #333333;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  ::v-deep .el-upload-list {
+    display: none;
+  }
+
+  .iconDelete {
+    user-select: none;
+    cursor: pointer;
+  }
+}
+</style>