dvcp_v2_webapp/project/xiushan/apps/processManagement/mattersConfig/components/baseInfo.vue

<template>
  <section class="base-info">
    <ai-title title="基本信息"/>
    <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.trim="form.needToKnow" :instance="instance"/>
      </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>
  </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",
      },
      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'}],
        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(`/zwspapprovalclassification/list`, null, {
        current: 1,
        size: 9999
      }).then(res => {
        if (res?.data) {
          this.classList = res.data.records
        }
      })
    }
  },
  created() {
    this.getClassification()
    if (this.config.detailObj?.id) {
      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>