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

<template>
  <section class="base-info">
    <ai-card title="基本信息">
      <template #content>
        <el-form :model="form" :rules="rules" ref="baseInfoForm" label-suffix="：" label-width="100px">
          <el-form-item label="事项名称" prop="processName">
            <el-input v-model.trim="form.processName" size="small" clearable placeholder="请输入事项名称" :maxlength="30"
                      show-word-limit/>
          </el-form-item>
          <el-row type="type" justify="space-between" :gutter="20">
            <el-col :span="12">
              <el-form-item label="所属部门" prop="department">
                <el-select placeholder="请选择" size="small" v-model="form.department" clearable style="width: 100%;">
                  <el-option
                    v-for="(item,i) in dict.getDict('hbDepartment')" :key="i"
                    :label="item.dictName"
                    :value="item.dictValue">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属分类" prop="classificationId">
                <el-select placeholder="请选择" size="small" v-model="form.classificationId" clearable
                           style="width: 100%;">
                  <el-option
                    v-for="(item,i) in classList" :key="i"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="办结时限" prop="timeLimit">
            <el-input v-model.trim="form.timeLimit" oninput="value=value.replace(/[^\d]/g,'')" size="small" clearable
                      placeholder="请输入天数" style="width: 270px;"/>
          </el-form-item>
          <el-form-item label="办理须知" prop="needToKnow">
            <ai-editor v-model="form.needToKnow" :instance="instance" @validate="v=>valid=!v"/>
          </el-form-item>
          <el-form-item label="是否启用" prop="processDefStatus">
            <el-switch
              v-model="form.processDefStatus"
              active-color="#5088FF"
              inactive-color="#D0D4DC" active-value="1" inactive-value="0">
            </el-switch>
          </el-form-item>
        </el-form>
      </template>
    </ai-card>
  </section>
</template>

<script>

  export default {
    name: "baseInfo",
    inject: ['config'],
    props: {
      instance: Function,
      dict: Object,
    },
    data() {
      const validTimeLimit = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入办结时限'));
        } else {
          if (+value <= 0) {
            return callback(new Error('最小值为1'));
          }
          callback();
        }
      }
      return {
        form: {
          processName: "",
          department: "",
          classificationId: "",
          timeLimit: "",
          needToKnow: "",
          processDefStatus: "1",
        },
        valid:true,
        classList: [],
        rules: {
          processName: [{required: true, message: '请输入事项名称', trigger: 'blur'}],
          department: [{required: true, message: '请选择所属部门', trigger: 'change'}],
          classificationId: [{required: true, message: '请选择所属分类', trigger: 'change'}],
          timeLimit: [{required: true, validator: validTimeLimit, trigger: 'blur'}],
          needToKnow: [
            {required: true, message: '请输入办理须知', trigger: 'blur'},
            {
              validator: (r, v, cb) => {
                if (this.valid) {
                  cb()
                } else {
                  cb('字数超过限制')
                }
              }
            }
          ],
          processDefStatus: [{required: true, message: '请选择是否启用', trigger: 'change'}],
        }
      }
    },
    methods: {
      banseInfoForm() {
        return new Promise((resolve, reject) => {
          this.$refs['baseInfoForm'].validate(valid => {
            if (valid) {
              resolve(this.form)
            } else {
              reject(false)
            }
          })
        })
      },
      /**
       * 获取分类
       */
      getClassification() {
        this.instance.post(`/app/zwspapprovalclassification/list`, null, {
         params: {
           current: 1,
           status: 1,
           size: 9999
         }
        }).then(res => {
          if (res?.data) {
            this.classList = res.data.records
          }
        })
      }
    },
    created() {
      this.getClassification()
      if (this.config.detailObj?.id) {
        this.$nextTick(_=>{
          Object.keys(this.form).map(e => this.form[e] = this.config.detailObj[e])
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .base-info {
    .iconAudit {
      font-size: 36px;
      color: #3D94FB;
    }
  }
</style>