kd-aiot-frontend/src/views/enterpriseModel/regionalManage/components/area-edit.vue

<!-- 机构编辑弹窗 -->
<template>
  <ele-modal
    width="880px"
    :visible.sync="visibleFlag"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    :title="title"
    :before-close="updateVisible"
    :maxable="true"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="140px">
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="区域类型：" prop="areaLevel">
            <DictSelection dictName="区域类型" v-model="form.areaType" :disabled="dialogType=='view'"></DictSelection>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="区域编码：" prop="areaCode">
            <el-input
              clearable
              :maxlength="50"
              v-model="form.areaCode"
              placeholder="请输入区域编码"
              :disabled="dialogType=='view'"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="区域名称：" prop="name">
            <el-input

              clearable
              :maxlength="50"
              v-model="form.name"
              placeholder="请输入区域名称"
              :disabled="dialogType=='view'"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="区域等级：" prop="areaLevel">
            <DictSelection dictName="区域等级" v-model="form.areaLevel" :disabled="dialogType=='view'"></DictSelection>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="父区域：">
            <area-select
              :disabled="dialogType=='view'"
              v-model="form.parentId"
              :data="organizationList"
            />
          </el-form-item>
        </el-col>

        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="备注：">
            <el-input
              style="width: 100%"
              v-model="form.remark"
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="附件：">
            <fileUpload
              v-model="form.areaImg"
              module="main"
              :showLib="false"
              :limit="1"
            />
          </el-form-item>


        </el-col>

        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="排序：">
            <el-input-number
              style="width: 100%"
              v-model="form.areaSort"
              placeholder="请选择"
              controls-position="right"
              :min="1"
            ></el-input-number>
          </el-form-item>
        </el-col>




      </el-row>
    </el-form>


    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
import areaSelect from './area-select.vue';
import areaTypeSelect from './area-type-select.vue';
import fileUpload from '@/components/upload/fileUpload';
import {basicAreaSaveAPI, basicAreaUpdateAPI} from "@/api/regionalManage";



export default {
  components: {areaSelect, areaTypeSelect, fileUpload},
  props: {
    // 弹窗是否打开
    visibleFlag: Boolean,
    // 修改回显的数据
    data: Object,
    // 上级id
    parentId: [Number, String],
    // 数据
    organizationList: Array
  },
  data() {
    const defaultForm = {
      id: null,
      parentId: null,
      areaCode: "",
      areaImg: [],
      areaLevel: "",
      areaSort: 100,
      areaType: "",
      factoriesId: '',
      name: "",
      parentName: "",
      remark: "",
      stationCity: "",
      stationCode: "",
      stationCounty: "",
      stationId: '',
      stationName: "",
      stationProvince: "",

    };
    return {
      defaultForm,
      responsibleName: '',
      // 表单数据
      form: {...defaultForm},
      // 表单验证规则
      rules: {
        name: [
          {required: true, message: '请输入区域名称', trigger: 'blur'}
        ],
        areaLevel: [
          {required: true, message: '请选择区域等级', trigger: 'change'}
        ],
        areaType: [{required: true, message: '请选择区域类型', trigger: 'change'}],
        areaCode: [{required: true, message: '请输入区域编码', trigger: 'blur'}],
      },
      // 提交状态
      loading: false,
      dialogType: false,
      title: '',
      // 是否是修改
      isUpdate: false
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive;
    }
  },
  methods: {
    init(type,row={}) {
      this.title = type =='update'?'修改': type =='add'?'新增':'详情'
      this.dialogType = type
      if(type == 'update') {
        let data = {...row}
        Object.assign(this.form, data)
      }
    },
    /* 保存编辑 */
    async save() {
      if (!(await this.formValidate())) {
        return false;
      }
      this.loading = true;
      const data = {
        ...this.form,
        parentId: this.form.parentId || 0
      };
      if (!this.dialogType == 'update') {
        delete data.id;
      }
      const saveOrUpdate = this.dialogType == 'update' ? basicAreaUpdateAPI : basicAreaSaveAPI;
      saveOrUpdate(data)
        .then((msg) => {
          this.loading = false;
          this.$message.success(msg);
          this.updateVisible(false);
          this.$emit('done');
        })
        .catch((e) => {
          this.loading = false;
          // this.$message.error(e.message);
        });
    },
    formValidate() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid) => {
          resolve(valid);
        });
      });
    },
    enterpriseValidate() {
      return new Promise((resolve, reject) => {
        this.$refs.enterpriseForm.validate((valid) => {
          resolve(valid);
        });
      });
    },


    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visibleFlag', false);
    }
  }
};
</script>