peisweb/src/components/customerOrg/ContactPersonEdit.vue

<template>
  <div>
    <el-form :model="form" ref="form" label-width="70px" :rules="rules" style="margin-top: -10px;">
      <el-row>
        <el-col :span="12">
          <el-form-item prop="displayName" label="联系人">
            <el-input v-model="form.displayName" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职务">
            <el-input v-model="form.title" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input type="textarea" v-model="form.remark" size="small" maxlength="50" show-word-limit></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="创建者">
            <el-input v-model="form.creatorName" disabled size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="创建时间" label-width="80px" style="margin-left:-10px;">
            <el-date-picker v-model="form.creationTime" type="datetime" size="small" style="width: 100%" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="修改者">
            <el-input v-model="form.creatorName" disabled size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="修改时间" label-width="80px" style="margin-left:-10px;">
            <el-date-picker v-model="form.lastModificationTime" type="datetime" size="small" style="width: 100%"
              disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-table :data="contactMethodList" border height="300" row-key="id" size="small" highlight-current-row
        ref="contactMethod" style="margin-top: 20px;">
        <el-table-column prop="contactMethodType" label="类型" width="200">
          <template slot-scope="scope">
            <el-select v-model="scope.row.contactMethodType" size="small">
              <el-option v-for="item in Methodtypes" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="contactMethodValue" label="联系方式">
          <template slot-scope="scope">
            <el-input v-model="scope.row.contactMethodValue" required size="small" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="60" align="center">
          <template slot-scope="scope">
            <i class="el-icon-delete" @click="deleteRow(scope.$index)"
              style="font-size: 24px;color: red;cursor:pointer;"></i>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div style="display: flex;justify-content: space-between;margin-top: 10px;">
      <div></div>
      <div>
        <el-button class="commonbutton" @click="dialogContactPerson = false">取 消</el-button>
        <el-button type="success" class="commonbutton" @click="addMethod">新增联系方式</el-button>
        <el-button type="primary" class="commonbutton" @click="submit('form')">确 定</el-button>
      </div>
    </div>

  </div>
