供应商功能改造

src/views/EHSD/addressBook/freightForwarding/index.vue

@@ -38,11 +38,9 @@
 import { computed, ref } from "vue";
 import byTable from "@/components/byTable/index";
 import byForm from "@/components/byForm/index";
-import useUserStore from "@/store/modules/user";
 import { ElMessage, ElMessageBox } from "element-plus";
 
 const { proxy } = getCurrentInstance();
-const accountCurrency = ref([]);
 const sourceList = ref({
   data: [],
   pagination: {

src/views/purchaseManage/supplier/supplier/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="tenant">
-    <!-- <Banner /> -->
     <div class="content">
       <byTable
         :source="sourceList.data"
@@ -10,7 +9,6 @@
         highlight-current-row
         :selectConfig="selectConfig"
         :table-events="{
-          //element talbe事件都能传
           select: select,
         }"
         :action-list="[
@@ -19,73 +17,34 @@
             action: () => openModal('add'),
           },
         ]"
-        @get-list="getList"
-      >
+        @get-list="getList">
         <template #address="{ item }">
-          <div>
-            {{ item.countryName }}, {{ item.provinceName }} ,
-            {{ item.cityName }}, {{ item.areaDetail }}
-          </div>
+          <div>{{ item.countryName }}, {{ item.provinceName }} , {{ item.cityName }}, {{ item.areaDetail }}</div>
         </template>
       </byTable>
     </div>
-    <el-dialog
-      :title="modalType == 'add' ? '添加供应商' : '编辑供应商'"
-      v-model="dialogVisible"
-      width="800"
-      v-loading="loading"
-      destroy-on-close
-    >
-      <byForm
-        :formConfig="formConfig"
-        :formOption="formOption"
-        v-model="formData.data"
-        :rules="rules"
-        ref="byform"
-      >
+    <el-dialog :title="modalType == 'add' ? '添加供应商' : '编辑供应商'" v-model="dialogVisible" width="600" v-loading="loading" destroy-on-close>
+      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="byform">
         <template #address>
           <el-row :gutter="10" style="width: 100%">
             <el-col :span="8">
               <el-form-item prop="countryId">
-                <el-select
-                  v-model="formData.data.countryId"
-                  placeholder="国家"
-                  @change="(val) => getCityData(val, '20', true)"
-                >
-                  <el-option
-                    v-for="item in countryData"
-                    :label="item.chineseName"
-                    :value="item.id"
-                  >
-                  </el-option>
+                <el-select v-model="formData.data.countryId" placeholder="国家" @change="(val) => getCityData(val, '20', true)">
+                  <el-option v-for="item in countryData" :label="item.chineseName" :value="item.id"> </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item prop="provinceId">
-                <el-select
-                  v-model="formData.data.provinceId"
-                  placeholder="省/洲"
-                  @change="(val) => getCityData(val, '30', true)"
-                >
-                  <el-option
-                    v-for="item in provinceData"
-                    :label="item.name"
-                    :value="item.id"
-                  >
-                  </el-option>
+                <el-select v-model="formData.data.provinceId" placeholder="省/洲" @change="(val) => getCityData(val, '30', true)">
+                  <el-option v-for="item in provinceData" :label="item.name" :value="item.id"> </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item prop="cityId">
                 <el-select v-model="formData.data.cityId" placeholder="城市">
-                  <el-option
-                    v-for="item in cityData"
-                    :label="item.name"
-                    :value="item.id"
-                  >
-                  </el-option>
+                  <el-option v-for="item in cityData" :label="item.name" :value="item.id"> </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
@@ -93,22 +52,16 @@
           <el-row style="margin-top: 20px; width: 100%">
             <el-col :span="24">
               <el-form-item prop="areaDetail">
-                <el-input v-model="formData.data.areaDetail" type="textarea">
-                </el-input>
+                <el-input v-model="formData.data.areaDetail" type="textarea"> </el-input>
               </el-form-item>
             </el-col>
           </el-row>
         </template>
