erp_fans/src/views/customer/addCustomer.vue

<template>
  <div>
    <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit" v-loading="loading">
      <template #name>
        <div style="width: 100%">
          <el-autocomplete v-model="formData.data.name" :fetch-suggestions="querySearch" clearable placeholder="请输入" style="width:100%" />
        </div>
      </template>
      <template #allAddress>
        <el-row style="width: 100%">
          <el-col :span="8">
            <el-form-item prop="countryId" class="wid100">
              <el-select v-model="formData.data.countryId" placeholder="国家" filterable style="width:100%"
                         @change="(val) => getCityData(val, '20', true)">
                <el-option v-for="item in countryData" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="provinceName" class="wid100">
              <selectCity placeholder="省/洲" @change="(val) => getCityData(val, '30', true)" style="width:100%" addressId="provinceId"
                          addressName="provinceName" v-model="formData.data" :data="provinceData">
              </selectCity>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="cityName" class="wid100">
              <selectCity placeholder="城市" addressId="cityId" addressName="cityName" style="width:100%" v-model="formData.data" :data="cityData">
              </selectCity>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style=" width: 100%">
          <el-col :span="24">
            <el-form-item prop="address" class="margin-b-0 wid100">
              <el-input v-model="formData.data.address" type="textarea" placeholder="详细地址">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template #person>
        <div style="width: 100%">
          <el-button type="primary" @click="clickAddPerson" v-if="!formOption.disabled">添 加</el-button>
          <el-table :data="formData.data.customerUserList" style="width: 100%; ">
            <el-table-column label="姓名" width="150" fixed="left">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  <el-form-item :prop="'customerUserList.' + $index + '.name'" class="margin-b-0 wid100" :rules="rules.name2" :inline-message="true">
                    <el-input v-model="row.name" placeholder="请输入" />
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="性别" width="100" fixed="left">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  <el-form-item :prop="'customerUserList.' + $index + '.sex'" class="margin-b-0 wid100" :rules="rules.sex" :inline-message="true">
                    <el-select v-model="row.sex" placeholder="请选择" style="width: 100%">
                      <el-option :label="'男'" :value="'1'" />
                      <el-option :label="'女'" :value="'2'" />
                    </el-select>
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="职位" width="150" fixed="left">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  <el-form-item :prop="'customerUserList.' + $index + '.position'" class="margin-b-0 wid100" :rules="rules.position"
                                :inline-message="true">
                    <el-input v-model="row.position" placeholder="请输入" />
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="是否企业关键KP" width="150" fixed="left">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  <el-form-item :prop="'customerUserList.' + $index + '.isKp'" class="margin-b-0 wid100" :rules="rules.isKp" :inline-message="true">
                    <el-select v-model="row.isKp" placeholder="请选择" style="width: 100%">
                      <el-option :label="'是'" :value="1" />
                      <el-option :label="'否'" :value="0" />
                    </el-select>
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="手机号" width="150" fixed="left">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  <el-form-item :prop="'customerUserList.' + $index + '.phone'" class="margin-b-0 wid100" :rules="rules.phone" :inline-message="true">
                    <el-input v-model="row.phone" placeholder="请输入" />
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="微信" width="150">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  <el-form-item :prop="'customerUserList.' + $index + '.weChat'" class="margin-b-0 wid100" :rules="rules.weChat"
                                :inline-message="true">
                    <el-input v-model="row.weChat" placeholder="请输入" />
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="旺旺" width="150">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  <el-form-item :prop="'customerUserList.' + $index + '.wangWang'" class="margin-b-0 wid100" :rules="rules.wangWang"
                                :inline-message="true">
                    <el-input v-model="row.wangWang" placeholder="请输入" />
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="联系电话" width="150">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  <el-form-item :prop="'customerUserList.' + $index + '.tel'" class="margin-b-0 wid100" :rules="rules.tel" :inline-message="true">
                    <el-input v-model="row.tel" placeholder="请输入" />
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="WhatsApp" width="150">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  <el-form-item :prop="'customerUserList.' + $index + '.whatsApp'" class="margin-b-0 wid100" :rules="rules.whatsApp"
                                :inline-message="true">
                    <el-input v-model="row.whatsApp" placeholder="请输入" />
                  </el-form-item>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="QQ" width="150">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  <el-form-item :prop="'customerUserList.' + $index + '.qq'" class="margin-b-0 wid100" :rules="rules.qq" :inline-message="true">
                    <el-input v-model="row.qq" placeholder="请输入" />
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="Skype" width="150">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  <el-form-item :prop="'customerUserList.' + $index + '.skype'" class="margin-b-0 wid100" :rules="rules.skype" :inline-message="true">
                    <el-input v-model="row.skype" placeholder="请输入" />
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="LinkedIn" width="150">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  <el-form-item :prop="'customerUserList.' + $index + '.linkedIn'" class="margin-b-0 wid100" :rules="rules.linkedIn"
                                :inline-message="true">
                    <el-input v-model="row.linkedIn" placeholder="请输入" />
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="Facebook" width="150">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  <el-form-item :prop="'customerUserList.' + $index + '.facebook'" class="margin-b-0 wid100" :rules="rules.facebook"
                                :inline-message="true">
                    <el-input v-model="row.facebook" placeholder="请输入" />
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="Dirrect Line" width="150">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  <el-form-item :prop="'customerUserList.' + $index + '.directLine'" class="margin-b-0 wid100" :rules="rules.directLine"
                                :inline-message="true">
                    <el-input v-model="row.directLine" placeholder="请输入" />
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="邮箱" width="150">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  <el-form-item :prop="'customerUserList.' + $index + '.email'" class="margin-b-0 wid100" :rules="rules.email" :inline-message="true">
                    <el-input v-model="row.email" placeholder="请输入" />
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="80" fixed="right" v-if="!formOption.disabled">
              <template #default="{ row, $index }">
                <!-- <el-button type="primary" link @click="clickInformationMore(row, $index)">更多</el-button> -->
                <el-button type="primary" link @click="clickDelete($index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </byForm>

    <el-dialog title="更多联系方式" v-if="openPerson" v-model="openPerson" width="700">
      <el-form :label-position="'right'" :model="formPerson.data" :rules="rulesPerson" ref="person" label-width="100px">
        <el-form-item label="联系人" prop="name">
          <el-input v-model="formPerson.data.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="formPerson.data.email" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="更多联系方式">
          <div style="width: 100%">
            <el-button type="primary" @click="clickAddMoreInformation">添 加</el-button>
            <el-table :data="formPerson.data.contact" style="width: 100%; margin-top: 16px">
              <el-table-column label="类型" width="180">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    <el-form-item :prop="'contact.' + $index + '.type'" class="margin-b-0 wid100" :rules="rulesPerson.type" :inline-message="true">
                      <el-select v-model="row.type" placeholder="请选择类型" style="width: 100%">
                        <el-option v-for="item in contactType" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </el-form-item>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="联系号码">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    <el-form-item :prop="'contact.' + $index + '.contactNo'" class="margin-b-0 wid100" :rules="rulesPerson.contactNo"
                                  :inline-message="true">
                      <el-input v-model="row.contactNo" placeholder="请输入联系号码" />
                    </el-form-item>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="120" fixed="right">
                <template #default="{ $index }">
                  <el-button type="primary" link @click="clickInformationDelete($index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="openPerson = false" size="default">取 消</el-button>
        <el-button type="primary" @click="submitPerson()" size="default">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import byForm from "@/components/byForm/index";
