127 lines
		
	
	
		
			4.1 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			127 lines
		
	
	
		
			4.1 KiB
		
	
	
	
		
			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">
 | 
						||
            <ai-select placeholder="请选择" v-model="form.department" action="/app/appfinancialorganization/nameList"
 | 
						||
                       :instance="instance" :prop="{label:'organizationName',value:'organizationName'}"/>
 | 
						||
          </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(`/app/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>
 |