detail.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. <template>
  2. <div class="form">
  3. <van-nav-bar :title="$t('customerFile.' + route.query.type)" :left-text="$t('common.back')" left-arrow @click-left="onClickLeft"> </van-nav-bar>
  4. <testForm v-model="formData.data" :formOption="formOption" :formConfig="formConfig"> </testForm>
  5. <testForm v-model="formData.data" :formOption="formOptionTwo" :formConfig="formConfigTwo" @onSubmit="onSubmit"> </testForm>
  6. </div>
  7. </template>
  8. <script setup>
  9. import { ref, getCurrentInstance, onMounted, reactive } from "vue";
  10. import { useRoute } from "vue-router";
  11. import { getUserInfo } from "@/utils/auth";
  12. import testForm from "@/components/testForm/index.vue";
  13. const proxy = getCurrentInstance().proxy;
  14. const onClickLeft = () => history.back();
  15. const route = useRoute();
  16. const customerSource = ref([]);
  17. const customerStatus = ref([]);
  18. const customerTag = ref([]);
  19. const userList = ref([]);
  20. const formData = reactive({
  21. data: {
  22. customerCode: null,
  23. code: null,
  24. countryId: null,
  25. provinceId: null,
  26. cityId: null,
  27. address: null,
  28. zipCode: null,
  29. name: null,
  30. status: null,
  31. source: null,
  32. userId: null,
  33. customerUserList: [],
  34. },
  35. });
  36. const formOption = reactive({
  37. readonly: true, //用于控制整个表单是否只读
  38. disabled: false,
  39. labelAlign: "top",
  40. scroll: true,
  41. labelWidth: "62pk",
  42. hiddenSubmitBtn: true,
  43. btnConfig: {
  44. isNeed: false,
  45. prop: "customerUserList",
  46. plain: true,
  47. listTitle: proxy.t("customerFile.customerContact"),
  48. listConfig: [
  49. {
  50. type: "input",
  51. label: proxy.t("customerFile.contact"),
  52. prop: "name",
  53. },
  54. {
  55. type: "input",
  56. label: proxy.t("customerFile.email"),
  57. prop: "email",
  58. },
  59. ],
  60. },
  61. });
  62. const formConfig = reactive([
  63. {
  64. type: "input",
  65. label: proxy.t("customerFile.customerName"),
  66. prop: "name",
  67. itemType: "text",
  68. },
  69. {
  70. type: "input",
  71. label: proxy.t("customerFile.cityText"),
  72. prop: "cityText",
  73. itemType: "text",
  74. },
  75. {
  76. type: "input",
  77. label: proxy.t("customerFile.address"),
  78. prop: "address",
  79. itemType: "textarea",
  80. },
  81. {
  82. type: "input",
  83. label: "传真",
  84. prop: "fax",
  85. itemType: "text",
  86. },
  87. {
  88. type: "input",
  89. label: proxy.t("customerFile.source"),
  90. prop: "sourceText",
  91. itemType: "text",
  92. },
  93. {
  94. type: "input",
  95. label: proxy.t("customerFile.status"),
  96. prop: "statusText",
  97. itemType: "text",
  98. },
  99. {
  100. type: "input",
  101. label: proxy.t("customerFile.userId"),
  102. prop: "userText",
  103. itemType: "text",
  104. },
  105. {
  106. type: "input",
  107. label: proxy.t("customerFile.tag"),
  108. prop: "tagText",
  109. itemType: "text",
  110. },
  111. {
  112. type: "input",
  113. label: "Beneficiary Name",
  114. prop: "beneficiaryName",
  115. itemType: "text",
  116. },
  117. {
  118. type: "input",
  119. label: "Beneficiary Account Number",
  120. prop: "beneficiaryAccountNumber",
  121. itemType: "text",
  122. },
  123. {
  124. type: "input",
  125. label: "Beneficiary Bank",
  126. prop: "beneficiaryBank",
  127. itemType: "text",
  128. },
  129. {
  130. type: "input",
  131. label: "Swift Code",
  132. prop: "swiftCode",
  133. itemType: "text",
  134. },
  135. {
  136. type: "input",
  137. label: "Beneficiary Bank Address",
  138. prop: "beneficiaryBankAddress",
  139. itemType: "text",
  140. },
  141. {
  142. type: "input",
  143. label: "Beneficiary Address",
  144. prop: "beneficiaryAddress",
  145. itemType: "text",
  146. },
  147. ]);
  148. const formOptionTwo = reactive({
  149. readonly: true, //用于控制整个表单是否只读
  150. disabled: false,
  151. labelAlign: "top",
  152. scroll: true,
  153. labelWidth: "62pk",
  154. hiddenSubmitBtn: true,
  155. submitBtnText: proxy.t("customerFile.followUpRecord"),
  156. btnConfig: {
  157. isNeed: false,
  158. prop: "recordsList",
  159. plain: true,
  160. listTitle: proxy.t("customerFile.content"),
  161. listConfig: [
  162. {
  163. type: "input",
  164. label: proxy.t("customerFile.date"),
  165. prop: "date",
  166. },
  167. {
  168. type: "input",
  169. label: proxy.t("customerFile.customerName1"),
  170. prop: "followUpUserName",
  171. },
  172. {
  173. type: "input",
  174. label: proxy.t("customerFile.content"),
  175. prop: "content",
  176. },
  177. ],
  178. },
  179. });
  180. const formConfigTwo = reactive([]);
  181. const onSubmit = () => {
  182. proxy.$router.push({
  183. path: "customerFileRecords",
  184. query: {
  185. id: route.query.id,
  186. },
  187. });
  188. };
  189. const getUser = () => {
  190. return proxy
  191. .get("/tenantUser/list", {
  192. pageNum: 1,
  193. pageSize: 10000,
  194. tenantId: getUserInfo().tenantId,
  195. })
  196. .then((res) => {
  197. if (res.rows && res.rows.length > 0) {
  198. userList.value = res.rows.map((item) => {
  199. return {
  200. text: item.nickName,
  201. value: item.userId,
  202. };
  203. });
  204. }
  205. });
  206. };
  207. const getSource = () => {
  208. return proxy
  209. .post("/dictTenantData/page", {
  210. pageNum: 1,
  211. pageSize: 999,
  212. tenantId: getUserInfo().tenantId,
  213. dictCode: "customer_source",
  214. })
  215. .then((res) => {
  216. customerSource.value = res.data.rows;
  217. });
  218. };
  219. const getStatus = () => {
  220. return proxy
  221. .post("/dictTenantData/page", {
  222. pageNum: 1,
  223. pageSize: 999,
  224. tenantId: getUserInfo().tenantId,
  225. dictCode: "customer_status",
  226. })
  227. .then((res) => {
  228. customerStatus.value = res.data.rows;
  229. });
  230. };
  231. const getTag = () => {
  232. return proxy
  233. .post("/dictTenantData/page", {
  234. pageNum: 1,
  235. pageSize: 999,
  236. tenantId: getUserInfo().tenantId,
  237. dictCode: "customer_tag",
  238. })
  239. .then((res) => {
  240. customerTag.value = res.data.rows;
  241. });
  242. };
  243. onMounted(() => {
  244. Promise.all([getUser(), getSource(), getStatus(), getTag()]).then(() => {
  245. if (route.query.id) {
  246. proxy.post("/customer/detail", { id: route.query.id }).then((res) => {
  247. formData.data = res.data;
  248. let cityText = "";
  249. if (formData.data.countryName) {
  250. cityText = formData.data.countryName;
  251. if (formData.data.provinceName) {
  252. cityText = cityText + "," + formData.data.provinceName;
  253. if (formData.data.cityName) {
  254. cityText = cityText + "," + formData.data.cityName;
  255. }
  256. }
  257. }
  258. formData.data.cityText = cityText;
  259. let sourceText = "";
  260. if (
  261. formData.data.source &&
  262. customerSource.value &&
  263. customerSource.value.length > 0
  264. ) {
  265. let list = customerSource.value.filter(
  266. (item) => item.dictKey == formData.data.source
  267. );
  268. if (list && list.length > 0) {
  269. sourceText = list[0].dictValue;
  270. }
  271. }
  272. formData.data.sourceText = sourceText;
  273. let statusText = "";
  274. if (
  275. formData.data.status &&
  276. customerStatus.value &&
  277. customerStatus.value.length > 0
  278. ) {
  279. let list = customerStatus.value.filter(
  280. (item) => item.dictKey == formData.data.status
  281. );
  282. if (list && list.length > 0) {
  283. statusText = list[0].dictValue;
  284. }
  285. }
  286. formData.data.statusText = statusText;
  287. let userText = "";
  288. if (
  289. formData.data.userId &&
  290. userList.value &&
  291. userList.value.length > 0
  292. ) {
  293. let list = userList.value.filter(
  294. (item) => item.value == formData.data.userId
  295. );
  296. if (list && list.length > 0) {
  297. userText = list[0].text;
  298. }
  299. }
  300. formData.data.userText = userText;
  301. if (formData.data.tag) {
  302. let tagText = "";
  303. let tags = formData.data.tag.split(",");
  304. if (tags && tags.length > 0) {
  305. for (let i = 0; i < tags.length; i++) {
  306. let list = customerTag.value.filter(
  307. (item) => item.dictKey == tags[i]
  308. );
  309. if (list && list.length > 0) {
  310. if (i === 0) {
  311. tagText = list[0].dictValue;
  312. } else {
  313. tagText = tagText + "," + list[0].dictValue;
  314. }
  315. }
  316. }
  317. }
  318. formData.data.tagText = tagText;
  319. }
  320. proxy
  321. .post("/customerFollowRecords/page", {
  322. pageNum: 1,
  323. pageSize: 999,
  324. customerId: route.query.id,
  325. })
  326. .then((resRecords) => {
  327. formData.data.recordsList = resRecords.data.rows;
  328. });
  329. });
  330. }
  331. });
  332. });
  333. </script>