import useUserStore from "@/store/modules/user";
import selectCity from "@/components/selectCity/index.vue";
const props = defineProps({
  modalType: String,
  customerId: String,
  customerMail: {
    type: String,
    default: "",
  },
  isPrivate: {
    type: Boolean,
    default: false,
  },
  isHighseas: {
    type: Boolean,
    default: false,
  },
});
const modalType = ref("add");
const isHighseas = ref(false);
isHighseas.value = props.isHighseas;
const customerId = ref("");
const { proxy } = getCurrentInstance();
const loading = ref(false);
const userList = ref([]);
const deptData = ref([]);
const customerSlevelData = ref([]);
const customerTag = computed(
  () => proxy.useUserStore().allDict["customer_tag"]
);
const customerSource = computed(
  () => proxy.useUserStore().allDict["customer_source"]
);
const customerStatus = computed(
  () => proxy.useUserStore().allDict["customer_status"]
);
const contactType = computed(
  () => proxy.useUserStore().allDict["contact_type"]
);
const settlementWay = computed(
  () => proxy.useUserStore().allDict["settlement_way"]
);
const customerSlevel = computed(
  () => proxy.useUserStore().allDict["customer_slevel"]
);
const customerScale = computed(
  () => proxy.useUserStore().allDict["customer_scale"]
);
const customerState = computed(
  () => proxy.useUserStore().allDict["customer_state"]
);
const newoldCustomer = computed(
  () => proxy.useUserStore().allDict["newold_customer"]
);
const invoiceType = computed(
  () => proxy.useUserStore().allDict["invoice_type"]
);
const cooperationStatus = computed(
  () => proxy.useUserStore().allDict["cooperation_status"]
);

