电子面单前端页面

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,154 +9,338 @@
         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",
+  name: "logistics",
-    data() {
+  data() {
-      return {
+    return {
-        loading: true, // 表单加载状态
+      openModal: true,
-        searchForm: {
+      loading: true, // 表单加载状态
-          // 搜索框初始化对象
+      searchForm: {
-          pageNumber: 1, // 当前页数
+        // 搜索框初始化对象
-          pageSize: 10, // 页面大小
+        pageNumber: 1, // 当前页数
-          sort: "createTime", // 默认排序字段
+        pageSize: 10, // 页面大小
-          order: "desc", // 默认排序方式
+        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: "物流公司",
+          key: "name",
+          minWidth: 120,
+          sortable: false,
         },
-        columns: [
+        {
-          {
+          title: "状态",
-            title: "物流公司",
+          key: "selected",
-            key: "name",
+          minWidth: 120,
-            minWidth: 120,
+          sortable: true,
-            sortable: false,
+          render: (h, params) => {
-          },
+            if (params.row.selected === null || params.row.selected === "") {
-          {
+              return h("div", [h("tag", {props: {color: "volcano"}}, "关闭")]);
-            title: "状态",
+            } else {
-            key: "selected",
+              return h("div", [h("tag", {props: {color: "green"}}, "开启")]);
-            minWidth: 120,
-            sortable: true,
-            render: (h, params) => {
-              if(params.row.selected === null || params.row.selected === ""){
-                return h("div", [h("tag", {props: {color: "volcano"}}, "关闭")]);
-              }else{
-                return h("div", [h("tag", {props: {color: "green"}}, "开启")]);
-              }
             }
-          },
+          }
-          {
+        },
-            title: "操作",
+        {
-            key: "action",
+          title: "操作",
-            align: "center",
+          key: "action",
-            width: 200,
+          align: "center",
-            render: (h, params) => {
+          width: 200,
-              if(params.row.selected === null){
+          render: (h, params) => {
-                return h("div", [
+            if (params.row.selected === null) {
-                  h(
+              return h("div", [
-                    "Button",
+                h(
-                    {
+                  "Button",
-                      props: {
+                  {
-                        type: "success",
+                    props: {
-                        size: "small",
+                      type: "success",
-                      },
+                      size: "small",
-                      style: {
+                    },
-                        marginRight: "5px",
+                    style: {
-                      },
+                      marginRight: "5px",
-                      on: {
+                    },
-                        click: () => {
+                    on: {
-                          this.open(params.row);
+                      click: () => {
-                        },
+                        this.open(params.row);
                       },
                     },
-                    "开启"
+                  },
-                  ),
+                  "开启"
-                ]);
+                ),
-              }else{
+              ]);
-                return h("div", [
+            } else {
-                  h(
+              return h("div", [
-                    "Button",
+                h(
-                    {
+                  "Button",
-                      props: {
+                  {
-                        type: "error",
+                    props: {
-                        size: "small",
+                      type: "error",
-                      },
+                      size: "small",
-                      style: {
+                    },
-                        marginRight: "5px",
+                    style: {
-                      },
+                      marginRight: "5px",
-                      on: {
+                    },
-                        click: () => {
+                    on: {
-                          this.close(params.row);
+                      click: () => {
-                        },
+                        this.close(params.row);
                       },
                     },
-                    "关闭"
+                  },
-                  ),
+                  "关闭"
-                ]);
+                ),
-              }
+                h(
+                  "Button",
+                  {
+                    props: {
+                      type: "info",
+                      size: "small",
+                    },
+                    on: {
+                      click: () => {
+                        this.getFaceSheetInfo(params.row);
+                      },
+                    },
+                  },
+                  "修改"
+                ),
+              ]);
+            }
 
-            },
           },
-        ],
+        },
-        data: [], // 表单数据
+      ],
-      };
+      data: [], // 表单数据
+      onpenText: false,
+    };
+  },
+  methods: {
+    //获取状态
+    getfaceSheetFlag(e) {
+      console.log(e);
+      if (e === true) {
+        console.log("打开");
+        this.onpenText = true;
+      } else {
+        console.log("关闭");
+        this.onpenText = false;
+      }
     },
-    methods: {
+    // 初始化数据
-      // 初始化数据
+    init() {
-      init() {
+      this.getDataList();
-        this.getDataList();
+    },
-      },
+    // 获取数据
-      // 获取数据
+    getDataList() {
-      getDataList() {
+      this.loading = true;
-        this.loading = true;
+      API_Shop.getLogistics().then((res) => {
-        API_Shop.getLogistics().then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result;
-          }
-        });
         this.loading = false;
-      },
+        if (res.success) {
-      // 开启
+          this.data = res.result;
-      open(v) {
+        }
-        this.$Modal.confirm({
+      });
-          title: "确认开启",
+      this.loading = false;
-          // 记得确认修改此处
+    },
-          content: "您确认开启此物流公司?",
+    // 开启
-          loading: true,
+    open(v) {
-          onOk: () => {
+      this.modalTitle = v;
-            API_Shop.logisticsChecked(v.id).then((res) => {
+      this.openModal = true;
-              this.$Modal.remove();
+      this.searchForm.faceSheetFlag = "false"; //开弹框 等于v
-              if (res.success) {
+      if (this.searchForm.faceSheetFlag == "true") {
-                this.$Message.success("物流公司开启成功");
+        this.onpenText = true;
-                this.init();
+      } else {
-              }
+        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) => {
-      close(v){
+          if (res.success) {
-        this.$Modal.confirm({
+            this.$Message.success("修改成功");
-          title: "确认关闭",
+            this.init();
-          content: "您确认关闭此物流公司?",
-          loading: true,
-          onOk: () => {
-            API_Shop.logisticsUnChecked(v.selected).then((res) => {
-              this.$Modal.remove();
-              if (res.success) {
-                this.$Message.success("物流公司关闭成功");
-                this.init();
-              }
-            });
           }
         });
       }
     },
-    mounted() {
+    // 关闭
-      this.init();
+    close(v) {
-    },
+      this.$Modal.confirm({
-  };
+        title: "确认关闭",
+        content: "您确认关闭此物流公司?",
+        loading: true,
+        onOk: () => {
+          API_Shop.logisticsUnChecked(v.selected).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("物流公司关闭成功");
+              this.init();
+            }
+          });
+        }
+      });
+    }
+  },
+  mounted() {
+    this.init();
+  },
+};
 </script>
+
+<style lang="scss" scoped>
+  .faceSheetInput{
+    width: 300px;
+  }
+</style>