fans-mobile/src/views/customer/file/detail.vue

<template>
  <div class="form">
    <van-nav-bar :title="$t('customerFile.' + route.query.type)" :left-text="$t('common.back')" left-arrow @click-left="onClickLeft"> </van-nav-bar>
    <testForm v-model="formData.data" :formOption="formOption" :formConfig="formConfig"> </testForm>
    <testForm v-model="formData.data" :formOption="formOptionTwo" :formConfig="formConfigTwo" @onSubmit="onSubmit"> </testForm>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import { getUserInfo } from "@/utils/auth";
import testForm from "@/components/testForm/index.vue";

const proxy = getCurrentInstance().proxy;
const onClickLeft = () => history.back();
const route = useRoute();
const customerSource = ref([]);
const customerStatus = ref([]);
const customerTag = ref([]);
const userList = ref([]);
const formData = reactive({
  data: {
    customerCode: null,
    code: null,
    countryId: null,
    provinceId: null,
    cityId: null,
    address: null,
    zipCode: null,
    name: null,
    status: null,
    source: null,
    userId: null,
    customerUserList: [],
  },
});
const formOption = reactive({
  readonly: true, //用于控制整个表单是否只读
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  hiddenSubmitBtn: true,
  btnConfig: {
    isNeed: false,
    prop: "customerUserList",
    plain: true,
    listTitle: proxy.t("customerFile.customerContact"),
    listConfig: [
      {
        type: "input",
        label: proxy.t("customerFile.contact"),
        prop: "name",
      },
      {
        type: "input",
        label: proxy.t("customerFile.email"),
        prop: "email",
      },
    ],
  },
});
const formConfig = reactive([
  {
    type: "input",
    label: proxy.t("customerFile.customerName"),
    prop: "name",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("customerFile.cityText"),
    prop: "cityText",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("customerFile.address"),
    prop: "address",
    itemType: "textarea",
  },
  {
    type: "input",
    label: "传真",
    prop: "fax",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("customerFile.source"),
    prop: "sourceText",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("customerFile.status"),
    prop: "statusText",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("customerFile.userId"),
    prop: "userText",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("customerFile.tag"),
    prop: "tagText",
    itemType: "text",
  },
  {
    type: "input",
    label: "Beneficiary Name",
    prop: "beneficiaryName",
    itemType: "text",
  },
  {
    type: "input",
    label: "Beneficiary Account Number",
    prop: "beneficiaryAccountNumber",
    itemType: "text",
  },
  {
    type: "input",
    label: "Beneficiary Bank",
    prop: "beneficiaryBank",
    itemType: "text",
  },
  {
    type: "input",
    label: "Swift Code",
    prop: "swiftCode",
    itemType: "text",
  },
  {
    type: "input",
    label: "Beneficiary Bank Address",
    prop: "beneficiaryBankAddress",
    itemType: "text",
  },
  {
    type: "input",
    label: "Beneficiary Address",
    prop: "beneficiaryAddress",
    itemType: "text",
  },
]);
const formOptionTwo = reactive({
  readonly: true, //用于控制整个表单是否只读
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  hiddenSubmitBtn: true,
  submitBtnText: proxy.t("customerFile.followUpRecord"),
  btnConfig: {
    isNeed: false,
    prop: "recordsList",
    plain: true,
    listTitle: proxy.t("customerFile.content"),
    listConfig: [
      {
        type: "input",
        label: proxy.t("customerFile.date"),
        prop: "date",
      },
      {
        type: "input",
        label: proxy.t("customerFile.customerName1"),
        prop: "followUpUserName",
      },
      {
        type: "input",
        label: proxy.t("customerFile.content"),
        prop: "content",
      },
    ],
  },
});
const formConfigTwo = reactive([]);
const onSubmit = () => {
  proxy.$router.push({
    path: "customerFileRecords",
    query: {
      id: route.query.id,
    },
  });
};
const getUser = () => {
  return proxy
    .get("/tenantUser/list", {
      pageNum: 1,
      pageSize: 10000,
      tenantId: getUserInfo().tenantId,
    })
    .then((res) => {
      if (res.rows && res.rows.length > 0) {
        userList.value = res.rows.map((item) => {
          return {
            text: item.nickName,
            value: item.userId,
          };
        });
      }
    });
};
const getSource = () => {
  return proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      tenantId: getUserInfo().tenantId,
      dictCode: "customer_source",
    })
    .then((res) => {
      customerSource.value = res.data.rows;
    });
};
const getStatus = () => {
  return proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      tenantId: getUserInfo().tenantId,
      dictCode: "customer_status",
    })
    .then((res) => {
      customerStatus.value = res.data.rows;
    });
};
const getTag = () => {
  return proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      tenantId: getUserInfo().tenantId,
      dictCode: "customer_tag",
    })
    .then((res) => {
      customerTag.value = res.data.rows;
    });
};
onMounted(() => {
  Promise.all([getUser(), getSource(), getStatus(), getTag()]).then(() => {
    if (route.query.id) {
      proxy.post("/customer/detail", { id: route.query.id }).then((res) => {
        formData.data = res.data;
        let cityText = "";
        if (formData.data.countryName) {
          cityText = formData.data.countryName;
          if (formData.data.provinceName) {
            cityText = cityText + "," + formData.data.provinceName;
            if (formData.data.cityName) {
              cityText = cityText + "," + formData.data.cityName;
            }
          }
        }
        formData.data.cityText = cityText;
        let sourceText = "";
        if (
          formData.data.source &&
          customerSource.value &&
          customerSource.value.length > 0
        ) {
          let list = customerSource.value.filter(
            (item) => item.dictKey == formData.data.source
          );
          if (list && list.length > 0) {
            sourceText = list[0].dictValue;
          }
        }
        formData.data.sourceText = sourceText;
        let statusText = "";
        if (
          formData.data.status &&
          customerStatus.value &&
          customerStatus.value.length > 0
        ) {
          let list = customerStatus.value.filter(
            (item) => item.dictKey == formData.data.status
          );
          if (list && list.length > 0) {
            statusText = list[0].dictValue;
          }
        }
        formData.data.statusText = statusText;
        let userText = "";
        if (
          formData.data.userId &&
          userList.value &&
          userList.value.length > 0
        ) {
          let list = userList.value.filter(
            (item) => item.value == formData.data.userId
          );
          if (list && list.length > 0) {
            userText = list[0].text;
          }
        }
        formData.data.userText = userText;
        if (formData.data.tag) {
          let tagText = "";
          let tags = formData.data.tag.split(",");
          if (tags && tags.length > 0) {
            for (let i = 0; i < tags.length; i++) {
              let list = customerTag.value.filter(
                (item) => item.dictKey == tags[i]
              );
              if (list && list.length > 0) {
                if (i === 0) {
                  tagText = list[0].dictValue;
                } else {
                  tagText = tagText + "," + list[0].dictValue;
                }
              }
            }
          }
          formData.data.tagText = tagText;
        }
        proxy
          .post("/customerFollowRecords/page", {
            pageNum: 1,
            pageSize: 999,
            customerId: route.query.id,
          })
          .then((resRecords) => {
            formData.data.recordsList = resRecords.data.rows;
          });
      });
    }
  });
});
</script>