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

<template>
  <section class="apply-form">
    <ai-card title="表单信息">
      <template #content>
        <el-form label-suffix="：" label-width="180px" ref="applyForm" :rules="rules" :model="form">
          <el-form-item label="表单类型" prop="id">
            <el-select placeholder="请选择" size="small" v-model="form.id" @change="onChange" clearable style="width: 100%;">
              <el-option
                v-for="(item,i) in formList" :key="i"
                :label="item.tableName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <div class="border-wrap">
            <template v-for="(item,index) in tablelist" :ke="index">
              <ai-title :title="item.groupName"></ai-title>
              <el-form-item :label="[e.fieldName,e.fieldNameSuffix].join('')" v-for="(e,j) in item.value"
                            :key="Math.random()">
                <el-input size="small" v-model="form.checkbox" :disabled="true" clearable placeholder="请输入"
                          style="width: 100%;" v-if="['0','1','6'].includes(e.fieldDataType)"/>

                <el-radio-group style="width: 100%;" v-if="e.fieldDataType==4" disabled>
                  <el-radio :label="k.dictValue" v-for="(k,m) in dict.getDict(e.dictionaryCode)" :key="Math.random()">
                    {{ k.dictName }}
                  </el-radio>
                </el-radio-group>

                <el-checkbox-group style="width: 100%;" v-if="e.fieldDataType==5" disabled>
                  <el-checkbox :label="p.dictName" v-for="(p,i) in dict.getDict(e.dictionaryCode)"
                               :key="Math.random()"></el-checkbox>
                </el-checkbox-group>

                <el-select placeholder="请选择" disabled size="small" clearable style="width: 100%;"
                           v-if="e.fieldDataType==9" v-model="e.fieldDataValue">
                  <el-option
                    v-for="(item,i) in dict.getDict(e.fieldDbName)" :key="i"
                    :label="item.dictName"
                    :value="item.dictValue">
                  </el-option>
                </el-select>

                <el-date-picker
                  v-model="form.picker"
                  v-if="['2','3','7','8'].includes(e.fieldDataType)"
                  :disabled="true"
                  type="date"
                  size="small"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </template>
            <template v-if="tablelist.length==0">
              <div class="no-data"></div>
            </template>
          </div>
        </el-form>
      </template>
    </ai-card>
  </section>
</template>

<script>
export default {
  name: "applyForm",
  inject: ["config"],
  props: {
    instance: Function,
    dict: Object,
  },
  data() {
    return {
      form: {
        approvalSteps: "",
        id: "",
      },
      formList: [],
      tablelist: [],
    }
  },

  computed: {
    rules() {
      return {
        id: [{required: true, message: '请选择表单类型', trigger: 'change'}]
      }
    }
  },

  methods: {
    handleApplyForm() {
      return new Promise((resolve, reject) => {
        this.$refs['applyForm'].validate(valid => {
          if (valid) {
            resolve(this.form)
          } else {
            reject(false)
          }
        })
      })
    },
    /**
     * 根据表单类型查询列表
     * */
    onChange(id) {
      if (id) {
        let dictionaryCodeArr = []
        this.instance.post(`/app/zwsptablelist/queryDetailById?id=${id}`).then(res => {
          if (res && res.data) {
            let arr = []
            this.form.approvalSteps = res.data.approvalSteps
            res.data.tableFieldInfos.map((item, index) => {
              if (item.fieldType == 0) {
                if(item.dictionaryCode && dictionaryCodeArr.indexOf(item.dictionaryCode)==-1){
                  dictionaryCodeArr.push(item.dictionaryCode)
                }
                let {groupIndex, groupName} = item
                if (!arr[groupIndex]) {
                  arr[groupIndex] = {
                    groupName,
                    value: []
                  }
                }
                arr[groupIndex].value.push({...item})
              }
            })
            if(dictionaryCodeArr.length){
              this.$dict.load(dictionaryCodeArr).then(()=>{
                this.tablelist = arr.filter(e => e)
              })
            }else {
              this.tablelist = arr.filter(e => e)
            }
          }
        })
      } else {
        this.tablelist = []
        this.form.approvalSteps = ""
      }
    },
    /**
     * 获取表单类型列表
     * */
    getFormList() {
      this.instance.post(`/app/zwsptablelist/list`, null, {
        current: 1,
        size: 9999,
      }).then(res => {
        if (res && res.data) {
          this.formList = res.data.records
        }
      })
    },
  },
  created() {
    this.getFormList()
    if (this.config.detailObj?.id) {
      this.form = JSON.parse(JSON.stringify(this.config.detailObj?.tableInfo))
      this.onChange(this.form.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.apply-form {
  .border-wrap {
    box-sizing: border-box;
    padding: 20px;
    width: 100%;
    border: 1px solid #6FAFFF;

    .no-data {
      background-size: 120px 120px;
      height: 160px;
      margin: 48px auto 10px;
    }

    .rightBtn {
      font-size: 14px;
      color: #999999;
      user-select: none;
      cursor: pointer;
    }

    .small-input {
      width: 48px;
      margin: 0 8px;
    }

    ::v-deep .family-info {
      margin-left: 24px;

      ::v-deep .el-form-item__content {
        margin-left: 24px !important;
      }
    }
    ::v-deep .el-radio{
      margin-bottom: 6px;
    }
  }
}
</style>