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

<template>
  <div class="guidance">
    <ai-detail>
      <ai-title slot="title" :title="detailTitle" isShowBack isShowBottomBorder @onBackClick="handleBack"/>
      <template #content>
        <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="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>
          </template>
        </ai-card>
      </template>
      <template #footer>
        <el-button class="btn" @click="handleBack">取消</el-button>
        <el-button class="btn" type="primary" @click="save">保存</el-button>
      </template>
    </ai-detail>
  </div>
</template>

<script>

  export default {
    name: "addConfig",
    props: {
      instance: Function,
      dict: Object,
      row: Object,
      processType: String
    },
    data() {
      return {
        form: {
          processName: "",
          department: "",
          classificationId: "",
          needToKnow: "",
          processDefStatus: "1",
        },
        classList: [],
      }
    },
    computed: {
      rules() {
        return {
          processName: [{required: true, message: '请输入事项名称', trigger: 'blur'}],
          department: [{required: true, message: '请选择所属部门', trigger: 'change'}],
          classificationId: [{required: true, message: '请选择所属分类', trigger: 'change'}],
          needToKnow: [{required: true, message: '请输入办理须知', trigger: 'blur'}],
          processDefStatus: [{required: true, message: '请选择是否启用', trigger: 'change'}],
        }
      },
      detailTitle() {
        return this.row?.id ? "编辑办事指南" : "添加办事指南"
      }
    },
    methods: {
      /**
       * 获取分类
       */
      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
          }
        })
      },
      /**
       * 保存
       */
      save() {
        this.$refs["baseInfoForm"].validate(valid => {
          if (valid) {
            this.instance.post(`/app/approval-process-def/add-update`, {
              ...this.form,
              id: this.row.id,
              processType: this.processType
            }).then(res => {
              if (res.code == 0) {
                this.$message.success("保存成功")
                this.$router.push({query: {}})
              }
            })
          }
        })
      },
      getDetail(id) {
        this.instance.post(`/app/approval-process-def/info-id`, null, {params: {id}}).then(res => {
          if (res?.data) {
            Object.keys(this.form).map(e => this.form[e] = res.data[e])
          }
        })
      },
      handleBack() {
        this.$router.push({query: {}})
      }
    },
    created() {
      this.getClassification()
      if (this.row?.id) {
        this.getDetail(this.row?.id)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .add-config {
    height: 100%;

    .step {
      width: 100%;
      height: 72px;
      font-size: 14px;

      .el-steps {
        display: flex;
        align-items: center;
        height: 72px;
        padding: 0 calc(50% - 380px);


        ::v-deep .el-step {
          font-weight: bold;

          ::v-deep .el-step__icon {
            width: 24px;
            height: 24px;
            background: #fff;

            .iconfont {
              font-size: 24px;
            }
          }

          ::v-deep .el-step__main {
            display: flex;
            align-items: center;

            .el-step__arrow {
              background: #D0D4DC;
              margin: 0 8px;
              height: 2px;

              &:before, &:after {
                display: none;
              }
            }
          }

          .is-process {
            color: #2266FF;
          }

          .is-wait {
            color: #666;
            border-color: #D0D4DC;
          }
        }

      }

    }

    .btn {
      width: 92px;
      height: 32px;

      &:nth-child(2) {
        margin-left: 24px;
      }
    }
  }
</style>