dvcp_v2_webapp/packages/processManagement/mattersConfig/components/attachmentMaterial.vue

<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>