file_safe_admin/src/pages/classification/edit.vue

<template>
  <el-dialog
    :title="classString.title"
    :visible.sync="dialogVisible"
    width="33%"
    :before-close="handleClose"
    append-to-body
  >
    <el-form label-width="100px" :model="form" ref="form" :rules="rules">
      <el-form-item label="分类名称：" prop="name">
        <el-input placeholder="请输入" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label required>
        <template slot="label" class="status">
          <span>状&#8195;&emsp;态</span>：
        </template>
        <el-radio-group v-model="form.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        style="margin-bottom: 20px"
        label
        v-for="(item, index) in form.role"
        :key="index"
        :prop="`role.${index}.value`"
        :rules="rules.value"
      >
        <template v-if="index == 0" slot="label">
          <span>访问权限：</span>
        </template>
        <div class="form_item_content">
          <el-input
            placeholder="请输入手机号"
            v-onlyInt
            maxlength="11"
            v-model="item.value"
          ></el-input>
          <i class="el-icon-plus" @click="addjurisdiction"></i>
          <i
            class="el-icon-minus"
            v-if="form.role.length != 1"
            @click="deletjurisdiction(index)"
          ></i>
        </div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button
        size="small"
        style="margin-left: 60px"
        type="primary"
        @click="submit('form')"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import * as api from '@/api/api'
export default {
  data() {
    const validateUser = (rule, value, callback) => {
      if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      classString: {},
      form: {
        name: '',
        status: 0,
        role: [{ value: '' }]
      },
      rules: {
        value: [{ required: true, trigger: 'blur', validator: validateUser }],
        name: [{ required: true, trigger: 'blur', message: '请输入分类名称' }]
      }
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      this.$parent.search()
      this.form = {
        name: '',
        status: 0,
        role: [{ value: '' }]
      }
    },
    openClose(val) {
      if (val) {
        this.classString = val
        if (!val.show) {
          this.detailList()
        }
      }
      this.title = val.title
      this.dialogVisible = true
    },
    /**
     * @method 分类管理详情
     * **/
    detailList() {
      let code = {
        typeId: this.classString.typeId
      }
      api.POST('/doc/type/detail', code).then(data => {
        if (data.code == 0) {
          this.form = data.data
          let role = []
          this.form.role.forEach(item => {
            role.push({ value: item })
          })
          this.form.role = role
        }
      })
    },
    /**
     * @method 增加访问权限
     * **/
    addjurisdiction() {
      this.form.role.push({ value: '' })
    },
    /**
     * @method 删除访问权限
     * **/
    deletjurisdiction(val) {
      this.form.role.splice(val, 1)
    },
    /**
     * @method 确定提交
     **/
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let role = []
          this.form.role.forEach(item => {
            role.push(item.value)
          })
          let code = {
            linkUrl: '',
            name: this.form.name,
            role: role,
            status: this.form.status
          }
          this.classString.show ? this.addclass(code) : this.editclass(code)
        }
      })
    },
    /**
     * @method 新增
     * **/
    addclass(val) {
      api.POST('/doc/type/add', val).then(data => {
        if (data.code == 0) {
          this.handleClose()
          this.$message.success(data.message)
        }
      })
    },
    /**
     * @method 编辑
     * **/
    editclass(val) {
      val.typeId = this.form.typeId
      api.POST('/doc/type/update', val).then(data => {
        if (data.code == 0) {
          this.handleClose()
          this.$message.success(data.message)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.status {
  padding: 0 12px 0 0;
}
.status::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
.form_item_content {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.el-icon-plus,
.el-icon-minus {
  border: 1px solid #f23f3a;
  color: #f23f3a;
  font-size: 30px;
  margin-left: 10px;
  border-radius: 4px;
  cursor: pointer;
}
.el-icon-minus {
  margin-right: 16px;
}
</style>