-
         <template #contact>
           <el-row :gutter="10" style="width: 100%">
             <el-col :span="8">
               <el-form-item prop="contactPerson">
-                <el-input
-                  v-model="formData.data.contactPerson"
-                  placeholder="联系人"
-                >
-                </el-input>
+                <el-input v-model="formData.data.contactPerson" placeholder="联系人"> </el-input>
               </el-form-item>
             </el-col>
             <el-col :span="16">
@@ -117,73 +70,55 @@
                   v-model="formData.data.contactNumber"
                   placeholder="联系电话"
                   :formatter="(val) => val.replace(/[^\d\-]/g, '')"
-                  :parser="(val) => val.replace(/[^\d\-]/g, '')"
-                >
+                  :parser="(val) => val.replace(/[^\d\-]/g, '')">
                 </el-input>
               </el-form-item>
             </el-col>
           </el-row>
         </template>
-
+        <template #paymentDays>
+          <el-row :gutter="10" style="width: 100%">
+            <el-col :span="8">
+              <el-form-item prop="accountPeriod">
+                <el-input-number v-model="formData.data.accountPeriod" placeholder="请输入账期 (天)" style="width: 100%" :precision="0" :controls="false" :min="0" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item prop="accountPeriodRemark">
+                <el-input v-model="formData.data.accountPeriodRemark" placeholder="请输入账期说明" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </template>
         <template #fileSlot>
-          <div>
+          <div style="width: 100%">
             <el-upload
               v-model:fileList="fileList"
-              :show-file-list="false"
-              class="upload-demo"
               action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
               :data="uploadData"
-              :on-preview="handlePreview"
-              :on-remove="handleRemove"
-              :on-success="handleSuccess"
-              :before-upload="handleBeforeUpload"
-            >
-              <el-button type="primary">选择</el-button>
+              multiple
+              :before-upload="uploadFile"
+              :on-preview="onPreviewFile">
+              <el-button>选择</el-button>
             </el-upload>
-            <div>
-              <div style="margin-top: 15px">
-                <el-tag
-                  style="margin-right: 10px"
-                  class="ml-2"
-                  type="info"
-                  v-for="(item, index) in fileListCopy"
-                  :key="index"
-                  closable
-                  @close="handleClose(index)"
-                  >{{ item.fileName }}</el-tag
-                >
-              </div>
-            </div>
           </div>
         </template>
       </byForm>
       <template #footer>
         <el-button @click="dialogVisible = false" size="large">取 消</el-button>
-        <el-button
-          type="primary"
-          @click="submitForm('byform')"
-          size="large"
-          :loading="submitLoading"
-        >
-          确 定
-        </el-button>
+        <el-button type="primary" @click="submitForm()" size="large" :loading="submitLoading"> 确 定 </el-button>
       </template>
     </el-dialog>
   </div>
 </template>
-  
+
 <script setup>
 /* eslint-disable vue/no-unused-components */
 import { ElMessage, ElMessageBox } from "element-plus";
 import byTable from "@/components/byTable/index";
 import byForm from "@/components/byForm/index";
-import FileUpload from "@/components/FileUpload/index";
-import { computed, defineComponent, ref } from "vue";
-import { getToken } from "@/utils/auth";
+import { computed, ref } from "vue";
 
