yos_web/src/SManagement/orderclue_detail/components/editContact.vue

<template>
  <div>
    <el-button size="small" type="text" @click="onshow" >{{
        $t("编辑")
      }}</el-button>
    <el-drawer
        :title="$t(`编辑联系人`)"
        :visible.sync="dialogFormVisible"
        size="600px"
        direction="rtl"
        :show-close="false"
        append-to-body
        @close="onClose"
    >
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form
              :model="form"
              :rules="rules"
              ref="form"
              size="mini"
              label-position="right"
              :label-width="tool.onlyZh('90px')"
          >
            <el-col :span="24">
              <el-form-item :label="$t(`姓名`) + ':'" prop="name">
                <el-input    autosize v-model="form.name" :placeholder="$t('请填写联系人')" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-radio v-model="form.isTelephone" label="0">{{
                    $t("手机号")
                  }}</el-radio>
                <el-radio v-model="form.isTelephone" label="1">{{
                    $t("座机电话")
                  }}</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.isTelephone == '1'">
              <el-form-item :label="$t('联系方式') + ':'" prop="telephone">
                <el-input
                    v-model="form.areaCode"
                    style="width: 25%"
                    autocomplete="on"
                    :placeholder="$t('请填写区号')"
                ></el-input>
                <span style="color: #999999">——</span>
                <el-input
                    v-model="form.telephone"
                    style="width: 68%"
                    autocomplete="on"
                    :placeholder="$t('请填写座机电话')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                  v-if="form.isTelephone == '0'"
                  :label="$t('联系方式') + ':'"
                  prop="phonenumber"
                  :rules="[
                  { required: true, message: this.$t('手机号码不能为空') },
                  {
                    pattern: /^1[3-9][0-9]\d{8}$/,
                    message: this.$t('请输入正确手机号码'),
                    trigger: 'change',
                  },
                ]"
              >
                <el-input
                    v-model="form.phonenumber"
                    autocomplete="on"
                    :placeholder="$t('请填写手机号码')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('微信') + ':'" prop="wechatnum">
                <el-input
                    autosize
                    v-model="form.wechatnum"
                    :placeholder="$t(`请输入微信`)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                  :label="$t(`邮箱`) + ':'"
                  :rules="[
                  {
                    pattern:
                      /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                    message: $t('请输入有效的邮箱'),
                    trigger: 'change',
                  },
                ]"
              >
                <el-input
                    autosize
                    v-model="form.email"
                    :placeholder="$t(`请输入邮箱`)"
                ></el-input>
              </el-form-item>
            </el-col>
<!--            <el-col :span="24">-->
<!--              <el-form-item :label="$t(`传真`) + ':'">-->
<!--                <el-input-->
<!--                    autosize-->
<!--                    v-model="form.fax"-->
<!--                    :placeholder="$t(`请输入传真`)"-->
<!--                ></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="24">
              <el-form-item :label="$t(`关联企业`) + ':'">
                <el-input
                    autosize
                    v-model="form.enterprisename"
                    :placeholder="$t(`请输入关联企业`)"
                    disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`部门`) + ':'" prop="depname">
                <el-input
                    autosize
                    v-model="form.depname"
                    :placeholder="$t(`请输入部门`)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`职位`) + ':'" prop="position">
                <el-input
                    autosize
                    v-model="form.position"
                    :placeholder="$t(`请输入职位`)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`性别`) + ':'">
                <el-radio v-model="form.sex" label="男">{{
                    $t("男")
                  }}</el-radio>
                <el-radio v-model="form.sex" label="女">{{
                    $t("女")
                  }}</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`生日`) + ':'">
                <el-date-picker
                    v-model="form.birthday"
                    value-format="yyyy-MM-dd"
                    type="date"
                    :placeholder="$t('选择日期')"
                    style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`家庭住址`) + ':'">
                <el-input
                    type="textarea"
                    rows="5"
                    v-model="form.address"
                    :placeholder="$t(`请输入家庭住址`)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`偏好`)" prop="preference">
                <el-input
                    v-model="form.preference"
                    autocomplete="on"
                    :placeholder="$t(`请填写偏好`)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`爱好`)" prop="hobby">
                <el-input
                    v-model="form.hobby"
                    autocomplete="on"
                    :placeholder="$t(`请填写爱好`)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`备注`) + ':'">
                <el-input
                    type="textarea"
                    rows="5"
                    v-model="form.remarks"
                    :placeholder="$t(`请输入备注`)"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="onClose" class="normal-btn-width">{{
            $t("取 消")
          }}</el-button>
        <el-button
            size="small"
            type="primary"
            :loading="loading"
            @click="onSubmit"
            class="normal-btn-width"
        >{{ $t("确 定") }}</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import contactsNewTemplate from "@/template/contactsNewTemplate/index";
