soc_web/src/views/resumption/ruleManager/dialog.editPoint.vue

<template>
  <div class="rule-type">
    <DialogCom width="600px" :title="index >= 0 ? '编辑履职内容' : '新增履职内容'" :visible.sync="dataVisible" :show-close="false"
      @close="() => {
          this.$refs.form.resetFields();
        }
        " append-to-body>
      <div>
        <el-form ref="form" :model="formData" :rules="formDataRules" label-width="110px" class="formbox">
          <!-- <el-form-item label="检查要点编号" prop="pointNum">
            <el-input
              v-model="formData.pointNum"
              type="number"
              laceholder="请输入检查要点编号"
              @blur="check()"
              @input="formData.pointNum = Number(formData.pointNum)"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="履职内容" prop="name">
            <el-input  type="textarea" :rows="3" v-model="formData.name" placeholder="请输入履职内容" maxlength="255"></el-input>
          </el-form-item>
          <el-form-item label="履职区域" prop="areaId">
            <el-select style="width: 100%;" v-model="formData.areaId" placeholder="请选择履职区域" @change="onAreaChanged"
              clearable>
              <el-option v-for="item in areas" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>            
          </el-form-item>
          <el-form-item label="履职点位" prop="checkId">
            <el-select style="width: 100%;" v-model="formData.checkId" placeholder="请选择履职点位" @change="onCheckChanged"
              clearable>
              <el-option v-for="item in checks" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <span style="color:rgb(184,189,192)"><i class="el-icon-info"></i>履职区域、履职点位至少选择一个</span>
          </el-form-item>
          <el-form-item label="数据来源" prop="businessType">
            <el-select style="width: 100%;" v-model="formData.businessType" placeholder="请选择数据来源" clearable>
              <el-option v-for="item in pointDataSource" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" maxlength="255" :rows="3"
              clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dataVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit()">{{
          index >= 0 ? "保 存" : "添 加"
        }}</el-button>
      </div>
    </DialogCom>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { allAreaByOrgtype } from "@/api/system/area";
import { allCheckByOrgType } from "@/api/system/check";
import MessageEx from "@/components/message/messageex.js";
export default {
  data() {
    return {
      index: null,
      dataVisible: false,
      formData: this.reset(),
      formDataRules: {
        name: [{ required: true, message: "请输入履职内容" }],
        // areaId: [{ required: true, message: "请选择履职区域" }],
      },
      currentOrgType: null,
      areas: [],
      checks:[]
    };
  },
  props: {
    rule: {
      type: Object,
    },
    pointDataSource: {
      type: Array,
      default: [],
    },
  },
  watch: {},
  computed: {
    ...mapState([]),
  },
  methods: {
    ...mapMutations([]),
    reset() {
      return {
        id: null,
        name: null,
        areaId: null,
        areaName: null,
        checkId:null,
        checkName:null,
        businessType: null,
        remark: null,
      };
    },
    async show(index, data) {
      if (index >= 0) {
        this.index = index;
        this.formData = data;
      } else {
        this.index = -1;
        this.formData = this.reset();
      }

      if (this.currentOrgType != this.rule.orgType) {
        this.currentOrgType = this.rule.orgType;
        allAreaByOrgtype(this.rule.orgType).then((d) => {         
          this.areas = d.data;
        });

        allCheckByOrgType(this.rule.orgType).then((d) => {
          this.checks = d.data;
        });
      }

      this.dataVisible = true;
    },
    onSubmit() {
      if(this.formData.name){
        this.formData.name=this.formData.name.trim();
      }
      
      this.$refs.form.validate((isValidate) => {
        if (!isValidate) return;
        if(!this.formData.checkId && !this.formData.areaId){
          MessageEx.info("履职区域、履职点位至少选择一个");
          return;
        }
        let obj = {};
        obj = { ...this.formData };
        if (obj.businessType == "") {
          obj.businessType = null;
        }

        this.$emit("submit", this.index, obj);
        this.dataVisible = false;
      });
    },
    // 事件
    onHide() {
      this.isShow = false;
    },
    onAreaChanged(val) {
      let area = this.areas.find((a) => a.id === val);
      if (area) {
        this.formData.areaName = area.name;
      }
    },
    onCheckChanged(val) {
      let check = this.checks.find((a) => a.id === val);
      if (check) {
        this.formData.checkName = check.name;
      }
    },
  },
  mounted() { },
  components: {},
};
</script>

<style lang="scss">
// .brand_info {
//   .el-form {
//     width: 600px;
//     padding-top: 40px;
//   }
// }
</style>