no message

src/api/material-system/common.js

@@ -1,5 +1,7 @@
 import request from '@/utils/request'
 
+// ------------------------------
+
 // 后台计算值
 export function computeVal(params) {
   return request({
@@ -51,12 +53,3 @@ export function closeCode(params) {
     params
   })
 }
-
-// 查询支付情况
-export function queryPayStatus(params) {
-  return request({
-    url: '/shop/sale/query/pay/status',
-    method: 'get',
-    params
-  })
-}

src/api/material-system/website/website-parts-shop-sales.js

@@ -0,0 +1,134 @@
+import request, { postBlob, handleImport } from '@/utils/request'
+
+export function partsPartssalesorderSalesOrderList(data) {
+  return request({
+    url: `/parts/sales/order/list?moduleId=${data.moduleId}`,
+    method: 'post',
+    data
+  })
+}
+
+export function partsPartssalesorderSalesOrderExport(data, name) {
+  return postBlob({
+    url: '/parts/sales/order/list/export',
+    data,
+    name
+  })
+}
+
+// -------------------------------------------
+
+export function partsPartssalesorderSalesOrderAdd(data) {
+  return request({
+    url: `/parts/sales/order/add`,
+    method: 'post',
+    data
+  })
+}
+
+export function partsPartssalesorderSalesOrderEdit(data) {
+  return request({
+    url: `/parts/sales/order/update`,
+    method: 'post',
+    data
+  })
+}
+
+export function partsPartssalesorderCode(params) {
+  return request({
+    url: `/parts/sales/order/code`,
+    method: 'post',
+    params
+  })
+}
+
+export function partsPartssalesorderSalesOrderDetail(params) {
+  return request({
+    url: `/parts/sales/order/loadSalesOrderById`,
+    method: 'post',
+    params
+  })
+}
+
+export function partsPartssalesorderSubmit(params) {
+  return request({
+    url: `/parts/sales/order/submit`,
+    method: 'post',
+    params
+  })
+}
+
+export function partsPartssalesorderConfirmDelivery(params) {
+  return request({
+    url: `/parts/sales/order/confirm/delivery`,
+    method: 'post',
+    params
+  })
+}
+
+export function partsPartssalesorderDeleteById(params) {
+  return request({
+    url: `/parts/sales/order/deleteById`,
+    method: 'post',
+    params
+  })
+}
+
+export function partsPartssalesorderBackToSave(params) {
+  return request({
+    url: `/parts/sales/order/backToSave`,
+    method: 'post',
+    params
+  })
+}
+
+export function partsPartssalesorderQueryPartsNewQty(params) {
+  return request({
+    url: `/parts/sales/order/query/parts/new/qty`,
+    method: 'post',
+    params
+  })
+}
+
+export function partsPartssalesorderCancel(params) {
+  return request({
+    url: `/parts/sales/order/cancel`,
+    method: 'post',
+    params
+  })
+}
+
+export function partsPartssalesorderChangeCash(params) {
+  return request({
+    url: `/parts/sales/order/change-cash`,
+    method: 'post',
+    params
+  })
+}
+
+// -------------------------------------------
+
+export function partsPartssalesorderSalesOrderShopList(data) {
+  return request({
+    url: `/parts/sales/order/websit/list?moduleId=${data.moduleId}`,
+    method: 'post',
+    data
+  })
+}
+
+export function partsPartssalesorderSalesOrderShopExport(data, name) {
+  return postBlob({
+    url: '/parts/sales/order/websit/list/export',
+    data,
+    name
+  })
+}
+
+// 查询支付情况
+export function queryPayStatus(params) {
+  return request({
+    url: '/parts/sales/order/query/pay/status',
+    method: 'get',
+    params
+  })
+}

src/components/payTemplate/applicationNewRepairParts.js

@@ -0,0 +1,118 @@
+import { changeNumMoneyToChinese, thousands } from '@/utils/util'
+export default function (data) {
+  // 金额合计
+  var je = [
+    ...(data.itemList || []).map((item, index) => {
+      return item.totalAmount || 0
+    }),
+    0
+  ].reduce((a, b) => {
+    return a + b
+  })
+  return `<style lang="css">
+    #new-repair-parts-listing {
+      width: 100%;
+      height: auto;
+      border: 1px solid #000;
+      box-sizing: border-box;
+      padding: 20px;
+    }
+    #new-repair-parts-listing table {
+      border: 1px solid #aaa;
+    }
+    #new-repair-parts-listing th,
+    #new-repair-parts-listing td {
+      height: 30px;
+      border: 1px solid #aaa;
+    }
+    .new-repair-parts-title {
+      text-align: center;
+      font-weight: bold;
+    }
+    .new-repair-parts-info {
+      width: 100%;
+      height: auto;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+    }
+  </style>
+  <div id="new-repair-parts-listing">
+    <h3 class="new-repair-parts-title">维修配件新件申请开单表</h3>
+    <div class="new-repair-parts-info">
+      <div>
+        <p>发货单位：${data.deliveryUnit || ''}</p>
+        <p>领入单位：${data.receiveUnit || ''}</p>
+      </div>
+      <div>
+        <p>凭证单号：${data.salesOrderNo || ''}</p>
+        <p>经办日期：${data.examineTime || ''}</p>
+        <p>打印日期：${new Date().Format('yyyy-MM-dd hh:mm:ss')}</p>
+      </div>
+    </div>
+    <table border="1" cellspacing="0" width="100%">
+      <tr>
+        <th width="100">序号</th>
+        <th width="200">配件编码</th>
+        <th width="300">配件名称</th>
+        <th width="100">单位</th>
+        <th width="150">单价</th>
+        <th width="100">数量</th>
+        <th width="200">金额</th>
+      </tr>
+      ${(data.itemList || []).map((item, index) => {
+        return `
+        <tr>
+          <td>${index + 1}</td>
+          <td>${item.partsNumber || ''}</td>
+          <td>${item.partsName || ''}</td>
+          <td>${item.unitName || ''}</td>
+          <td>${item.salesPrice || ''}</td>
+          <td>${item.quantity || ''}</td>
+          <td>${item.totalAmount || ''}</td>
+        </tr>`
+      })}
+      <tr>
+        <td colspan="4" align="center">合计(人民币)：${changeNumMoneyToChinese(je)}</td>
+        <td colspan="3" align="center">小写：${thousands(je)}</td>
+      </tr>
+    </table>
+    <br />
+    <table border="1" cellspacing="0" width="100%">
+      <tr>
+        <th width="140">配件编码</th>
+        <th width="100">是否备用件</th>
+        <th width="140">保内/保外</th>
+        <th width="140">总部信息编号</th>
+        <th width="200">广佛信息编号</th>
+        <th width="100">用户姓名</th>
+        <th width="140">联系电话</th>
+        <th width="100">数量</th>
+      </tr>
+      ${(data.oldRefundManageRecordBeanList || []).map((item, index) => {
+        return `
+        <tr>
+          <td>${item.partsNumber || ''}</td>
+          <td>${item.isBackupName || ''}</td>
+          <td>${item.repairFlagName || ''}</td>
+          <td>${item.pgId || ''}</td>
+          <td>${item.workerOrderNo || ''}</td>
+          <td>${item.customerName || ''}</td>
+          <td>${item.customerTel || ''}</td>
+          <td>${item.qty || ''}</td>
+        </tr>`
+      })}
+    </table>
+    <div class="new-repair-parts-info">
+      <div style="width:50%">
+        <p>开单单位经办人：</p>
+        <p>开单单位公章：</p>
+      </div>
+      <div style="width:50%">
+        <p>接收单位经办人：</p>
+        <p>接收单位公章：</p>
+      </div>
+    </div>
+  </div>`
+}

src/views/partsManagement/accessoryWebsite/website-parts-shop-sales-manage/website-parts-shop-sales/components/pay-popup-window.vue

@@ -0,0 +1,245 @@
+<template>
+  <el-dialog
+    title="配件申请购买费用支付"
+    :visible.sync="dialogVisible"
+    :before-close="handleClose"
+    :append-to-body="true"
+    :destroy-on-close="true"
+    width="1050px"
+  >
+    <div>
+      <el-descriptions>
+        <el-descriptions-item label="支付单号">{{ data.outTradeNo }}</el-descriptions-item>
+        <el-descriptions-item label="配件费用">￥{{ data.payValue }}</el-descriptions-item>
+        <el-descriptions-item label="收款方">{{ data.subMchNo || data.mchNo || '' }}</el-descriptions-item>
+        <el-descriptions-item label="支付方式">
+          <el-radio v-model="radio" label="wx">微信支付</el-radio>
+          <el-radio v-model="radio" label="xj">现金支付</el-radio>
+        </el-descriptions-item>
+        <el-descriptions-item v-if="data.payFlag === 0 && data.payType === 4 && radio === 'wx'" label="支付商户">
+          <el-select style="width: 220px" v-model="payConfigId" size="small" clearable placeholder="请选择支付商户">
+            <el-option
+              v-for="item in payConfigs"
+              :key="item.id"
+              :label="item.name + ' | ' + item.mchNo"
+              :value="item.id"
+            />
+          </el-select>
+        </el-descriptions-item>
+      </el-descriptions>
+      <br />
+      <div class="pay-img-info" v-if="radio === 'wx'">
+        <div class="qr-code-view">
+          <p>微信支付</p>
+          <div v-if="showPayQRCode" ref="payQRCode" style="display: flex; justify-content: center" />
+          <p>{{ data.payValue }}￥</p>
+        </div>
+        <p style="text-align: center" v-if="radio === 'wx'">
+          {{ data.codeUrl }}
+        </p>
+        <p style="text-align: center" v-if="radio === 'wx'">支付失效时间：{{ data.timeExpire }}</p>
+      </div>
+      <div style="text-align: center" v-if="radio === 'xj'">
+        <el-button size="small" type="info" @click="handleClose">未收款</el-button>
+        <el-button size="small" type="primary" @click="yjsqxj">已收取现金</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import {
+  partsPartssalesorderCode,
+  partsPartssalesorderChangeCash,
+  queryPayStatus
+} from '@/api/material-system/website/website-parts-shop-sales'
+import { adminWebsitPayConfigList } from '@/api/common.js'
+import QRCode from 'qrcodejs2'
+export default {
+  props: {
+    item: {
+      type: Object
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      radio: 'wx',
+      dialogVisible: this.visible,
+      data: {},
+      bool: true,
+      payConfigs: [],
+      payConfigId: '',
+      showPayQRCode: true
+    }
+  },
+  watch: {
+    visible(newVal) {
+      this.dialogVisible = newVal
+      if (newVal) {
+        this.$nextTick(() => {
+          if (this.item.websitId) {
+            adminWebsitPayConfigList({
+              status: true,
+              websitId: this.item.websitId,
+              category: 'P'
+            }).then(res => {
+              this.payConfigs = res.data
+              if (this.payConfigs.length > 0) {
+                this.payConfigId = this.payConfigs[0].id
+              }
+            })
+          }
+        })
+      }
+    },
+    payConfigId() {
+      this.showPayQRCode = false
+      if (this.payConfigId && this.visible && this.item) {
+        partsPartssalesorderCode({
+          id: this.item.id,
+          payConfigId: this.payConfigId
+        })
+          .then(res => {
+            this.data = res.data
+            this.setqr()
+          })
+          .catch(err => {})
+      } else if (this.timeId) {
+        clearTimeout(this.timeId)
+      }
+    },
+    radio() {
+      this.showPayQRCode = false
+      this.setqr()
+    },
+    dialogVisible() {
+      if (!this.dialogVisible) {
+        if (this.timeId) {
+          clearTimeout(this.timeId)
+        }
+        this.data = {}
+        this.payConfigId = ''
+      }
+    }
+  },
+  methods: {
+    handleClose(done) {
+      this.$emit('setVisible', false)
+    },
+    setqr() {
+      if (this.radio === 'wx') {
+        this.showPayQRCode = true
+        this.$nextTick(() => {
+          this.queryOrder()
+          new QRCode(this.$refs.payQRCode, {
+            text: this.data.codeUrl,
+            width: 160,
+            height: 160,
+            colorDark: '#333333',
+            colorLight: '#ffffff',
+            correctLevel: QRCode.CorrectLevel.L
+          })
+        })
+      } else if (this.timeId) {
+        clearTimeout(this.timeId)
+      }
+    },
+    queryOrder() {
+      if (this.data.websitId && this.data.id && this.data.outTradeNo) {
+        const params = {
+          websitId: this.data.websitId,
+          id: this.data.id,
+          outTradeNo: this.data.outTradeNo
+        }
+        queryPayStatus(params).then(res => {
+          if (res && res.data.payStatus === 3 && res.data.payFlag === 1) {
+            this.$emit('setVisible', false)
+            this.$emit('success')
+            if (this.bool) {
+              this.bool = false
+              this.$message({
+                type: 'success',
+                message: `支付成功!`
+              })
+            }
+          } else {
+            this.timeId = setTimeout(() => {
+              this.queryOrder()
+            }, 1000)
+          }
+        })
+      }
+    },
+    yjsqxj() {
+      partsPartssalesorderChangeCash({
+        id: this.item.id
+      }).then(res => {
+        this.$emit('setVisible', false)
+        this.$emit('success')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#new-repair-parts-listing {
+  width: 100%;
+  height: 500px;
+  border: 1px solid #000;
+  box-sizing: border-box;
+  padding: 20px;
+}
+#new-repair-parts-listing table {
+  border: 1px solid #aaa;
+}
+#new-repair-parts-listing th,
+#new-repair-parts-listing td {
+  height: 30px;
+  border: 1px solid #aaa;
+}
+.new-repair-parts-title {
+  text-align: center;
+  font-weight: bold;
+}
+.new-repair-parts-info {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: bold;
+}
+.pay-img-info {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  .qr-code-view {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    background: limegreen;
+    width: 240px;
+    height: 240px;
+    p {
+      margin: 0;
+      color: #fff;
+    }
+  }
+  p {
+    width: 100%;
+    height: 30px;
+    text-align: center;
+    line-height: 30px;
+  }
+}
+</style>

src/views/partsManagement/accessoryWebsite/website-parts-shop-sales-manage/website-parts-shop-sales/components/website-parts-shop-sales-information.vue

@@ -0,0 +1,938 @@
+<template>
+  <div class="website-parts-shop-sales">
+    <div class="website-parts-shop-sales-sl">
+      <el-page-header @back="goBack" content="销售单信息"></el-page-header>
+      <br />
+      <div style="margin-bottom: -1px">
+        <div style="display: flex">
+          <div style="width: 50%; margin-right: -1px">
+            <el-descriptions :column="2" size="small" border labelClassName="labelClassName">
+              <el-descriptions-item>
+                <template slot="label"> 销售类型 </template>
+                <div style="width: 100%; height: 32px; display: flex; align-items: center">
+                  <span v-if="disabled">
+                    <el-input
+                      :disabled="disabled"
+                      size="small"
+                      :value="{ WORKER: '师傅', CUSTOMER: '外部客户' }[form.buyPeople] || ''"
+                    ></el-input>
+                  </span>
+                  <template v-else>
+                    <el-radio v-model="form.buyPeople" label="CUSTOMER">外部客户</el-radio>
+                    <el-radio v-model="form.buyPeople" label="WORKER">师傅</el-radio>
+                  </template>
+                </div>
+              </el-descriptions-item>
+              <el-descriptions-item>
+                <template slot="label">
+                  {{ { WORKER: '申请服务人员', CUSTOMER: '申请人' }[form.buyPeople] || '申请人' }}
+                </template>
+                <div>
+                  <el-select
+                    v-if="form.buyPeople === 'WORKER'"
+                    v-model="form.workerId"
+                    size="small"
+                    :disabled="disabled"
+                    filterable
+                    :loading="searchLoading"
+                    placeholder="师傅"
+                    style="width: 100%"
+                    @change="changeWorkerInfo"
+                  >
+                    <el-option
+                      v-for="item in workerList"
+                      :key="item.workerId"
+                      :label="item.nickName + '-' + item.mobile"
+                      :value="item.workerId"
+                    >
+                    </el-option>
+                  </el-select>
+                  <el-input v-if="form.buyPeople === 'CUSTOMER'" disabled size="small" value="外部客户"></el-input>
+                </div>
+              </el-descriptions-item>
+              <el-descriptions-item>
+                <template slot="label"> 申请类型 </template>
+                <div>
+                  <el-select
+                    placeholder=""
+                    :disabled="disabled"
+                    size="small"
+                    v-model="form.applyType"
+                    style="width: 100%"
+                  >
+                    <el-option label="普通申请" :value="0"> </el-option>
+                    <el-option label="急件申请" :value="1"> </el-option>
+                    <el-option label="备件申请" :value="2"> </el-option>
+                  </el-select>
+                </div>
+              </el-descriptions-item>
+              <el-descriptions-item>
+                <template slot="label"> 发货方式 </template>
+                <div style="width: 100%; height: 32px; display: flex; align-items: center">
+                  <span v-if="disabled">
+                    <el-input
+                      :disabled="disabled"
+                      size="small"
+                      :value="['快递', '自提'][form.deliveryType] || ''"
+                    ></el-input>
+                  </span>
+                  <template v-else>
+                    <el-radio v-model="form.deliveryType" :label="0">快递</el-radio>
+                    <el-radio v-model="form.deliveryType" :label="1">自提</el-radio>
+                  </template>
+                </div>
+              </el-descriptions-item>
+            </el-descriptions>
+          </div>
+          <div style="width: 50%">
+            <el-descriptions :column="2" size="small" border labelClassName="labelClassName">
+              <el-descriptions-item>
+                <template slot="label"> 网点 </template>
+                <div>
+                  <el-select
+                    filterable
+                    :disabled="disabled"
+                    v-model="form.websitId"
+                    placeholder=""
+                    @change="changeWebsit"
+                  >
+                    <el-option
+                      v-for="item in websitList"
+                      :key="item.websitId"
+                      :label="item.name"
+                      :value="item.websitId"
+                    >
+                    </el-option>
+                  </el-select>
+                </div>
+              </el-descriptions-item>
+              <el-descriptions-item>
+                <template slot="label"> 申请类别 </template>
+                <div>
+                  <el-select
+                    placeholder=""
+                    :disabled="disabled"
+                    size="small"
+                    v-model="form.applyCategory"
+                    style="width: 100%"
+                  >
+                    <el-option v-for="item in commonDict" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                  </el-select>
+                </div>
+              </el-descriptions-item>
+              <el-descriptions-item>
+                <template slot="label"> 联系电话 </template>
+                <div>
+                  <el-input
+                    :disabled="{ WORKER: true, CUSTOMER: false }[form.buyPeople]"
+                    size="small"
+                    v-model="form.mobile"
+                  ></el-input>
+                </div>
+              </el-descriptions-item>
+              <el-descriptions-item>
+                <template slot="label"> 接收单位 </template>
+                <div>
+                  <el-input
+                    :disabled="{ WORKER: true, CUSTOMER: false }[form.buyPeople]"
+                    size="small"
+                    v-model="form.receiveUnit"
+                  ></el-input>
+                </div>
+              </el-descriptions-item>
+            </el-descriptions>
+          </div>
+        </div>
+      </div>
+      <div style="margin-bottom: -1px">
+        <el-descriptions :column="2" size="small" border labelClassName="labelClassName">
+          <el-descriptions-item>
+            <template slot="label"> 发货单位 </template>
+            <div>
+              <el-input disabled size="small" v-model="form.deliveryUnit"></el-input>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item labelStyle="width:15.45%">
+            <template slot="label"> 操作人 </template>
+            <div>
+              <el-input disabled size="small" v-model="form.updateBy"></el-input>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 收件地址 </template>
+            <div>
+              <el-input :disabled="disabled" size="small" v-model="form.receiveAddr"></el-input>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 详细地址 </template>
+            <div>
+              <el-input :disabled="disabled" size="small" v-model="form.addr"></el-input>
+            </div>
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <div style="margin-bottom: -1px">
+        <el-descriptions size="small" border labelClassName="labelClassName">
+          <el-descriptions-item labelStyle="width:15.45%">
+            <template slot="label"> 备注 </template>
+            <div>
+              <el-input type="textarea" :rows="2" :disabled="disabled" size="small" v-model="form.remark"></el-input>
+            </div>
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <div v-if="form.deliveryType === 0 && ~[2, 3].indexOf(this.type)" style="margin-bottom: -1px">
+        <el-descriptions size="small" border labelClassName="labelClassName">
+          <el-descriptions-item labelStyle="width:15.45%">
+            <template slot="label"> 物流单号 </template>
+            <div>
+              <el-input :disabled="this.type === 2" size="small" v-model="form.logisticsNo"></el-input>
+            </div>
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <el-table
+        :data="form.itemList || []"
+        size="mini"
+        border
+        style="width: 100%"
+        header-cell-class-name="headerRowColor"
+      >
+        <el-table-column label="序号" width="60">
+          <template slot-scope="scope">
+            <div class="serial_number">{{ scope.$index + 1 }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="配件编码" width="180">
+          <template slot-scope="scope">
+            <el-input v-if="scope.row.id" disabled v-model="scope.row.partsNumber" placeholder=""></el-input>
+            <el-select
+              v-else
+              filterable
+              :disabled="disabled"
+              v-model="scope.row.partsId"
+              placeholder=""
+              @change="update(scope.row, scope.$index)"
+            >
+              <el-option v-for="item in partsList" :key="item.id" :label="item.partsNumber" :value="item.id">
+              </el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="配件名称" width="180">
+          <template slot-scope="scope">
+            <el-input v-if="scope.row.id" disabled v-model="scope.row.partsName" placeholder=""></el-input>
+            <el-select
+              v-else
+              filterable
+              :disabled="disabled"
+              v-model="scope.row.partsId"
+              placeholder=""
+              @change="update(scope.row, scope.$index)"
+            >
+              <el-option v-for="item in partsList" :key="item.id" :label="item.partsName" :value="item.id"> </el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="单位" width="120">
+          <template slot-scope="scope">
+            <el-input disabled v-model="scope.row.goodsStockUnit" placeholder=""></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="市场价" width="120">
+          <template slot-scope="scope">
+            <el-input disabled type="number" v-model="scope.row.marketPrice" placeholder=""></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="销售价" width="120">
+          <template slot-scope="scope">
+            <el-input disabled type="number" :value="scope.row.salesPrice" placeholder=""></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="数量" width="100">
+          <template slot-scope="scope">
+            <el-input type="number" :disabled="disabled" v-model="scope.row.qty" placeholder=""></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="总金额" width="100">
+          <template slot-scope="scope">
+            <el-input disabled :value="scope.row.salesPrice * scope.row.qty || ''" placeholder=""></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="可用库存">
+          <template slot-scope="scope">
+            <el-input type="number" disabled v-model="scope.row.stockQty" placeholder=""></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="!disabled" label="操作" width="80">
+          <template slot-scope="scope">
+            <div class="caozuo">
+              <el-button type="danger" size="mini" @click="del(scope.$index)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div
+        v-if="form.payList && form.payList.length && form.payType !== 'CASH'"
+        style="margin-bottom: -1px; margin-top: -1px"
+      >
+        <el-descriptions :column="4" size="small" border labelClassName="labelClassName">
+          <el-descriptions-item labelStyle="width:15.45%">
+            <template slot="label"> 支付方式 </template>
+            <div>
+              <el-input
+                disabled
+                size="small"
+                :value="{ CASH: '现金', WECHAT: '微信', ALLINPAY: '通联' }[form.payList[0].payType]"
+              ></el-input>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item labelStyle="width:15.45%">
+            <template slot="label"> 支付金额 </template>
+            <div>
+              <el-input disabled size="small" :value="form.payList[0].payValue"></el-input>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item labelStyle="width:15.45%">
+            <template slot="label"> 下单时间 </template>
+            <div>
+              <el-input disabled size="small" :value="form.payList[0].createTime"></el-input>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item labelStyle="width:15.45%">
+            <template slot="label"> 支付状态 </template>
+            <div>
+              <el-input disabled size="small" :value="{ NO: '否', YES: '是' }[form.payList[0].payFlag]"></el-input>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item labelStyle="width:15.45%">
+            <template slot="label"> 支付时间 </template>
+            <div>
+              <el-input disabled size="small" :value="form.payList[0].payTime"></el-input>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item labelStyle="width:15.45%">
+            <template slot="label"> 支付单号 </template>
+            <div>
+              <el-input disabled size="small" :value="form.payList[0].orderNo"></el-input>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item labelStyle="width:15.45%">
+            <template slot="label"> 微信支付流水号 </template>
+            <div>
+              <el-input disabled size="small" :value="form.payList[0].transactionId"></el-input>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item labelStyle="width:15.45%">
+            <template slot="label"> 确认人 </template>
+            <div>
+              <el-input disabled size="small" :value="form.workerName"></el-input>
+            </div>
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <el-table
+        v-if="form.oldRefundManageRecordBeanList"
+        :data="form.oldRefundManageRecordBeanList || []"
+        size="mini"
+        border
+        style="width: 100%"
+        header-cell-class-name="headerRowColor"
+      >
+        <el-table-column label="是否备用件">
+          <template slot-scope="scope">
+            <el-input disabled :value="scope.row.isBackup ? '是' : '否'" placeholder=""></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="保内/保外">
+          <template slot-scope="scope">
+            <el-input
+              disabled
+              :value="{ INNER: '保内', OUTSIDE: '保外' }[scope.row.repairFlag]"
+              placeholder=""
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="用户姓名">
+          <template slot-scope="scope">
+            <el-input disabled :value="scope.row.customerName" placeholder=""></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="联系电话">
+          <template slot-scope="scope">
+            <el-input disabled :value="scope.row.customerTel" placeholder=""></el-input>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="margin-bottom: -1px">
+        <el-row>
+          <el-col style="margin-top: 10px">
+            <el-table
+              :data="form.allPayList"
+              size="mini"
+              border
+              header-cell-class-name="headerRowColor"
+              style="width: 100%"
+            >
+              <el-table-column prop="outTradeNo" label="商户订单号" width="235" />
+              <el-table-column prop="orderNo" label="商户单号" width="150" />
+              <el-table-column prop="payFlag" label="支付状态" width="80">
+                <template slot-scope="scope">
+                  {{ { NO: '否', YES: '是' }[scope.row.payFlag] }}
+                </template>
+              </el-table-column>
+              <el-table-column prop="payValue" label="支付金额" width="80" />
+              <el-table-column prop="createTime" label="生成时间" width="140" />
+              <el-table-column prop="timeExpire" label="失效时间" width="140" />
+              <el-table-column prop="mchNo" label="商户号" width="150" />
+              <template>
+                <el-table-column prop="openid" label="支付账号" show-overflow-tooltip />
+                <el-table-column prop="transactionId" label="微信流水号" show-overflow-tooltip />
+              </template>
+            </el-table>
+          </el-col>
+        </el-row>
+      </div>
+      <br />
+      <el-row>
+        <!-- 新增或者编辑 -->
+        <template v-if="~[0, 1].indexOf(this.type)">
+          <el-button
+            v-if="~[0].indexOf(this.type) || ~['SAVE'].indexOf(form.state)"
+            size="small"
+            type="primary"
+            @click="determine"
+            >保存</el-button
+          >
+          <el-button v-if="~['SAVE', 'SUBMIT'].indexOf(form.state)" size="small" type="primary" @click="createOrder"
+            >生成订单</el-button
+          >
+          <el-button
+            v-if="~[0].indexOf(this.type) || ~['SAVE'].indexOf(form.state)"
+            size="small"
+            type="primary"
+            @click="add"
+            >添加</el-button
+          >
+          <el-button v-if="~[0].indexOf(this.type)" size="small" @click="reset">重置</el-button>
+        </template>
+        <template>
+          <el-button v-if="~['SUBMIT'].indexOf(form.state)" size="small" type="primary" @click="previousStep"
+            >上一步</el-button
+          >
+        </template>
+        <!-- 提货 -->
+        <template v-if="~[3].indexOf(this.type)">
+          <el-button v-if="~['PAYED'].indexOf(form.state)" size="small" type="primary" @click="confirmationDelivery"
+            >确认提货</el-button
+          >
+          <el-button
+            v-if="~['PAYED', 'EXCEPTION'].indexOf(form.state)"
+            size="small"
+            type="danger"
+            @click="cancellationDelivery"
+            >取消订单</el-button
+          >
+        </template>
+        <!-- 查看 -->
+        <template v-if="~['PAYED', 'END'].indexOf(this.type) && !~['EXCEPTION'].indexOf(form.state)">
+          <el-button size="small" @click="printHtml">打印出库清单</el-button>
+        </template>
+      </el-row>
+    </div>
+    <pay-popup-window
+      :item="form"
+      :visible="visible"
+      @success="
+        () => {
+          $emit('goBack')
+          $emit('success')
+        }
+      "
+      @setVisible="bool => (visible = bool)"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  partsPartssalesorderSalesOrderDetail,
+  partsPartssalesorderSalesOrderAdd,
+  partsPartssalesorderSalesOrderEdit,
+  partsPartssalesorderSubmit,
+  partsPartssalesorderBackToSave,
+  partsPartssalesorderQueryPartsNewQty,
+  partsPartssalesorderConfirmDelivery,
+  partsPartssalesorderCancel
+} from '@/api/material-system/website/website-parts-shop-sales'
+import { getWebsit } from '@/api/customerManagement.js'
+import { getWorker } from '@/api/auxiliaryFittings/auxiliarySalesOrder'
+import { getGoodsList } from '@/api/auxiliaryFittings/auxiliarySalesReturnOrder'
+import PayPopupWindow from './pay-popup-window.vue'
+import applicationNewRepairParts from '@/components/payTemplate/applicationNewRepairParts'
+import { printhtml } from '@/utils/util'
+export default {
+  components: { PayPopupWindow },
+  props: {
+    type: {
+      type: Number
+    },
+    item: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      disabled: true,
+      partsList: [],
+      commonDict: [
+        { label: '家用空调', value: 'HOME' },
+        { label: '商用空调', value: 'TRADE' },
+        { label: '生活电器（小家电）', value: 'ELEC' }
+      ],
+      workerList: [],
+      searchLoading: false,
+      form: {
+        addr: '',
+        applyCategory: '',
+        applyType: 0,
+        area: '',
+        buyPeople: '',
+        city: '',
+        companyWechatId: '',
+        companyWechatName: '',
+        del: true,
+        deliveryType: 0,
+        deliveryUnit: '',
+        endTime: '',
+        err: '',
+        examineBy: '',
+        examineTime: '',
+        identity: '',
+        isApply: true,
+        itemList: [],
+        logisticsNo: '',
+        mobile: '',
+        oldRefundManageRecordBeanList: [],
+        openid: '',
+        orderSource: '',
+        partsWebsitId: '',
+        payConfigId: '',
+        payFlag: '',
+        payList: [],
+        payTime: '',
+        payType: '',
+        province: '',
+        pushFlag: '',
+        receiveAddr: '',
+        receiveUnit: '',
+        remark: '',
+        source: '',
+        status: '',
+        storageId: '',
+        storageName: '',
+        submitBy: '',
+        submitTime: '',
+        totalAmount: 0,
+        transNotApplyDate: '',
+        transactionId: '',
+        websitConfirmBy: '',
+        websitConfirmDate: '',
+        websitId: '',
+        websitName: '',
+        workerConfirmDate: '',
+        workerId: '',
+        workerName: ''
+      },
+      websitList: []
+    }
+  },
+  watch: {
+    'form.buyPeople'(newval, oldval) {
+      if (oldval !== undefined && oldval !== '') {
+        this.col()
+      }
+    }
+  },
+  mounted() {
+    getWebsit({ type: 'C', status: true, queryPartsWebsit: true }).then(res => {
+      this.websitList = res.data
+    })
+    this.getInitInfo()
+  },
+  methods: {
+    // 获取详情
+    getInitInfo(callback) {
+      if (~[1, 2, 3].indexOf(this.type) && this.item && this.item.id) {
+        partsPartssalesorderSalesOrderDetail({
+          id: this.item.id
+        })
+          .then(res => {
+            if (this.type === 3 || ~['SUBMIT'].indexOf(res.data.state)) {
+              this.disabled = true
+            } else if (~['SAVE'].indexOf(res.data.state)) {
+              this.disabled = false
+            }
+            if (res.data.websitId) {
+              this.form = res.data
+              this.remoteSearchWorkerMethod(res.data.websitId)
+              this.getOptions(res.data.websitId)
+            } else {
+              this.form = res.data
+            }
+            callback && callback(res)
+          })
+          .catch(err => {
+            console.log(err)
+          })
+      } else {
+        this.disabled = false
+      }
+    },
+
+    changeWebsit(v) {
+      var data = this.websitList.find(item => item.websitId === v)
+      if (data) {
+        this.form.websitId = data.websitId
+        this.form.websitName = data.websitName
+        this.form.partsWebsitId = data.partsWebsitId
+      } else {
+        this.form.websitId = ''
+        this.form.websitName = ''
+        this.form.partsWebsitId = ''
+      }
+      this.remoteSearchWorkerMethod(v)
+      this.getOptions(v)
+    },
+
+    // 获取选择下拉
+    getOptions(websitId) {
+      if (websitId) {
+        this.searchLoading = true
+        getGoodsList({
+          type: 'P',
+          websitId: websitId
+        }).then(res => {
+          this.partsList = res.data
+        })
+      } else {
+        this.partsList = []
+      }
+    },
+
+    // 获取人员信息
+    remoteSearchWorkerMethod(websitId) {
+      if (websitId) {
+        this.searchLoading = true
+        getWorker({
+          pageNum: 1,
+          pageSize: -1,
+          params: [{ param: 'b.websit_id', compare: '=', value: websitId }]
+        }).then(res => {
+          this.searchLoading = false
+          this.workerList = res.data.records
+        })
+      } else {
+        this.workerList = []
+      }
+    },
+
+    changeWorkerInfo(val) {
+      if (val) {
+        var selObj = this.workerList.find(value => {
+          return value.workerId === val
+        })
+      }
+      if (val && selObj) {
+        this.form.identity = selObj.identity
+        this.form.mobile = selObj.mobile
+        this.form.workerId = selObj.number
+        this.form.workerName = selObj.name
+      } else {
+        this.col()
+      }
+    },
+
+    // 上一步
+    previousStep() {
+      partsPartssalesorderBackToSave({
+        id: this.item.id
+      })
+        .then(res => {
+          if (this.type === 3 || ~['SUBMIT'].indexOf(res.data.state)) {
+            this.disabled = true
+          } else if (~['SAVE'].indexOf(res.data.state)) {
+            this.disabled = false
+          }
+          if (res.data.websitId) {
+            this.form = res.data
+            this.remoteSearchWorkerMethod(res.data.websitId)
+            this.getOptions(res.data.websitId)
+          } else {
+            this.form = res.data
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+
+    col() {
+      this.$data.form = this.$options.data().form
+    },
+
+    add() {
+      this.form.itemList.push({ remark: '', stockQty: '' })
+    },
+
+    del(index) {
+      this.form.itemList.splice(index, 1)
+    },
+
+    reset() {
+      this.$data.form = this.$options.data().form
+    },
+
+    update(item, index) {
+      var { id, partsNumber, ...data } = this.partsList.find(item => item.id === this.form.itemList[index].partsId)
+      partsPartssalesorderQueryPartsNewQty({
+        websitId: item.websitId || this.form.websitId,
+        partsWebsitId: item.partsWebsitId || this.form.partsWebsitId,
+        partsNumber
+      })
+        .then(res => {
+          Object.assign(item, data || {}, {
+            partsNumber,
+            stockQty: res.data ? res.data.newQty || 0 : 0,
+            remark: item.remark
+          })
+        })
+        .catch(err => {
+          Object.assign(item, data || {}, {
+            partsNumber,
+            remark: item.remark
+          })
+        })
+    },
+
+    // 保存
+    determine(bool = true, callback) {
+      if (this.form.itemList && this.form.itemList.length) {
+        var data = JSON.parse(JSON.stringify(this.form))
+        data.itemList = data.itemList.map(item => {
+          return {
+            ...item
+          }
+        })
+        ;(this.form.id ? partsPartssalesorderSalesOrderEdit : partsPartssalesorderSalesOrderAdd)(data)
+          .then(res => {
+            if (bool) {
+              this.$message({
+                type: 'success',
+                message: `${['添加', '保存'][this.type]}成功!`
+              })
+              this.$emit('goBack')
+              this.$emit('success')
+            } else {
+              callback && callback(res)
+            }
+          })
+          .catch(err => {
+            console.log(err)
+          })
+      } else {
+        this.$message({
+          type: 'info',
+          message: `请添加配件信息！`
+        })
+      }
+    },
+
+    // 生成订单并且打开支付
+    createOrder() {
+      if (!this.form.id || this.form.state === 'SAVE') {
+        this.determine(false, res => {
+          partsPartssalesorderSubmit({ id: res.data.id })
+            .then(res2 => {
+              if (this.type === 3 || ~['SUBMIT'].indexOf(res2.data.state)) {
+                this.disabled = true
+              } else if (~['SAVE'].indexOf(res2.data.state)) {
+                this.disabled = false
+              }
+              this.$emit('success')
+              this.form = res2.data
+              this.visible = true
+            })
+            .catch(err => {
+              console.log(err)
+            })
+        })
+      } else {
+        this.visible = true
+      }
+    },
+
+    goBack() {
+      this.$emit('goBack')
+    },
+
+    printHtml() {
+      printhtml(applicationNewRepairParts(this.form))
+    },
+
+    confirmationDelivery() {
+      if (this.form.deliveryType == 0 && !this.form.logisticsNo) {
+        this.$message({
+          type: 'info',
+          message: `请填写物流单号!`
+        })
+        return
+      }
+      this.$confirm('是否确定提货？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          partsPartssalesorderConfirmDelivery({
+            id: this.form.id,
+            logisticsNo: this.form.logisticsNo
+          })
+            .then(res2 => {
+              this.$message({
+                type: 'success',
+                message: `提货成功!`
+              })
+              this.$emit('goBack')
+              this.$emit('success')
+            })
+            .catch(err2 => {
+              console.log(err2)
+            })
+        })
+        .catch(() => {})
+    },
+    cancellationDelivery() {
+      this.$confirm('是否确定要取消该订单？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          partsPartssalesorderCancel({
+            id: this.form.id
+          })
+            .then(res2 => {
+              this.$message({
+                type: 'success',
+                message: `取消成功!`
+              })
+              this.$emit('goBack')
+              this.$emit('success')
+            })
+            .catch(err2 => {
+              console.log(err2)
+            })
+        })
+        .catch(() => {})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.website-parts-shop-sales {
+  min-width: 860px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  background: #fff;
+  overflow: hidden;
+  .website-parts-shop-sales-sl {
+    padding: 20px;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
+  .sizeinput {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .inputjh {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      ::v-deep .el-input {
+        margin: 0 5px;
+        &:first-child {
+          margin-left: 0 !important;
+        }
+        &:last-child {
+          margin-right: 0 !important;
+        }
+      }
+    }
+  }
+  .serial_number {
+    width: 100%;
+    height: 100%;
+    padding: 6px !important;
+    text-align: center;
+  }
+  .caozuo {
+    width: 100%;
+    height: 36px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  ::v-deep .is-disabled {
+    .el-textarea__inner,
+    .el-input__inner {
+      background-color: #fff;
+      border-color: #fff;
+    }
+    .el-input__suffix {
+      display: none;
+    }
+  }
+  ::v-deep th .cell {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+  }
+  ::v-deep .el-table__cell {
+    .el-select,
+    .el-input,
+    .el-textarea__inner,
+    .el-input__inner {
+      height: 36px !important;
+      border: none !important;
+    }
+  }
+  ::v-deep .cell {
+    height: 100%;
+    padding: 0 !important;
+  }
+  ::v-deep .labelClassName {
+    width: 180px !important;
+  }
+  ::v-deep .headerRowColor {
+    .cell {
+      height: 100%;
+      padding: 6px !important;
+    }
+  }
+}
+</style>

src/views/partsManagement/accessoryWebsite/website-parts-shop-sales-manage/website-parts-shop-sales/index.vue

@@ -0,0 +1,196 @@
+<template>
+  <template-page
+    ref="pageRef"
+    :getList="getList"
+    :exportList="exportList"
+    :columnParsing="columnParsing"
+    :optionsEvensGroup="optionsEvensGroup"
+    :tableAttributes="tableAttributes"
+    :tableEvents="tableEvents"
+    :operationColumnWidth="200"
+    :operation="operation()"
+  >
+    <website-parts-shop-sales-information
+      v-if="showFromBool"
+      v-bind="fromPm"
+      @success="$refs.pageRef.refreshList"
+      @goBack="showFromBool = false"
+    />
+    <pay-popup-window
+      :item="rowData"
+      :visible="visible"
+      @success="
+        () => {
+          $refs.pageRef.refreshList()
+        }
+      "
+      @setVisible="
+        bool => {
+          visible = bool
+          rowData = null
+        }
+      "
+    />
+  </template-page>
+</template>
+
+<script>
+import TemplatePage from '@/components/template/template-page-1.vue'
+import WebsitePartsShopSalesInformation from './components/website-parts-shop-sales-information.vue'
+import PayPopupWindow from './components/pay-popup-window.vue'
+import {
+  partsPartssalesorderSalesOrderList,
+  partsPartssalesorderSalesOrderExport,
+  partsPartssalesorderDeleteById,
+  partsPartssalesorderSalesOrderShopList,
+  partsPartssalesorderSalesOrderShopExport
+} from '@/api/material-system/website/website-parts-shop-sales'
+import operation_mixin from '@/components/template/operation_mixin.js'
+export default {
+  components: {
+    TemplatePage,
+    WebsitePartsShopSalesInformation,
+    PayPopupWindow
+  },
+  mixins: [operation_mixin],
+  data() {
+    return {
+      // 表格属性
+      tableAttributes: {},
+      // 表格事件
+      tableEvents: {},
+      showFromBool: false,
+      fromPm: {},
+      visible: false,
+      rowData: null
+    }
+  },
+  computed: {
+    greemall_user() {
+      return JSON.parse(localStorage.getItem('greemall_user'))
+    },
+    optionsEvensGroup() {
+      return [
+        [
+          [
+            this.optionsEvensAuth('add', role => {
+              return {
+                isRole: role?.moduleName && this?.greemall_user?.type == 0,
+                name: role.moduleName,
+                click: this.add
+              }
+            })
+          ]
+        ]
+      ]
+    }
+  },
+  methods: {
+    // 列表请求函数
+    getList(p) {
+      return this?.greemall_user?.type == 0
+        ? partsPartssalesorderSalesOrderShopList(p)
+        : partsPartssalesorderSalesOrderList(p)
+    },
+    // 列表导出函数
+    exportList(p) {
+      return this?.greemall_user?.type == 0
+        ? partsPartssalesorderSalesOrderShopExport(p)
+        : partsPartssalesorderSalesOrderExport(p)
+    },
+    // 表格列解析渲染数据更改
+    columnParsing(item, defaultData) {
+      return defaultData
+    },
+    add() {
+      this.fromPm = {
+        type: 0
+      }
+      this.showFromBool = true
+    },
+    operation() {
+      return this.operationBtn({
+        view: {
+          click: ({ row, index, column }) => {
+            this.fromPm = {
+              type: 2,
+              item: { ...row }
+            }
+            this.showFromBool = true
+          }
+        },
+        edit: {
+          conditions: ({ row, index, column }) => {
+            return this?.greemall_user?.type == 0 && ~['SAVE', 'SUBMIT'].indexOf(row.state)
+          },
+          click: ({ row, index, column }) => {
+            this.fromPm = {
+              type: 1,
+              item: { ...row }
+            }
+            this.showFromBool = true
+          }
+        },
+        del: {
+          prompt: '确定删除吗？',
+          conditions: ({ row, index, column }) => {
+            return this?.greemall_user?.type == 0 && ~['SAVE', 'CANCEL'].indexOf(row.state)
+          },
+          click: ({ row, index, column }) => {
+            partsPartssalesorderDeleteById({ id: row.id })
+              .then(res => {
+                this.$refs.pageRef.refreshList()
+                this.$message({
+                  type: 'success',
+                  message: `删除成功!`
+                })
+              })
+              .catch(err => {
+                console.log(err)
+              })
+          }
+        },
+        examine: {
+          name: ({ row, index, column }) => {
+            return row.state == 'SUBMIT'
+              ? '支付'
+              : row.state == 'EXCEPTION'
+              ? '编辑'
+              : row.state == 'PAYED' && ~[0].indexOf(row.deliveryConfirmFlag)
+              ? '提货'
+              : ''
+          },
+          conditions: ({ row, index, column }) => {
+            return (
+              this?.greemall_user?.type == 0 &&
+              (row.state == 'SUBMIT' ||
+                row.state == 'EXCEPTION' ||
+                (row.state == 'PAYED' && ~[0].indexOf(row.deliveryConfirmFlag)))
+            )
+          },
+          click: ({ row, index, column }) => {
+            if (row.state == 'SUBMIT') {
+              this.rowData = row
+              this.visible = true
+            } else if (row.state == 'EXCEPTION') {
+              this.fromPm = {
+                type: 3,
+                item: { ...row }
+              }
+              this.showFromBool = true
+            } else if (row.state == 'PAYED' && ~[0].indexOf(row.deliveryConfirmFlag)) {
+              this.fromPm = {
+                type: 3,
+                item: { ...row }
+              }
+              this.showFromBool = true
+            }
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>