index.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. <template>
  2. <div class="pageIndexClass">
  3. <div class="content">
  4. <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" highlight-current-row :action-list="[
  5. {
  6. text: '添加货代公司',
  7. action: () => openModal(),
  8. },
  9. ]" @get-list="getList">
  10. <template #address="{ item }">
  11. <div style="width: 100%">
  12. <span v-if="item.province">{{ item.province }},</span>
  13. <span v-if="item.city">{{ item.city }},</span>
  14. <span v-if="item.address">{{ item.address }}</span>
  15. </div>
  16. </template>
  17. </byTable>
  18. </div>
  19. <el-dialog :title="modalType == 'add' ? '添加货代公司' : '编辑货代公司'" v-if="dialogVisible" v-model="dialogVisible" width="700" v-loading="loadingDialog">
  20. <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit"> </byForm>
  21. <template #footer>
  22. <el-button @click="dialogVisible = false" size="default">取 消</el-button>
  23. <el-button type="primary" @click="submitForm()" size="default">确 定</el-button>
  24. </template>
  25. </el-dialog>
  26. </div>
  27. </template>
  28. <script setup>
  29. import { computed, ref } from "vue";
  30. import byTable from "@/components/byTable/index";
  31. import byForm from "@/components/byForm/index";
  32. import { ElMessage, ElMessageBox } from "element-plus";
  33. const { proxy } = getCurrentInstance();
  34. const sourceList = ref({
  35. data: [],
  36. pagination: {
  37. total: 0,
  38. pageNum: 1,
  39. pageSize: 10,
  40. keyword: "",
  41. },
  42. });
  43. const loading = ref(false);
  44. const config = computed(() => {
  45. return [
  46. {
  47. attrs: {
  48. label: "公司名称",
  49. prop: "companyName",
  50. },
  51. },
  52. {
  53. attrs: {
  54. label: "地址",
  55. slot: "address",
  56. },
  57. },
  58. {
  59. attrs: {
  60. label: "公司电话",
  61. prop: "companyTel",
  62. },
  63. },
  64. {
  65. attrs: {
  66. label: "联系人",
  67. prop: "personName",
  68. },
  69. },
  70. {
  71. attrs: {
  72. label: "联系人电话",
  73. prop: "personTel",
  74. },
  75. },
  76. {
  77. attrs: {
  78. label: "操作",
  79. width: 120,
  80. align: "center",
  81. },
  82. renderHTML(row) {
  83. return [
  84. {
  85. attrs: {
  86. label: "修改",
  87. type: "primary",
  88. text: true,
  89. },
  90. el: "button",
  91. click() {
  92. update(row);
  93. },
  94. },
  95. {
  96. attrs: {
  97. label: "删除",
  98. type: "primary",
  99. text: true,
  100. },
  101. el: "button",
  102. click() {
  103. ElMessageBox.confirm(
  104. "此操作将永久删除该数据, 是否继续?",
  105. "提示",
  106. {
  107. confirmButtonText: "确定",
  108. cancelButtonText: "取消",
  109. type: "warning",
  110. }
  111. ).then(() => {
  112. proxy
  113. .post("/freightForwarder/delete", {
  114. id: row.id,
  115. })
  116. .then(() => {
  117. ElMessage({
  118. message: "删除成功",
  119. type: "success",
  120. });
  121. getList();
  122. });
  123. });
  124. },
  125. },
  126. ];
  127. },
  128. },
  129. ];
  130. });
  131. const getList = async (req) => {
  132. sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  133. loading.value = true;
  134. proxy
  135. .post("/freightForwarder/page", sourceList.value.pagination)
  136. .then((res) => {
  137. sourceList.value.data = res.rows;
  138. sourceList.value.pagination.total = res.total;
  139. setTimeout(() => {
  140. loading.value = false;
  141. }, 200);
  142. });
  143. };
  144. getList();
  145. const modalType = ref("add");
  146. const dialogVisible = ref(false);
  147. const loadingDialog = ref(false);
  148. const submit = ref(null);
  149. const formOption = reactive({
  150. inline: true,
  151. labelWidth: 100,
  152. itemWidth: 100,
  153. rules: [],
  154. });
  155. const formConfig = computed(() => {
  156. return [
  157. {
  158. type: "title",
  159. title: "基本信息",
  160. label: "",
  161. },
  162. {
  163. type: "input",
  164. prop: "companyName",
  165. label: "公司名称",
  166. itemWidth: 50,
  167. itemType: "text",
  168. },
  169. {
  170. type: "input",
  171. prop: "companyTel",
  172. label: "公司电话",
  173. itemWidth: 50,
  174. itemType: "text",
  175. },
  176. {
  177. type: "input",
  178. prop: "province",
  179. label: "省会",
  180. itemWidth: 50,
  181. itemType: "text",
  182. },
  183. {
  184. type: "input",
  185. prop: "city",
  186. label: "城市",
  187. itemWidth: 50,
  188. itemType: "text",
  189. },
  190. {
  191. type: "input",
  192. prop: "address",
  193. label: "地址",
  194. itemType: "text",
  195. },
  196. {
  197. type: "title",
  198. title: "联系人信息",
  199. label: "",
  200. },
  201. {
  202. type: "input",
  203. prop: "personName",
  204. label: "姓名",
  205. itemWidth: 33,
  206. itemType: "text",
  207. },
  208. {
  209. type: "input",
  210. prop: "personTel",
  211. label: "电话",
  212. itemWidth: 33,
  213. itemType: "text",
  214. },
  215. {
  216. type: "input",
  217. prop: "personMail",
  218. label: "邮箱",
  219. itemWidth: 34,
  220. itemType: "text",
  221. },
  222. {
  223. type: "title",
  224. title: "银行账户信息",
  225. label: "",
  226. },
  227. {
  228. type: "input",
  229. prop: "bankName",
  230. label: "银行",
  231. itemWidth: 50,
  232. itemType: "text",
  233. },
  234. {
  235. type: "input",
  236. prop: "bankAccountName",
  237. label: "账户名",
  238. itemWidth: 50,
  239. itemType: "text",
  240. },
  241. {
  242. type: "input",
  243. prop: "bankAccount",
  244. label: "账号",
  245. itemWidth: 50,
  246. itemType: "text",
  247. },
  248. ];
  249. });
  250. const rules = ref({
  251. companyName: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
  252. });
  253. const formData = reactive({
  254. data: {},
  255. });
  256. const openModal = () => {
  257. modalType.value = "add";
  258. formData.data = {};
  259. loadingDialog.value = false;
  260. dialogVisible.value = true;
  261. };
  262. const submitForm = () => {
  263. submit.value.handleSubmit(() => {
  264. loadingDialog.value = true;
  265. proxy.post("/freightForwarder/" + modalType.value, formData.data).then(
  266. () => {
  267. ElMessage({
  268. message: modalType.value == "add" ? "添加成功" : "编辑成功",
  269. type: "success",
  270. });
  271. dialogVisible.value = false;
  272. getList();
  273. },
  274. (err) => {
  275. console.log(err);
  276. loadingDialog.value = false;
  277. }
  278. );
  279. });
  280. };
  281. const update = (row) => {
  282. modalType.value = "edit";
  283. loadingDialog.value = true;
  284. proxy.post("/freightForwarder/detail", { id: row.id }).then((res) => {
  285. formData.data = res;
  286. loadingDialog.value = false;
  287. });
  288. dialogVisible.value = true;
  289. };
  290. </script>
  291. <style lang="scss" scoped>
  292. .tenant {
  293. padding: 20px;
  294. }
  295. ::v-deep(.el-input-number .el-input__inner) {
  296. text-align: left;
  297. }
  298. </style>