const submit = ref(null);
const formData = reactive({
  data: {
    countryId: "44",
  },
});
const getDict = () => {
  proxy
    .get("/tenantUser/list", {
      pageNum: 1,
      pageSize: 10000,
      tenantId: proxy.useUserStore().user.tenantId,
    })
    .then((res) => {
      userList.value = res.rows.map((item) => {
        return {
          label: item.nickName,
          value: item.userId,
        };
      });
    });

  proxy
    .post("/customerLv/page", {
      pageNum: 1,
      pageSize: 999,
    })
    .then((res) => {
      customerSlevelData.value = res.rows.map((x) => ({
        label: x.lvName,
        value: x.id,
      }));
    });

  proxy
    .get("/tenantDept/list", {
      pageNum: 1,
      pageSize: 9999,
      keyword: "",
      ancestors: proxy.useUserStore().user.companyId,
      tenantId: proxy.useUserStore().user.tenantId,
      // type: 2,
    })
    .then((res) => {
      deptData.value = proxy.handleTree(res.data, "deptId");
    });
};
getDict();
const countryData = ref([]);
const provinceData = ref([]);
const cityData = ref([]);
const getCityData = (id, type, isChange = false) => {
  proxy.post("/customizeArea/list", { parentId: id }).then((res) => {
    if (type === "20") {
      provinceData.value = res;
      if (isChange) {
        formData.data.provinceId = "";
        formData.data.provinceName = "";
        formData.data.cityId = "";
        formData.data.cityName = "";
      }
    } else if (type === "30") {
      cityData.value = res;
      if (isChange) {
        formData.data.cityId = "";
        formData.data.cityName = "";
      }
    } else {
      countryData.value = res;
    }
  });
};
getCityData("0");
const formOption = reactive({
  disabled: false,
  inline: true,
  labelWidth: 120,
  itemWidth: 100,
  rules: [],
});
const getDtl = () => {
  loading.value = true;
  proxy.post("/customer/detail", { id: customerId.value }).then((res) => {
    if (res.tag) {
      res.tags = res.tag.split(",");
    } else {
      res.tags = [];
    }
    formData.data = res;
    getCityData(formData.data.countryId, "20");
    if (formData.data.provinceId) {
      getCityData(formData.data.provinceId, "30");
    }
    proxy
      .post("/fileInfo/getList", { businessIdList: [customerId.value] })
      .then((fileObj) => {
        if (fileObj[customerId.value] && fileObj[customerId.value].length > 0) {
          formData.data.fileList = fileObj[customerId.value]
            .filter((x) => x.businessType == "10")
            .map((item) => {
              return {
                ...item,
                name: item.fileName,
                url: item.fileUrl,
              };
            });

          formData.data.imgFileList = fileObj[customerId.value]
            .filter((x) => x.businessType == "20")
            .map((item) => {
              return {
                ...item,
                name: item.fileName,
                url: item.fileUrl,
              };
            });
          if (
            formData.data.imgFileList &&
            formData.data.imgFileList.length > 0
          ) {
            formData.data.imageUrl = formData.data.imgFileList[0].fileUrl;
          }
        } else {
          formData.data.fileList = [];
          formData.data.imgFileList = [];
        }
      });
    loading.value = false;
  });
};
if (props && props.modalType) {
  modalType.value = props.modalType;
  if (modalType.value == "add") {
    formData.data = {
      countryId: "44",
      tags: [],
      fileList: [],
      imgFileList: [],
      customerUserList: [
        {
          name: "",
          email: "",
        },
      ],
    };
    if (props.customerMail) {
      formData.data.customerUserList[0].email = props.customerMail;
    }
    getCityData(formData.data.countryId, "20");
  } else if (
    (modalType.value == "edit" || modalType.value == "detail") &&
    props.customerId
  ) {
    customerId.value = props.customerId;
    getDtl();
    // 详情禁用
    if (modalType.value == "detail") {
      formOption.disabled = true;
    }
  }
}

