qa-prevention-gwj-vue/src/views/mkmj/area/components/edit.vue

<template>
  <div class="app-container">
    <div class="level-title">
      <h1>{{ this.$parent.AREA_ID == '' ? "新增" : "修改" }}</h1>
    </div>
    <div>
      <el-form v-loading="dialogFormVisible" ref="form" :model="form" :rules="rules" label-width="150px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="区域名称：" prop="AREA_NAME">
              <el-input v-model="form.AREA_NAME" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="区域范围：">
              <el-input v-model="form.AREA_RANGE" placeholder="区域范围"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="区域级别：" prop="AREA_LEAVE">
              <el-select v-model="form.AREA_LEAVE" disabled style="width: 100%;">
                <el-option v-for="item in leaveList" :key="item.ID" :label="item.NAME" :value="item.ID" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="ui-foot">
      <el-button type="success" @click="confirm">保 存</el-button>
      <el-button plain type="info" @click="goBack">返 回</el-button>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import SelectTree from '@/components/SelectTree'
import waves from '@/directive/waves' // waves directive
export default {

  components: { Pagination, SelectTree },
  directives: { waves },
  data() {
    return {
      dialogFormVisible: false,
      dialogTableVisible: false,
      PERSON_CHARGE: '',
      DEPARTMENT_ID_OLD: '',
      form: {
        AREA_NAME: '',
        AREA_RANGE: '',
        AREA_LEAVE: '',
        AREA_PARENT_ID: '',
        AREA_ID: ''
      },
      riskForm: {},
      KEYWORDS: '',
      rules: {
        AREA_NAME: [{ required: true, message: '区域名称不为空', trigger: 'blur' }],
        AREA_LEAVE: [{ required: true, message: '区域级别不为空', trigger: 'blur' }]
      },
      formLabelWidth: '120px',
      fullscreenLoading: false,
      total: 0,
      listQuery: {
        page: 1,
        limit: 20
      },
      multipleSelection: [],
      accidentList: [],
      leaveList: [
        { ID: '1', NAME: '一级' },
        { ID: '2', NAME: '二级' },
        { ID: '3', NAME: '三级' }
      ]
    }
  },
  watch: {
  },
  async created() {
    this.AREA_ID = this.$parent.AREA_ID
    this.form.AREA_LEAVE = this.$parent.AREA_LEAVE
    this.form.AREA_PARENT_ID = this.$parent.AREA_PARENT_ID
    if (this.AREA_ID) {
      this.getDataByID()
    }
  },
  methods: {
    confirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.$parent.AREA_ID == '') {
            this.handleAdd()
          } else {
            if (valid) {
              this.listLoading = true
              requestFN(
                '/mkmjArea/edit',
                this.form
              ).then((data) => {
                if (data.code != 0) {
                  this.$message.warning(data.msg)
                } else {
                  this.$message.success(data.msg)
                  this.listLoading = false
                  this.dialogFormEdit = false
                  if (this.form.AREA_LEAVE === '1') {
                    this.$parent.activeName = 'List'
                  } else if (this.form.AREA_LEAVE === '2') {
                    this.$parent.activeName = 'ListTwo'
                  } else if (this.form.AREA_LEAVE === '3') {
                    this.$parent.activeName = 'ListThree'
                  }
                  this.$parent.$refs.list.getList()
                }
              }).catch((e) => {
                this.listLoading = false
              })
            }
          }
        }
      })
    },
    handleAdd() {
      requestFN(
        '/mkmjArea/add',
        this.form
      ).then((data) => {
        if (this.form.AREA_LEAVE === '1') {
          this.$parent.activeName = 'List'
        } else if (this.form.AREA_LEAVE === '2') {
          this.$parent.activeName = 'ListTwo'
        } else if (this.form.AREA_LEAVE === '3') {
          this.$parent.activeName = 'ListThree'
        }
        this.$parent.$refs.list.getList()
      }).catch((e) => {
      })
    },
    getDataByID() {
      this.listLoading = true
      this.dialogFormVisible = true
      requestFN(
        '/mkmjArea/goEdit',
        { AREA_ID: this.AREA_ID }
      ).then((data) => {
        this.form = data.pd
        this.dialogFormVisible = false
      }).catch((e) => {
        this.dialogFormVisible = false
        this.listLoading = false
      })
    },
    // 返回列表
    goBack() {
      if (this.form.AREA_LEAVE === '1') {
        this.$parent.activeName = 'List'
      } else if (this.form.AREA_LEAVE === '2') {
        this.$parent.activeName = 'ListTwo'
      } else if (this.form.AREA_LEAVE === '3') {
        this.$parent.activeName = 'ListThree'
      }
    }
  }
}
</script>

<style>
</style>