电子面单前端页面

manager/src/views/sys/setting-manage/setting/KUAIDI_SETTING.vue

@@ -10,6 +10,9 @@
       <FormItem label="reqURL" prop="reqURL">
         <Input v-model="formValidate.reqURL" />
       </FormItem>
+      <FormItem label="电子面单URL" prop="sheetReqURL">
+        <Input v-model="formValidate.sheetReqURL" />
+      </FormItem>
       <div class="label-btns">
         <Button type="primary" @click="submit('formValidate')">保存</Button>
 
@@ -24,7 +27,7 @@ export default {
   data() {
     return {
       ruleValidate: {}, // 验证规则
-      formValidate: { ebusinessID: "", reqURL: "", appKey: "" }, // 表单数据
+      formValidate: { ebusinessID: "", reqURL: "", appKey: "" ,sheetReqURL: "" ,}, // 表单数据
     };
   },
   props: ["res",'type'],

seller/src/api/shops.js

@@ -41,6 +41,10 @@ export const getBillDetail = (id, params) => {
 export const getLogistics = (id, params) => {
   return getRequest(`/other/logistics`, params)
 }
+//返回信息
+export const getIsCheck =(logisticsId) =>{
+  return getRequest(`other/logistics/${logisticsId}/getStoreLogistics`)
+}
 
 // 开启物流公司
 export const logisticsChecked = (id, params) => {
@@ -117,4 +121,9 @@ export const editShipTemplate = (id, params, headers) => {
   return putRequest(`/setting/freightTemplate/${id}`, params, headers)
 }
 
+//修改电子面单等信息
+export const editChecked = (logisticsId,params) => {
+  return putRequest(`/other/logistics/${logisticsId}/updateStoreLogistics`,params)
+}
+
 

seller/src/views/shop/ship/logistics.vue

@@ -9,16 +9,93 @@
         ref="table"
       ></Table>
     </Card>
+    <Modal v-model="openModal" :title="openModalTitle" @on-ok="submit">
+      <h3 style="color: #ff3c2a; margin-bottom: 10px">是否需要电子面单</h3>
+      <RadioGroup
+        v-model="faceSheetForm.faceSheetFlag"
+        style="margin-bottom: 20px"
+        @on-change="getfaceSheetFlag($event)"
+      >
+        <Radio :label="true">
+          <span>需要</span>
+        </Radio>
+        <Radio :label="false">
+          <span>不需要</span>
+        </Radio>
+      </RadioGroup>
+      <Card v-if="onpenText" class="modalStyle">
+        <h3 style="color: #ff3c2a; margin-bottom: 10px">请输入详细信息</h3>
+        <Form ref="formValidate" :label-width="150" label-position="right" :model="faceSheetForm" :rules="ruleValidate">
+          <FormItem label="customerName" prop="customerName">
+            <Input
+              v-model="faceSheetForm.customerName"
+              type="text"
+              class="faceSheetInput"
+            ></Input
+            ></FormItem>
+          <FormItem label="customerPwd" prop="customerPwd">
+            <Input
+              v-model="faceSheetForm.customerPwd"
+              type="text"
+              class="faceSheetInput"
+            ></Input>
+          </FormItem>
+          <FormItem label="customerPwd" prop="monthCode">
+            <Input
+              v-model="faceSheetForm.monthCode"
+              type="text"
+              class="faceSheetInput"
+            ></Input
+            ></FormItem>
+          <FormItem label="customerPwd" prop="sendSite">
+            <Input
+              v-model="faceSheetForm.sendSite"
+              type="text"
+              class="faceSheetInput"
+            ></Input
+            ></FormItem>
+          <FormItem label="customerPwd" prop="sendStaff">
+            <Input
+              v-model="faceSheetForm.sendStaff"
+              type="text"
+              class="faceSheetInput"
+            ></Input
+            ></FormItem>
+          <FormItem label="支付方式" prop="payType">
+            <Select
+              v-model="faceSheetForm.payType"
+              class="faceSheetInput">
+              <Option value="1">现付</Option>
+              <Option value="2">到付</Option>
+              <Option value="3">月结</Option>
+              <Option value="4">第三方支付(仅SF支持)</Option>
+            </Select
+            ></FormItem>
+          <FormItem label="快递类型" prop="expType">
+            <Input
+              v-model="faceSheetForm.expType"
+              type="text"
+              class="faceSheetInput"/>
+          </FormItem>
+          <div style="width:100%;text-align:center;">
+            <a style="padding-right: 20px" @click="frontDownload('use')">使用说明</a>
+            <a @click="frontDownload('type')">快递类型</a>
+          </div>
+        </Form>
+      </Card>
+      <br/>
+    </Modal>
   </div>
 </template>
 
 <script>
-  import * as API_Shop from "@/api/shops";
+import * as API_Shop from "@/api/shops";
 
-  export default {
+export default {
   name: "logistics",
   data() {
     return {
+      openModal: true,
       loading: true, // 表单加载状态
       searchForm: {
         // 搜索框初始化对象
@@ -27,6 +104,27 @@
         sort: "createTime", // 默认排序字段
         order: "desc", // 默认排序方式
       },
+      openModalTitle: '开启信息',
+      ruleValidate: {
+        customerName: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
+        payType: [{ required: true, message: "请填写必填项" ,trigger: "change" }],
+        expType: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
+        customerPwd: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
+        monthCode: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
+        sendSite: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
+        sendStaff: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
+
+      },
+      faceSheetForm: {
+        faceSheetFlag: false,
+        customerName: "",
+        payType: '1',
+        expType: '1',
+        customerPwd: "",
+        monthCode: "",
+        sendSite: "",
+        sendStaff: "",
+      },
       columns: [
         {
           title: "物流公司",
@@ -40,9 +138,9 @@
           minWidth: 120,
           sortable: true,
           render: (h, params) => {
-              if(params.row.selected === null || params.row.selected === ""){
+            if (params.row.selected === null || params.row.selected === "") {
               return h("div", [h("tag", {props: {color: "volcano"}}, "关闭")]);
-              }else{
+            } else {
               return h("div", [h("tag", {props: {color: "green"}}, "开启")]);
             }
           }
@@ -53,7 +151,7 @@
           align: "center",
           width: 200,
           render: (h, params) => {
-              if(params.row.selected === null){
+            if (params.row.selected === null) {
               return h("div", [
                 h(
                   "Button",
@@ -74,7 +172,7 @@
                   "开启"
                 ),
               ]);
-              }else{
+            } else {
               return h("div", [
                 h(
                   "Button",
@@ -94,6 +192,21 @@
                   },
                   "关闭"
                 ),
+                h(
+                  "Button",
+                  {
+                    props: {
+                      type: "info",
+                      size: "small",
+                    },
+                    on: {
+                      click: () => {
+                        this.getFaceSheetInfo(params.row);
+                      },
+                    },
+                  },
+                  "修改"
+                ),
               ]);
             }
 
@@ -101,9 +214,21 @@
         },
       ],
       data: [], // 表单数据
+      onpenText: false,
     };
   },
   methods: {
+    //获取状态
+    getfaceSheetFlag(e) {
+      console.log(e);
+      if (e === true) {
+        console.log("打开");
+        this.onpenText = true;
+      } else {
+        console.log("关闭");
+        this.onpenText = false;
+      }
+    },
     // 初始化数据
     init() {
       this.getDataList();
@@ -121,24 +246,77 @@
     },
     // 开启
     open(v) {
-        this.$Modal.confirm({
+      this.modalTitle = v;
-          title: "确认开启",
+      this.openModal = true;
-          // 记得确认修改此处
+      this.searchForm.faceSheetFlag = "false"; //开弹框 等于v
-          content: "您确认开启此物流公司?",
+      if (this.searchForm.faceSheetFlag == "true") {
-          loading: true,
+        this.onpenText = true;
-          onOk: () => {
+      } else {
-            API_Shop.logisticsChecked(v.id).then((res) => {
+        this.onpenText = false;
+      }
+    },
+    //修改
+    getFaceSheetInfo(v) {
+      this.logisticsId = v.logisticsId;
+      this.openModalTitle = '修改信息';
+      API_Shop.getIsCheck(this.logisticsId).then((res) => {
+        if (res.success) {
+          // this.searchForm = res.result.recordes;
+          this.faceSheetForm.faceSheetFlag = String(res.result.faceSheetFlag); //开弹框 等于v
+          if (this.faceSheetForm.faceSheetFlag == "true") {
+            this.onpenText = true;
+          } else {
+            this.onpenText = false;
+          }
+          this.faceSheetForm.customerName = res.result.customerName;
+          this.faceSheetForm.customerPwd = res.result.customerPwd;
+          this.faceSheetForm.monthCode = res.result.monthCode;
+          this.faceSheetForm.sendSite = res.result.sendSite;
+          this.faceSheetForm.sendStaff = res.result.sendStaff;
+        }
+      });
+    },
+    frontDownload(val) {
+      var a = document.createElement("a"); //创建一个<a></a>标签
+      //根据点击按钮来下载不同文件
+      if (val === 'use') {
+        a.href = "static/open.xlsx"; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
+        a.download = "使用说明.xlsx"; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
+      } else if (val === 'type') {
+        a.href = "static/logisticsType.xlsx"; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
+        a.download = "快递类型.xlsx"; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
+      }
+      a.style.display = "none"; // 障眼法藏起来a标签
+      document.body.appendChild(a); // 将a标签追加到文档对象中
+      a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
+      a.remove(); // 一次性的，用完就删除a标签
+    },
+
+    submit() {
+      if (v.selected === null || v.selected === "") {
+
+        API_Shop.logisticsChecked(
+          this.modalTitle.logisticsId,
+          this.faceSheetForm
+        ).then((res) => {
+          this.openModal = false;
           this.$Modal.remove();
           if (res.success) {
             this.$Message.success("物流公司开启成功");
             this.init();
           }
         });
+      } else {
+        API_Shop.editChecked(this.logisticsId, this.faceSheetForm).then((res) => {
+          if (res.success) {
+            this.$Message.success("修改成功");
+            this.init();
           }
         });
+      }
     },
     // 关闭
-      close(v){
+    close(v) {
       this.$Modal.confirm({
         title: "确认关闭",
         content: "您确认关闭此物流公司?",
@@ -158,5 +336,11 @@
   mounted() {
     this.init();
   },
-  };
+};
 </script>
+
+<style lang="scss" scoped>
+  .faceSheetInput{
+    width: 300px;
+  }
+</style>