-const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传文件服务器地址
-const headers = ref({ Authorization: "Bearer " + getToken() });
-const uploadData = ref({});
 const loading = ref(false);
 const submitLoading = ref(false);
 const sourceList = ref({
@@ -198,18 +133,8 @@ const sourceList = ref({
 });
 let dialogVisible = ref(false);
 let modalType = ref("add");
-let fileList = ref([]);
-let fileListCopy = ref([]);
-
-const checkContactNumber = (rule, val, callback) => {
-  if (val === "") {
-    callback(new Error("请输入联系电话"));
-  } else {
-    val = "aaa";
-  }
-  console.log(rule, val, callback, "213");
-  // @input="(val) => val.replace(/[^\d]/g, '')"
-};
+const fileList = ref([]);
+const uploadData = ref({});
 let rules = ref({
   name: [{ required: true, message: "请输入供应商名称", trigger: "blur" }],
   type: [{ required: true, message: "请选择供应商类型", trigger: "change" }],
@@ -218,10 +143,7 @@ let rules = ref({
   cityId: [{ required: true, message: "请选择城市", trigger: "change" }],
   areaDetail: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
   contactPerson: [{ required: true, message: "请输入联系人", trigger: "blur" }],
-  // contactNumber: [{ validator: checkContactNumber, trigger: "blur" }],
-  contactNumber: [
-    { required: true, message: "请输入联系电话", trigger: "blur" },
-  ],
+  contactNumber: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
 });
 const { proxy } = getCurrentInstance();
 const selectConfig = reactive([
@@ -279,14 +201,12 @@ const config = computed(() => {
         prop: "remark",
       },
     },
-
     {
       attrs: {
         label: "操作",
         width: "200",
         align: "right",
       },
-      // 渲染 el-button，一般用在最后一列。
       renderHTML(row) {
         return [
           {
@@ -308,17 +228,11 @@ const config = computed(() => {
             },
             el: "button",
             click() {
-              // 弹窗提示是否删除
-              ElMessageBox.confirm(
-                "此操作将永久删除该数据, 是否继续?",
-                "提示",
-                {
-                  confirmButtonText: "确定",
-                  cancelButtonText: "取消",
-                  type: "warning",
-                }
-              ).then(() => {
-                // 删除
+              ElMessageBox.confirm("此操作将永久删除该数据, 是否继续?", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+              }).then(() => {
                 proxy
                   .post("/supplierInfo/delete", {
                     id: row.id,
@@ -338,7 +252,6 @@ const config = computed(() => {
     },
   ];
 });
-
 let formData = reactive({
   data: {
     type: "1",
@@ -386,6 +299,11 @@ const formConfig = computed(() => {
     },
     {
       type: "slot",
+      slotName: "paymentDays",
+      label: "账期信息",
+    },
+    {
+      type: "slot",
       slotName: "fileSlot",
       label: "上传附件",
     },
@@ -395,116 +313,122 @@ const formConfig = computed(() => {
       prop: "remark",
       itemType: "textarea",
     },
+    {
+      label: "银行信息",
+    },
+    {
+      type: "input",
+      prop: "openingName",
+      label: "账户名称",
+      itemType: "text",
+    },
+    {
+      type: "input",
+      prop: "openingBank",
+      label: "开户银行",
+      itemType: "text",
+    },
+    {
+      type: "input",
+      prop: "accountOpening",
+      label: "银行账号",
+      itemType: "text",
+    },
+    {
+      type: "input",
+      prop: "interbankNumber",
+      label: "联行号",
+      itemType: "text",
+    },
   ];
 });
 const getList = async (req) => {
   sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
   loading.value = true;
-  proxy
-    .post("/supplierInfo/page", sourceList.value.pagination)
-    .then((message) => {
-      console.log(message);
-      sourceList.value.data = message.rows;
-      sourceList.value.pagination.total = message.total;
-      setTimeout(() => {
-        loading.value = false;
-      }, 200);
-    });
+  proxy.post("/supplierInfo/page", sourceList.value.pagination).then((message) => {
+    console.log(message);
+    sourceList.value.data = message.rows;
+    sourceList.value.pagination.total = message.total;
+    setTimeout(() => {
+      loading.value = false;
+    }, 200);
+  });
 };
 const openModal = () => {
   dialogVisible.value = true;
   modalType.value = "add";
   fileList.value = [];
-  fileListCopy.value = [];
   formData.data = {
     type: "1",
     countryId: "China",
   };
   getCityData(formData.data.countryId, "20");
 };
-
+const uploadFile = async (file) => {
+  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
+  uploadData.value = res.uploadBody;
+  file.id = res.id;
+  file.fileName = res.fileName;
+  file.fileUrl = res.fileUrl;
+  return true;
+};
+const onPreviewFile = (file) => {
+  window.open(file.raw.fileUrl, "_blank");
+};
 const submitForm = () => {
-  byform.value.handleSubmit((valid) => {
-    formData.data.fileList =
-      fileListCopy.value.map((x) => ({
-        id: x.id,
-        fileName: x.fileName,
-      })) || [];
+  byform.value.handleSubmit(() => {
+    if (fileList.value && fileList.value.length > 0) {
+      formData.data.fileList = fileList.value.map((item) => {
+        return {
+          id: item.raw.id,
+          fileName: item.raw.fileName,
+          fileUrl: item.raw.fileUrl,
+        };
+      });
+    }
     submitLoading.value = true;
     proxy.post("/supplierInfo/" + modalType.value, formData.data).then(
-      (res) => {
+      () => {
         ElMessage({
           message: modalType.value == "add" ? "添加成功" : "编辑成功",
           type: "success",
         });
-        fileList.value = [];
         dialogVisible.value = false;
         submitLoading.value = false;
         getList();
       },
       (err) => {
+        console.log(err);
         submitLoading.value = false;
       }
     );
   });
 };
-
 const getDtl = (row) => {
+  fileList.value = [];
   modalType.value = "edit";
   proxy.post("/supplierInfo/detail", { id: row.id }).then((res) => {
-    proxy
-      .post("/fileInfo/getList", { businessIdList: [row.id] })
-      .then((fileObj) => {
-        fileList.value = fileObj[row.id] || [];
-        fileListCopy.value = [...fileList.value];
-        getCityData(res.countryId, "20");
-        getCityData(res.provinceId, "30");
-        res.type = res.type + "";
-        formData.data = res;
-        dialogVisible.value = true;
-      });
-  });
-};
-
-const handleBeforeUpload = async (file) => {
-  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
-  uploadData.value = res.uploadBody;
-  fileListCopy.value.push({
-    id: res.id,
-    fileName: res.fileName,
-    path: res.fileUrl,
-    url: res.fileUrl,
-    uid: file.uid,
-  });
-};
-
-const handleClickFile = (row) => {
-  ElMessage({
-    message: "数据请求中，请稍后！",
-    type: "success",
-  });
-  let id = row.id;
-  proxy.post("/fileInfo/getList", { businessIdList: [id] }).then((res) => {
-    const file = res[id][0];
-    window.open(file.fileUrl, "_blank");
+    proxy.post("/fileInfo/getList", { businessIdList: [row.id] }).then((fileObj) => {
+      if (fileObj[row.id] && fileObj[row.id].length > 0) {
+        fileList.value = fileObj[row.id].map((item) => {
+          return {
+            raw: item,
+            name: item.fileName,
+            url: item.fileUrl,
+          };
+        });
+      }
+      getCityData(res.countryId, "20");
+      getCityData(res.provinceId, "30");
+      res.type = res.type + "";
+      formData.data = res;
+      dialogVisible.value = true;
+    });
   });
 };
-
-const handleClose = (index) => {
-  // if (fileListCopy.value.length === 1) {
-  //   return ElMessage({
-  //     message: "最后一个附件啦！",
-  //     type: "info",
-  //   });
-  // }
-  fileList.value.splice(index, 1);
-  fileListCopy.value.splice(index, 1);
-};
-
 const countryData = ref([]);
 const provinceData = ref([]);
 const cityData = ref([]);
-
 const getCityData = (id, type, isChange) => {
   proxy.post("/areaInfo/list", { parentId: id }).then((res) => {
     if (type === "20") {
@@ -537,9 +461,12 @@ getDict();
 getCityData("0");
 getList();
 </script>
-  
+
 <style lang="scss" scoped>
 .tenant {
   padding: 20px;
 }
-</style>
+::v-deep(.el-input-number .el-input__inner) {
+  text-align: left;
+}
+</style>