2

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

@@ -0,0 +1,154 @@
+<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>