export default {
  name: "editContact",
  props: ["data"],
  components: { contactsNewTemplate },
  data() {
    var validateMobilePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t("手机号不可为空")));
      } else {
        if (value !== "") {
          var reg = /^1[3456789]\d{9}$/;
          if (!reg.test(value)) {
            callback(new Error(this.$t("请输入有效的手机号码")));
          }
        }
        callback();
      }
    };
    var telephone = (rule, value, callback) => {
      if (this.form.areaCode === "" && this.form.telephone === "") {
        callback(new Error(this.$t("座机电话不能为空")));
      } else {
        var reg = /^0\d{2,3}-\d{7,8}$/;
        let telephone = this.form.areaCode + "-" + this.form.telephone;
        if (!reg.test(telephone)) {
          callback(new Error(this.$t("请输入正确座机电话")));
        } else {
          callback();
        }
      }
    };
    return {
      dialogFormVisible: false,
      activeName: "first",
      visible: false,
      tagList: [],
      tags: [],
      groupname: "客户联系人",
      form: {
        "sat_orderclue_contactsid": 0,
        "sys_phonebookid": '',
        "sat_orderclueid": '',
        "phonenumber": "",
        "birthday": "",
        "name": "",
        "depname": "",
        "wechatnum": "",
        "position": "",
        "email": "",
        "sex": "",
        "homeaddress": "",
        "remarks": "",
        "fax": "",
        "isleader": "",
        "grade": "",
        "hobby": "",
        "preference": "",
        "sys_phonebookgroupid": 0,
        "telephone": "",
        "isTelephone": "0",
        "areaCode": "",
      },
      rules: {
        name: [
          { required: true, message: this.$t("姓名不能为空"), trigger: "blur,change" },
        ],
        // phonenumber: [
        //   { required: true, validator: validateMobilePhone, trigger: 'blur' },
        // ]
        telephone: [
          { required: true, validator: telephone, trigger: "change" },
        ],
        depname: [
          { required: true, message: this.$t('部门不能为空'), trigger: 'blur' },
        ],
        position: [
          { required: true, message: this.$t('职位不能为空'), trigger: 'blur' },
        ],
      },
      enterpriseContact: {
        param: {
          content: {
            sys_enterpriseid: "",
            pageNumber: 1,
            pageSize: 9999,
            where: {
              condition: "",
            },
          },
          id: 20221219193002,
        },
        listData: [],
        total: 0,
        currentPage: 0,
        show: false,
      },
      myContacts: {
        param: {
          id: 20221219161202,
          content: {
            pageNumber: 1,
            pageSize: 9999,
            ownertable: "sa_customers",
            ownerid: "",
            where: {
              condition: "",
            },
          },
        },
        listData: [],
        total: 0,
        currentPage: 0,
        show: false,
      },
      paramTag: {
        id: "20220929085401",
        content: {
          nocache: true,
          ownertable: "",
          ownerid: 0,
        },
      },
      contactParam:{
        "id": 2025042110061502,
        "content": {
          "sat_orderclueid": this.$route.query.id,
          "pageSize": 20,
          "pageNumber": 1,
          "where":{
            "condition":""
          }
        },
      }
    };
  },
  computed: {
    ...mapGetters({
      loading: "loading",
    }),
  },
  methods: {
    onshow() {
      this.dialogFormVisible = true;
      this.activeName = "first";
      this.enterpriseContact.param.content.pageNumber = 1;
      this.myContacts.param.content.pageNumber = 1;
      this.enterpriseContactList();
      this.myContactList();
      this.getTag();
      // this.form.sys_enterpriseid = this.data.sys_enterpriseid;
      this.form = Object.assign({}, this.form, this.data);
      // this.tags = this.form.tag;
      if (this.form.phonenumber.indexOf("-") != "-1") {
        this.form.isTelephone = "1";
        this.form.areaCode = this.data.phonenumber.substring(
            0,
            this.form.phonenumber.indexOf("-")
        );
        this.form.telephone = this.data.phonenumber.substring(
            this.form.areaCode.length + 1
        );
        this.form.phonenumber = "";
      }
      // this.form.enterprisename = this.data.enterprisename_customer;
    },
    onSubmit() {
      this.$refs["form"].validate(async (valid) => {
        if (!valid) return false;
        this.$store.commit("setLoading", true);
        if (this.form.isTelephone == "1") {
          this.form.phonenumber =
              this.form.areaCode + "-" + this.form.telephone;
        }
        this.form.sat_orderclueid = this.$route.query.id
        const res = await this.$api.requested({
          id: "2025042110003902",
          content: this.form,
        });
        this.tool.showMessage(res, async () => {
          /*let res2 = await this.$api.requested({
            "id": 20220929090901,
            "content": {
              "ownertable":"sys_phonebook",
              "ownerid":res.data.sys_phonebookid,
              "datatag": this.tags
            }
          })*/
          this.$emit("updateSuccess");
          this.$refs["form"].resetFields();
          this.tags = [];
          this.form = {
            "sat_orderclue_contactsid": 0,
            "sys_phonebookid": '',
            "sat_orderclueid": '',
            "phonenumber": "",
            "birthday": "",
            "name": "",
            "depname": "",
            "wechatnum": "",
            "position": "",
            "email": "",
            "sex": "",
            "homeaddress": "",
            "remarks": "",
            "fax": "",
            "isleader": "",
            "grade": "",
            "hobby": "",
            "preference": "",
            "sys_phonebookgroupid": 0,
            "telephone": "",
            "isTelephone": "0",
            "areaCode": "",
          };
          this.$store.commit("setLoading", false);
          this.dialogFormVisible = false;
        });
      });
    },
    searchData() {
      this.changeTab();
    },
    changeTab() {
      this.enterpriseContactList();
      this.myContactList();
    },
    /*企业联系人*/
    async enterpriseContactList() {
      this.enterpriseContact.param.content.where.condition = this.form.name;
      this.enterpriseContact.param.content.sys_enterpriseid =
          this.data.sys_enterpriseid;
      const res = await this.$api.requested(this.enterpriseContact.param);
      this.enterpriseContact.listData = res.data;
      this.enterpriseContact.total = res.total;
      this.enterpriseContact.currentPage = res.pageNumber;
    },
    /*选择企业联系人*/
    enterpriseContactSelect(val) {
      this.form.name = val.name;
      if (val.phonenumber.indexOf("-") != "-1") {
        this.form.isTelephone = "1";
        this.form.areaCode = val.phonenumber.substring(
            0,
            val.phonenumber.indexOf("-")
        );
        this.form.telephone = val.phonenumber.substring(
            this.form.areaCode.length + 1
        );
        this.form.phonenumber = "";
      } else {
        this.form.isTelephone = "0";
        this.form.phonenumber = val.phonenumber;
        this.form.areaCode = "";
        this.form.telephone = "";
      }
      this.form.email = val.email;
      this.form.position = val.position;
      this.form.depname = val.depname;
      this.form.sex = val.sex;
      this.form.birthday = val.birthday;
      this.form.address = val.address;
      this.form.remarks = val.remarks;
      this.enterpriseContact.show = false;
    },
    handleSizeChangeEnterprise(val) {
      // console.log(`每页 ${val} 条`);
      this.enterpriseContact.param.content.pageSize = val;
      this.enterpriseContactList();
    },
    handleCurrentChangeEnterprise(val) {
      // console.log(`当前页: ${val}`);
      this.enterpriseContact.param.content.pageNumber = val;
      this.enterpriseContactList();
    },
    /*我的联系人*/
    async myContactList() {
      this.myContacts.param.content.where.condition = this.form.name;
      this.myContacts.param.content.sys_enterpriseid =
          this.data.sys_enterpriseid;
      this.myContacts.param.content.ownerid = this.data.sys_enterpriseid;
      const res = await this.$api.requested(this.myContacts.param);

      this.myContacts.listData = res.data;
      this.myContacts.total = res.total;
      this.myContacts.currentPage = res.pageNumber;
    },
    /*选择我的联系人*/
    myContactSelect(val) {
      this.form.name = val.name;
      if (val.phonenumber.indexOf("-") != "-1") {
        this.form.isTelephone = "1";
        this.form.areaCode = val.phonenumber.substring(
            0,
            val.phonenumber.indexOf("-")
        );
        this.form.telephone = val.phonenumber.substring(
            this.form.areaCode.length + 1
        );
        this.form.phonenumber = "";
      } else {
        this.form.isTelephone = "0";
        this.form.phonenumber = val.phonenumber;
        this.form.areaCode = "";
        this.form.telephone = "";
      }
      this.form.email = val.email;
      this.form.position = val.position;
      this.form.depname = val.depname;
      this.form.sex = val.sex;
      this.form.birthday = val.birthday;
      this.form.address = val.address;
      this.form.remarks = val.remarks;
      this.form.sys_phonebookid = val.sys_phonebookid;
      this.enterpriseContact.show = false;
    },
    inputChange(val) {
      this.form.name = val;
    },
    contactData(val) {
      this.form.name = val.name;
      if (val.phonenumber.indexOf("-") != "-1") {
        this.form.isTelephone = "1";
        this.form.areaCode = val.phonenumber.substring(
            0,
            val.phonenumber.indexOf("-")
        );
        this.form.telephone = val.phonenumber.substring(
            this.form.areaCode.length + 1
        );
        this.form.phonenumber = "";
      } else {
        this.form.isTelephone = "0";
        this.form.phonenumber = val.phonenumber;
        this.form.areaCode = "";
        this.form.telephone = "";
      }
      this.form.email = val.email;
      this.form.position = val.position;
      this.form.depname = val.depname;
      this.form.sex = val.sex;
      this.form.birthday = val.birthday;
      this.form.address = val.address;
      this.form.remarks = val.remarks;
      this.form.sys_phonebookid = val.sys_phonebookid;
    },
    handleSizeChangeMy(val) {
      // console.log(`每页 ${val} 条`);
      this.myContacts.param.content.pageSize = val;
      this.myContactList();
    },
    handleCurrentChangeMy(val) {
      // console.log(`当前页: ${val}`);
      this.myContacts.param.content.pageNumber = val;
      this.myContactList();
    },
    onClose() {
      this.$refs["form"].resetFields();
      this.tags = [];
      this.form = {
        "sat_orderclue_contactsid": 0,
        "sys_phonebookid": '',
        "sat_orderclueid": '',
        "phonenumber": "",
        "birthday": "",
        "name": "",
        "depname": "",
        "wechatnum": "",
        "position": "",
        "email": "",
        "sex": "",
        "homeaddress": "",
        "remarks": "",
        "fax": "",
        "isleader": "",
        "grade": "",
        "hobby": "",
        "preference": "",
        "sys_phonebookgroupid": 0,
        "telephone": "",
        "isTelephone": "0",
        "areaCode": "",
      };
      this.dialogFormVisible = false;
    },
    async getTag() {
      this.paramTag.content.ownertable = "plm_unit";
      const res = await this.$api.requested(this.paramTag);
      this.tagList = res.data.option;
    },
    hasDisabledTag(item) {
      let arr = [];
      let arr2 = [];
      arr = this.tagList.filter((item) => {
        return this.tags.includes(item.tag);
      });
      arr.forEach((e) => {
        arr2 = arr2.concat(e.mutextag);
      });
      arr2 = this.tags.length === 0 ? [] : arr2;
      let _isSame = arr2.some((tag) => item.tag === tag);
      return _isSame;
    },
  },
}
</script>

<style scoped>

</style>