dvcp_v2_webapp/packages/work/processManagement/examinationApproval/components/addClassification.vue

<template>
  <section class="add-classification">
    <ai-detail>
      <ai-title slot="title" :title="pageTitle" isShowBack isShowBottomBorder @onBackClick="$emit('back')"/>
      <template #content>
        <ai-card title="基本信息">
          <template #content>
            <el-form :model="form" :rules="rules" ref="addClassification" label-suffix="：" label-width="100px"
                     size="small">
              <el-form-item label="分类名称" prop="name">
                <el-input v-model.trim="form.name" size="small" clearable placeholder="如“社会保障”（限10个字）" :maxlength="10"
                          show-word-limit/>
              </el-form-item>
              <el-form-item label="排序" prop="showIndex">
                <el-input v-model.number="form.showIndex" size="small" clearable placeholder="请输入数字，数字越小排序越前"/>
              </el-form-item>
              <el-form-item label="分类描述" prop="desc">
                <el-input v-model.trim="form.desc" type="textarea" size="small" clearable placeholder="限500个字"
                          :maxlength="500" show-word-limit :rows="4"/>
              </el-form-item>
              <el-form-item label="分类图标" prop="icon" class="icon-form">
                <el-upload ref="iconUploader" action="#" :auto-upload="false" :on-change="handleUploadIcon" :limit="1"
                           :show-file-list="false">
                  <el-image v-if="!!form.icon" class="el-upload-list__item" :src="form.icon">
                    <i class="el-icon-picture-outline"/>
                  </el-image>
                  <div v-else class="el-upload--picture-card"><i class="el-icon-plus"/></div>
                </el-upload>
              </el-form-item>
              <el-form-item label="是否启用" prop="status">
                <el-radio v-model="form.status" label="1">是</el-radio>
                <el-radio v-model="form.status" label="0">否</el-radio>
              </el-form-item>
            </el-form>
          </template>
        </ai-card>
      </template>
      <template #footer>
        <el-button class="btn" @click="$emit('back')">取消</el-button>
        <el-button class="btn" type="primary" @click="submit">提交</el-button>
      </template>
    </ai-detail>
  </section>
</template>

<script>

  export default {
    name: "addClassification",
    props: {
      instance: Function,
      row: Object,
    },
    data() {
      return {
        form: {
          id: "",
          name: "",
          showIndex: "",
          desc: "",
          icon: "",
          status: "1"
        }
      }
    },
    computed: {
      pageTitle() {
        return this.row?.id ? "编辑分类" : "添加分类"
      },
      rules() {
        return {
          name: [{required: true, message: '请输入分类名称', trigger: 'blur'}],
          showIndex: [
            {required: true, message: '请输入排序数字'},
            {min: 1, max: 999, type: "number", message: '排序只能输入1~999之间的整数'},
          ],
          desc: [{required: true, message: '请填写描述', trigger: 'blur'}],
          icon: [{required: true, message: '请选择分类图标', trigger: 'blur'}],
          status: [{required: true, message: '请选择是否启用', trigger: 'change'}],
        }
      }
    },
    methods: {

      /**
       * 提交
       */
      submit() {
        this.$refs['addClassification'].validate(valid => {
          if (valid) {
            this.instance.post(`/app/zwspapprovalclassification/addOrUpdate`, {
              ...this.form,
              status: Number(this.form.status)
            }).then(res => {
              if (res.code == 0) {
                this.$message.success(this.row.id ? "编辑成功" : "添加成功")
                this.$emit('back')
              }
            })
          }
        })
      },
      /**
       * 获取详情
       */
      getDetail() {
        this.instance.post(`/app/zwspapprovalclassification/queryDetailById?id=${this.row.id}`).then(res => {
          if (res?.data) {
            this.form = res.data
          }
        })
      },
      /**
       * 上传图标
       */
      handleUploadIcon(file) {
        let data = new FormData()
        data.append("file", file.raw)
        this.instance.post(`/admin/file/add`, data).then(res => {
          if (res?.data) {
            this.form.icon = res.data?.[0].replace(/;.*/, '')
          }
          this.$refs.iconUploader?.clearFiles()
        }).catch(() => this.$refs.iconUploader?.clearFiles());
      }
    },
    created() {
      if (this.row.id) {
        this.getDetail()
      }
    }
  }
</script>

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

    .iconAudit {
      font-size: 36px;
      color: #3D94FB;
    }

    .el-upload-list__item {
      width: 80px;
      height: 80px;
    }

    .icon-form {
      :deep( .el-form-item__content ){
        display: flex;
      }
    }

    .select-icon {
      width: 96px;
      height: 28px;
      line-height: 0;
    }

    .iconfont {
      margin-right: 8px;
    }

    .icon-style {
      display: flex;
      flex-wrap: wrap;

      .icon:hover {
        border-color: #5088FF;
      }

      .icon_color {
        border-color: #5088FF;
      }
    }

    .icon {
      width: 48px;
      height: 48px;
      border: 1px solid #ddd;
      border-radius: 4px;
      margin-right: 16px;
      margin-bottom: 16px;
      cursor: pointer;
    }

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

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