dvcp_v2_webapp/packages/work/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">
                    <ai-select v-model="form.classificationId" :instance="instance" action="/app/zwspapprovalclassification/list?status=1"
                               :prop="{label:'name'}"/>
                  </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>
import {mapMutations} from "vuex";

export default {
  name: "guidance",
  props: {
    instance: Function,
    dict: Object,
  },
  data() {
    return {
      form: {
        processName: "",
        department: "",
        classificationId: "",
        needToKnow: "",
        processDefStatus: "1",
      },
    }
  },
  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: v => v.detailObj?.id ? "编辑办事指南" : "添加办事指南",
  },
  methods: {
    ...mapMutations(['setPageTitle']),
    /**
     * 获取分类
     */
    /**
     * 保存
     */
    save() {
      this.$refs["baseInfoForm"].validate(valid => {
        if (valid) {
          this.instance.post(`/app/approval-process-def/add-update`, {
            ...this.form,
            processType: 2
          }).then(res => {
            if (res.code == 0) {
              this.$message.success("保存成功")
              this.$router.push({query: {}})
            }
          })
        }
      })
    },
    getDetail() {
      const {id} = this.$route.query
      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.setPageTitle(this.detailTitle)
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.guidance {
  height: 100%;

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

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


      :deep( .el-step ) {
        font-weight: bold;

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

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

        :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>