</template>
<script>
import moment from "moment";
import { mapState } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { getPagePriv, checkPagePriv, objCopy, deepCopy, arrayExistObj } from "../../utlis/proFunc";
export default {
  components: {},
  props: ["refFunc"],
  data() {
    return {
      pagePriv: {
        routeUrlorPageName: 'customerOrg', //当前页面归属路由或归属页面权限名称
        privs: [] // 页面权限
      },

      form: { //联系人表单信息
        id: "",
        customerOrgId:'',
        creationTime: null,
        lastModificationTime: null,
        creatorName: "",
        lastModifierName: "",
        displayName: "",
        title: "",
        remark: "",
      }, 
      formInit:{},
      contactMethodList: [],  //联系方式（可修改）


      Methodtypes: [
        //{ value: '',label: '所有订单状态' },
        { value: "0", label: "电话" },
        { value: "1", label: "邮箱" },
      ],

      rules: {
        displayName: [
          { required: true, message: "请输入名称", trigger: "blur" },
        ],
      },
    };
  },

  created() {
    //获取用户当前页面的权限
    let userPriv = window.sessionStorage.getItem('userPriv')
    if (userPriv) this.pagePriv.privs = deepCopy(getPagePriv(this.pagePriv.routeUrlorPageName))
    this.formInit = deepCopy(this.form)
  },

  //挂载完成
  mounted() {
    this.getFormData(this.dataTransOpts.tableS.contact_person.id)
  },

  computed: {
    ...mapState(["window", "customerOrg","dialogWin", "dataTransOpts"]),
  },

  methods: {
    moment, checkPagePriv,

    // 获取表单数据
    getFormData(id){
      if(!id){
        this.form = deepCopy(this.formInit)
        this.form.customerOrgId = this.dataTransOpts.tableS.customer_org.id
        this.contactMethodList = []
        return
      }
      getapi(`/api/app/contact-person/${id}`)
      .then(res =>{
        if(res.code != -1){
          this.form = deepCopy(res.data)
          this.getContactMethodList(res.data.id)
        }
      })
      
    },

    //获取联系方式列表
    //api/app/contact-method/in-contact-person-id?ContactPersonId=3a0c08ad-4304-138b-d9e6-a7338739dfc4' \
    getContactMethodList(ContactPersonId) {
      if (!ContactPersonId) {
        this.contactMethodList = []
        return
      }
      getapi("/api/app/contact-method/in-contact-person-id", {
        ContactPersonId,
      }).then(res => {
        //console.log('res.data',res.data)
        if(res.code != -1) this.contactMethodList = res.data;
      });
    },

    //删除联系方式行
    deleteRow(index) {
      this.$confirm("此操作确定后将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      }).then(() => {
        this.contactMethodList.splice(index, 1);
        //this.submit('form');
      }).catch((err) => {
        if (err == 'cancel') {
          this.$message.info("已取消删除");
        }
      });
    },

    //联系人信息提交
    submit(formName) {
      let body = {
        customerOrgId: "",
        displayName: "",
        title: "",
        remark: "",
      };
      this.$refs[formName].validate((valid, fields) => {
        if (!valid) {
          this.$message.warning(fields[Object.keys(fields)[0]][0].message);
          return false;
        }

        objCopy(this.form, body);
        let contactMethod = {
          contactPersonId: this.form.id,
          details:this.contactMethodList
        }

        console.log("body,contactMethod", body,contactMethod);

        if (!this.form.id) {
          postapi("/api/app/contact-person", body)
            .then((res) => {
              //console.log('api/app/contact-person')
              if (res.code != -1) {
                this.form = res.data                
                this.dataTransOpts.tableS.contact_person.id = res.data.id
                this.refFunc(['curChooseRow'],res.data)
                contactMethod.contactPersonId = res.data.id
                return postapi('/api/app/contactmethod/createmany',contactMethod);
              }
            })
            .then((res) => {
              //console.log('api/app/contact-method/many')
              if (res && res.code != -1) {
                console.log("操作成功！");
                this.dialogWin.ContactPersonEdit = false
              }
            });
        } else {
          putapi(`/api/app/contact-person/${this.form.id}`, body)
            .then((res) => {
              if (res.code != -1) {
                this.refFunc(['curChooseRow'],this.form)
                return postapi('/api/app/contactmethod/createmany',contactMethod);
              }
            })
            .then((res) => {
              //console.log('api/app/contact-method/many')
              //this.getContactPersonList(this.customerOrgId); //改成局部刷新
              if (res && res.code != -1) {
                console.log("操作成功！");
                this.dialogWin.ContactPersonEdit = false
              }
            });
        }
      })
    },

    //新增联系方式
    addMethod() {
      this.contactMethodList.push({
        contactMethodValue: "",
        contactMethodType: "0",
        contactPersonId: this.form.id,
      });
    },

  },

  watch: {
    // 单位id未变时，强制刷新
    "dataTransOpts.refresh.contact_person.S": {
      // immediate: true,
      handler(newVal, oldVal) {
        console.log(`watch 联系人 newVal:${newVal} oldVal:${oldVal} customerOrgId: ${this.dataTransOpts.tableS.contact_person.id}`);
        this.getFormData(this.dataTransOpts.tableS.contact_person.id)
      }
    },

    // 'customerOrgId' (newVal,oldVal){
    //   console.log('watch customerOrgId',newVal,oldVal)
    //   if(newVal != oldVal){
    //     this.personId = ''
    //   }
    // }
  },
};
</script>
<style scoped>
@import '../../assets/css/global_table.css';
@import '../../assets/css/global_input.css';
@import '../../assets/css/global_form.css';
@import '../../assets/css/global_dialog.css';

.btnClass {
  width: 110px;
}
</style>