const formConfig = computed(() => {
  return [
    // {
    //   type: "input",
    //   prop: "name",
    //   label: "客户名称",
    //   required: true,
    //   itemWidth: 100,
    //   itemType: "text",
    // },
    {
      type: "title1",
      title: "基本信息",
    },
    {
      type: "slot",
      slotName: "name",
      prop: "name",
      label: "客户名称",
    },
    {
      type: "input",
      prop: "customerCode",
      label: "客户编号",
      itemWidth: 100,
      itemType: "text",
    },
    {
      type: "slot",
      slotName: "allAddress",
      label: "详细地址",
    },
    // {
    //   type: "input",
    //   prop: "mainPart",
    //   label: "客户名称",
    //   itemWidth: 50,
    //   itemType: "text",
    // },
    // {
    //   type: "input",
    //   prop: "minorPart",
    //   label: "公司/客户客体",
    //   itemWidth: 50,
    //   itemType: "text",
    // },
    {
      type: "select",
      label: "业务员",
      prop: "userId",
      itemWidth: 25,
      data: userList.value,
      clearable: true,
      disabled: isHighseas.value,
    },
    {
      type: "treeSelect",
      prop: "deptId",
      label: "业务部门",
      data: deptData.value,
      propsTreeLabel: "deptName",
      propsTreeValue: "deptId",
      itemWidth: 25,
    },
    {
      type: "input",
      prop: "mainCategories",
      label: "主营品类",
      itemWidth: 25,
      itemType: "text",
    },
    {
      type: "select",
      label: "公司规模",
      prop: "companySize",
      itemWidth: 25,
      data: customerScale.value,
    },
    {
      type: "select",
      label: "客户结算方式",
      prop: "settlementMode",
      itemWidth: 25,
      data: settlementWay.value,
    },
    {
      type: "select",
      label: "客户类型",
      prop: "status",
      itemWidth: 25,
      data: customerStatus.value,
    },
    {
      type: "select",
      label: "客户分级",
      prop: "customerLvId",
      itemWidth: 25,
      data: customerSlevelData.value,
    },
    {
      type: "input",
      prop: "maintainLevel",
      label: "维系级别",
      itemWidth: 25,
      itemType: "text",
    },
    {
      type: "select",
      label: "新老客户",
      prop: "newOld",
      itemWidth: 25,
      data: newoldCustomer.value,
    },
    {
      type: "input",
      prop: "annualQuantity",
      label: "要求年订单量",
      itemWidth: 25,
      itemType: "text",
    },
    {
      type: "input",
      prop: "followUpAsk",
      label: "回访要求",
      itemWidth: 25,
      itemType: "text",
    },
    {
      type: "input",
      prop: "remind",
      label: "提醒设定",
      itemWidth: 25,
      itemType: "text",
    },
    {
      type: "date",
      itemType: "date",
      prop: "createGroupTime",
      label: "建群时间",
      itemWidth: 25,
    },
    {
      type: "select",
      label: "客户状态",
      prop: "state",
      itemWidth: 25,
      data: customerState.value,
    },
    {
      type: "select",
      label: "客户来源",
      prop: "source",
      itemWidth: 25,
      data: customerSource.value,
    },
    {
      type: "input",
      prop: "fax",
      label: "传真",
      required: true,
      itemWidth: 25,
      itemType: "text",
    },
    {
      type: "select",
      label: "客户标签",
      prop: "tags",
      itemWidth: 100,
      multiple: true,
      data: customerTag.value,
      style: {
        width: "100%",
      },
    },
    // {
    //   type: "input",
    //   prop: "beneficiaryName",
    //   label: "Beneficiary Name",
    //   required: true,
    //   itemWidth: 50,
    //   itemType: "text",
    // },
    // {
    //   type: "input",
    //   prop: "beneficiaryAccountNumber",
    //   label: "Beneficiary Account Number",
    //   required: true,
    //   itemWidth: 50,
    //   itemType: "text",
    // },
    // {
    //   type: "input",
    //   prop: "beneficiaryBank",
    //   label: "Beneficiary Bank",
    //   required: true,
    //   itemWidth: 50,
    //   itemType: "text",
    // },
    // {
    //   type: "input",
    //   prop: "swiftCode",
    //   label: "Swift Code",
    //   required: true,
    //   itemWidth: 50,
    //   itemType: "text",
    // },
    // {
    //   type: "input",
    //   prop: "beneficiaryBankAddress",
    //   label: "Beneficiary Bank Address",
    //   required: true,
    //   itemWidth: 50,
    //   itemType: "text",
    // },
    // {
    //   type: "input",
    //   prop: "beneficiaryAddress",
    //   label: "Beneficiary Address",
    //   required: true,
    //   itemWidth: 50,
    //   itemType: "text",
    // },
    {
      type: "title1",
      title: "联系人",
    },
    {
      type: "slot",
      slotName: "person",
      label: "客户联系人",
    },
    {
      type: "title1",
      title: "客户对公财务信息",
    },
    {
      type: "select",
      label: "发票信息",
      prop: "invoiceType",
      itemWidth: 25,
      data: invoiceType.value,
    },
    {
      type: "select",
      label: "合作状态",
      prop: "cooperateStatus",
      itemWidth: 25,
      data: cooperationStatus.value,
    },
    {
      type: "input",
      prop: "accountName",
      label: "公司名称",
      itemWidth: 25,
      itemType: "text",
    },
    {
      type: "input",
      prop: "dutyParagraph",
      label: "税号",
      itemWidth: 25,
      itemType: "text",
    },
    {
      type: "input",
      prop: "accountAddress",
      label: "地址",
      itemWidth: 25,
      itemType: "text",
    },
    {
      type: "input",
      prop: "accountTel",
      label: "电话",
      itemWidth: 25,
      itemType: "text",
    },
    {
      type: "input",
      prop: "accountBank",
      label: "开户行(对公)",
      itemWidth: 25,
      itemType: "text",
    },
    {
      type: "input",
      prop: "accountNumber",
      label: "开户账号(对公)",
      itemWidth: 25,
      itemType: "text",
    },
    {
      type: "title1",
      title: "客户对私财务信息",
    },
    {
      type: "input",
      prop: "privAccountName",
      label: "账户名称",
      itemWidth: 25,
      itemType: "text",
    },
    {
      type: "input",
      prop: "privAccountBank",
      label: "开户行(对私)",
      itemWidth: 25,
      itemType: "text",
    },
    {
      type: "input",
      prop: "privAccountNumber",
      label: "开户账号(对私)",
      itemWidth: 25,
      itemType: "text",
    },
    {
      type: "upload",
      listType: "text",
      accept: "",
      prop: "fileList",
      label: "客户附件信息",
      itemWidth: 100,
    },
    {
      type: "uploadImg",
      // listType: "picture-card",
      // limit: 1,
      // accept: ".gif, .jpeg, .jpg, .png",
      prop: "imgFileList",
      imgProp: "imageUrl",
      label: "客户图片信息",
      itemWidth: 100,
    },
    {
      type: "title1",
      title: "跟进下单数据",
      isShow: modalType.value == "detail",
    },
    {
      type: "date",
      itemType: "date",
      prop: "lastFollowTime",
      label: "客情时间",
      itemWidth: 25,
      placeholder: " ",
      disabled: true,
      isShow: modalType.value == "detail",
    },
    {
      type: "input",
      prop: "followCount",
      label: "跟进次数",
      itemWidth: 25,
      itemType: "text",
      placeholder: " ",
      disabled: true,
      isShow: modalType.value == "detail",
    },
    {
      type: "date",
      itemType: "date",
      prop: "lastSaleDate",
      label: "最近下单时间",
      itemWidth: 25,
      placeholder: " ",
      disabled: true,
      isShow: modalType.value == "detail",
    },
    {
      type: "input",
      prop: "lastSaleDay",
      label: "下单距离天数",
      itemWidth: 25,
      itemType: "text",
      placeholder: " ",
      disabled: true,
      isShow: modalType.value == "detail",
    },
    {
      type: "input",
      prop: "orderCount",
      label: "下单次数",
      itemWidth: 25,
      itemType: "text",
      placeholder: " ",
      disabled: true,
      isShow: modalType.value == "detail",
    },
    // {
    //   type: "number",
    //   prop: "flatPrice",
    //   label: "每年成交金额",
    //   precision: 2,
    //   min: 0,
    //   controls: false,
    //   itemWidth: 25,
    //   disabled: false,
    // },
    {
      type: "number",
      prop: "orderAmountSum",
      label: "成交总金额",
      precision: 2,
      min: 0,
      controls: false,
      itemWidth: 25,
      placeholder: " ",
      disabled: true,
      isShow: modalType.value == "detail",
    },
  ];
});

const rules = ref({
  name: [{ required: true, message: "请输入公司/客户主体", trigger: "blur" }],
  customerCode: [
    { required: true, message: "请输入客户编号", trigger: "blur" },
  ],
  name2: [{ required: true, message: "请输入", trigger: "blur" }],
  // email: [{ required: true, message: "请输入电子邮箱", trigger: "blur" }],
  sex: [{ required: true, message: "请选择性别", trigger: "change" }],
  position: [{ required: true, message: "请输入职位", trigger: "blur" }],
  phone: [{ required: true, message: "请输入手机", trigger: "blur" }],

  countryId: [{ required: true, message: "请选择国家", trigger: "change" }],
  source: [{ required: true, message: "请选择客户来源", trigger: "change" }],
  status: [{ required: true, message: "请选择类型", trigger: "change" }],

  mainPart: [
    { required: true, message: "请选择公司/客户主体", trigger: "change" },
  ],
  minorPart: [
    { required: true, message: "请选择公司/客户客体", trigger: "change" },
  ],
  // userId: [{ required: true, message: "请选择业务员", trigger: "change" }],
  deptId: [{ required: true, message: "请选择业务部门", trigger: "change" }],
  level: [{ required: true, message: "请选择客户分级", trigger: "change" }],
  maintainLevel: [
    { required: true, message: "请输入维系级别", trigger: "blur" },
  ],
  newOld: [{ required: true, message: "请选择新老客户", trigger: "change" }],
  annualQuantity: [
    { required: true, message: "请输入要求年订单量", trigger: "blur" },
  ],
  followUpAsk: [{ required: true, message: "请输入回访要求", trigger: "blur" }],
  remind: [{ required: true, message: "请输入提醒设定", trigger: "blur" }],
  createGroupTime: [
    { required: true, message: "请选择建群时间", trigger: "change" },
  ],
});
if (props.isPrivate) {
  rules.value.userId = [
    { required: true, message: "请选择业务员", trigger: "change" },
  ];
}
const clickAddPerson = () => {
  if (
    formData.data.customerUserList &&
    formData.data.customerUserList.length > 0
  ) {
    formData.data.customerUserList.push({
      name: "",
      email: "",
      sex: "",
      position: "",
      tel: "",
      phone: "",
      qq: "",
      skype: "",
      facebook: "",
      isKp: "",
      weChat: "",
      wangWang: "",
      whatsApp: "",
      linkedIn: "",
      directLine: "",
    });
  } else {
    formData.data.customerUserList = [
      {
        name: "",
        email: "",
        sex: "",
        position: "",
        tel: "",
        phone: "",
        qq: "",
        skype: "",
        facebook: "",
        isKp: "",
        weChat: "",
        wangWang: "",
        whatsApp: "",
        linkedIn: "",
        directLine: "",
      },
    ];
  }
};
const formPerson = reactive({
  data: {},
});
const rulesPerson = ref({
  name: [{ required: true, message: "请输入", trigger: "blur" }],
  email: [{ required: true, message: "请输入电子邮箱", trigger: "blur" }],
  type: [{ required: true, message: "请选择类型", trigger: "change" }],
  contactNo: [{ required: true, message: "请输入联系号码", trigger: "blur" }],
});
const person = ref(null);
const openPerson = ref(false);
const moreIndex = ref(0);
const clickInformationMore = (item, index) => {
  moreIndex.value = index;
  if (item.contactJson) {
    item.contact = JSON.parse(item.contactJson);
  } else {
    item.contact = [];
  }
  formPerson.data = proxy.deepClone(item);
  openPerson.value = true;
};
const clickDelete = (index) => {
  formData.data.customerUserList.splice(index, 1);
};
const clickAddMoreInformation = () => {
  if (formPerson.data.contact && formPerson.data.contact.length > 0) {
    formPerson.data.contact.push({
      type: "",
      contactNo: "",
    });
  } else {
    formPerson.data.contact = [
      {
        type: "",
        contactNo: "",
      },
    ];
  }
};
const clickInformationDelete = (index) => {
  formPerson.data.contact.splice(index, 1);
};
const submitPerson = () => {
  person.value.validate((valid) => {
    if (valid) {
      formPerson.data.contactJson = JSON.stringify(formPerson.data.contact);
      formData.data.customerUserList[moreIndex.value] = formPerson.data;
      openPerson.value = false;
    }
  });
};

const handleSubmit = () => {
  submit.value.handleSubmit(() => {
    if (
      formData.data.customerUserList &&
      formData.data.customerUserList.length > 0
    ) {
      formData.data.tag = formData.data.tags.join(",");
      loading.value = true;
      proxy.post("/customer/" + modalType.value, formData.data).then(
        () => {
          ElMessage({
            message: modalType.value == "add" ? "添加成功" : "编辑成功",
            type: "success",
          });
          proxy.$emit("refreshList");
          loading.value = false;
        },
        (err) => {
          console.log(err);
          loading.value = false;
        }
      );
    } else {
      ElMessage("请添加客户联系人");
    }
  });
};
const querySearch = (queryString, callback) => {
  proxy
    .post("/customer/page", {
      pageNum: 1,
      pageSize: 20,
      name: queryString,
    })
    .then((res) => {
      if (res.rows && res.rows.length > 0) {
        res.rows = res.rows.map((item) => {
          return {
            ...item,
            value: item.name,
          };
        });
        callback(res.rows);
      } else {
        callback([]);
      }
    });
};

defineExpose({
  handleSubmit,
});
</script>

<style lang="scss" scoped>
</style>