ZZJ
2022-07-11 6ef2ac92c0d3f79b59b8698274918df830b58b29
src/views/personalCenter/components/OrderMng.vue
@@ -13,7 +13,7 @@
          <el-date-picker
            size="small"
            v-model="searchTime"
            @change="save"
            @change="searchingBtn"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
@@ -23,10 +23,10 @@
      </div>
      <div class="right">
        <div class="button searchBtn" @click="save">搜索</div>
        <div class="button resetBtn" @click="save">重置</div>
        <div class="button searchBtn" @click="searchingBtn">搜索</div>
        <div class="button resetBtn" @click="clearSearch">重置</div>
      </div>
      <div class="to-excel">
      <div class="to-excel" @click="exportList">
        <span class="iconfont">&#xe614;</span> <span>导出</span>
      </div>
    </div>
@@ -47,25 +47,29 @@
          }}</template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          prop="sn"
          label="订单编号"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="userType" label="用户类型"></el-table-column>
        <el-table-column prop="duration" label="授权时长"></el-table-column>
        <el-table-column prop="authList" label="权限"></el-table-column>
        <el-table-column label="状态">
        <el-table-column label="产品名称" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-if="scope.row.isBind == 1" class="status green">已绑定</div>
            <div v-else class="status">未绑定</div>
            {{ scope.row.products[0].productName }}
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="orderMoney" label="订单金额"></el-table-column>
        <el-table-column label="支付方式">
          <template slot-scope="scope">
            <div v-if="scope.row.payMethod == 0">线下汇款</div>
            <div v-if="scope.row.payMethod == 1">支付宝</div>
            <div v-if="scope.row.payMethod == 2">微信</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
@@ -87,15 +91,16 @@
      </div>
    </div>
  </div>
  <div class="order-detail" v-else>
    <div class="banner">
      <span class="iconfont">&#xe614;</span> <span class="t">订单详情</span>
      <span class="iconfont" @click="back">&#xe62c;</span>
      <span class="t">订单详情</span>
    </div>
    <div class="block">
      <div class="head-name">订单信息</div>
      <div class="order-general-view">
        <div class="detail-list">
          <div class="item">
            <label>订单编号:</label>
@@ -117,7 +122,7 @@
            <label>订单状态:</label>
            <span>{{ form.status }}</span>
          </div>
          <div class="item">
            <label>订单金额:</label>
            <span>{{
@@ -129,157 +134,117 @@
    </div>
    <div class="block">
      <div class="head-name">订单详情</div>
       <el-table
          id="multipleTable"
          ref="multipleTable"
          tooltip-effect="dark"
          :data="form.products"
          style="width: 100%"
          :fit="true"
          :max-height="tableHeight"
          :default-sort="{ prop: 'createTime', order: 'descending' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column prop="productName" label="产品名称" width="220"></el-table-column>
          <el-table-column prop="productTypeName" label="产品类型" width="140"></el-table-column>
          <el-table-column prop="productVersion" label="版本号" width="140"></el-table-column>
          <el-table-column label="配置详情" min-width="180">
            <template slot-scope="scope">
              <div style="text-align: left">
                <p v-if="scope.row.productType != 3 && scope.row.productType != 4 && scope.row.modules.length">
                  模块:
                  <span v-for="item in scope.row.modules" :key="item">{{ item + " " }}</span>
                </p>
                <p v-if="scope.row.productBaseDetail.hasChUnitPrice">
                  通道数量:
                  <span>{{ scope.row.ChCount }}</span>
                </p>
                <p v-if="scope.row.productBaseDetail.hasAuthPrice">
                  授权数量:
                  <span>{{ scope.row.authCount }}</span>
                </p>
                <p v-if="scope.row.productType != 3 && scope.row.productType != 4 && scope.row.sdks.length">
                  算法:
                  <span v-for="item in scope.row.sdks" :key="item">{{ item + " " }}</span>
                </p>
                <p>
                  服务时长:
                  <span>{{ scope.row.serveYear + "年" }}</span>
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="devCount" label="数量" width="110"></el-table-column>
          <el-table-column label="服务起止时间" min-width="180">
            <template slot-scope="scope">
              <p>{{ scope.row.startTime }}</p>
              <p>{{ scope.row.endTime }}</p>
            </template>
          </el-table-column>
          <el-table-column label="金额" prop="price" width="130">
            <template slot-scope="scope">{{ form.source == 0 ? "--" : "¥ " + scope.row.price + " 元" }}</template>
          </el-table-column>
          <el-table-column label="操作" min-width="200">
            <template slot-scope="scope">
              <div class="operation">
                <span style="cursor: pointer" @click="downLoadEnclosure(scope.row)" v-if="scope.row.appendix.length"
                  >下载附件</span
                >
                <span
                  style="cursor: pointer"
                  v-if="scope.row.orderStatus == 2 && (scope.row.productType == 3 || scope.row.productType == 4)"
                  @click="downLoadSoftware(scope.row)"
                  >下载软件</span
                >
                <span
                  style="cursor: pointer"
                  v-if="scope.row.orderStatus == 2 && (scope.row.productType == 2 || scope.row.productType == 1)"
                  @click="downLoadSoftware(scope.row)"
                  >下载安装包</span
                >
                <span
                  style="cursor: pointer"
                  v-if="scope.row.orderStatus == 2 && scope.row.productType == 5"
                  @click="downLoadAuth(scope.row)"
                  >下载产品密钥</span
                >
                <span style="cursor: pointer" v-if="scope.row.productType != 2" @click="toDevice(scope.row)"
                  >查看设备</span
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      <el-table
        id="multipleTable"
        ref="multipleTable"
        tooltip-effect="dark"
        :data="form.products"
        style="width: 100%"
        :fit="true"
        :default-sort="{ prop: 'createTime', order: 'descending' }"
        v-if="showTable"
      >
        <el-table-column prop="productName" label="产品名称"></el-table-column>
        <el-table-column label="配置详情">
          <template slot-scope="scope">
            <div style="text-align: left">
              <p
                v-if="
                  scope.row.productType != 3 &&
                  scope.row.productType != 4 &&
                  scope.row.modules.length
                "
              >
                模块:
                <span v-for="item in scope.row.modules" :key="item">{{
                  item + " "
                }}</span>
              </p>
              <p v-if="scope.row.productBaseDetail.hasChUnitPrice">
                通道数量:
                <span>{{ scope.row.ChCount }}</span>
              </p>
              <p v-if="scope.row.productBaseDetail.hasAuthPrice">
                授权数量:
                <span>{{ scope.row.authCount }}</span>
              </p>
              <p
                v-if="
                  scope.row.productType != 3 &&
                  scope.row.productType != 4 &&
                  scope.row.sdks.length
                "
              >
                算法:
                <span v-for="item in scope.row.sdks" :key="item">{{
                  item + " "
                }}</span>
              </p>
              <p>
                服务时长:
                <span>{{ scope.row.serveYear + "年" }}</span>
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="devCount" label="数量"></el-table-column>
        <el-table-column label="服务起止时间">
          <template slot-scope="scope">
            <p>{{ scope.row.startTime }}</p>
            <p>{{ scope.row.endTime }}</p>
          </template>
        </el-table-column>
        <el-table-column label="金额">
          <template slot-scope="scope">{{
            form.source == 0 ? "--" : "¥ " + scope.row.price + " 元"
          }}</template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <div class="head-name">支付信息</div>
        <el-table
          tooltip-effect="dark"
          :data="form.payInfo"
          :fit="true"
          :max-height="tableHeight"
          :default-sort="{ prop: 'createTime', order: 'descending' }"
          :span-method="tableSpanMethod"
        >
          <el-table-column prop="payMethod" label="支付渠道" width="150">
            <template slot-scope="scope">
              <div v-if="scope.row.payMethod == 1">线下汇款</div>
              <div v-if="scope.row.payMethod == 2">支付宝</div>
              <div v-if="scope.row.payMethod == 3">微信</div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="payTime" label="付款时间" align="center" min-width="150" ></el-table-column> -->
          <el-table-column prop="updateTime" label="付款时间" width="180"></el-table-column>
          <el-table-column prop="payMoney" label="付款金额" width="150"></el-table-column>
          <el-table-column
            prop="tradeNo"
            label="附件凭证号/流水号"
            v-if="form.payMethod == 2"
            width="200"
          ></el-table-column>
          <el-table-column prop="payAccount" label="付款账号" width="190"></el-table-column>
          <el-table-column label="付款单位/姓名" prop="payUser" width="220"></el-table-column>
          <el-table-column label="查看付款凭证" width="200">
            <template slot-scope="scope">
              <div>
                <el-image
                  style="width: 100px"
                  :fit="imageFit"
                  :src="`/httpImage/${scope.row.appendix}`"
                  :preview-src-list="[`/httpImage/${scope.row.appendix}`]"
                ></el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="审核状态" width="180">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.orderStatus == 11">审核中</span>
                <span v-if="scope.row.orderStatus == 12">已驳回</span>
                <span v-if="scope.row.orderStatus == 2">审核通过</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="170">
            <template slot-scope="scope">
              <div v-if="scope.row.orderStatus !== 2">
                <span class="cursor-pointer" @click="checkOrder(1)">审核通过</span>
                <span class="cursor-pointer" @click="checkOrder(2)">驳回</span>
              </div>
              <span v-else>-</span>
            </template>
          </el-table-column>
        </el-table>
      <el-table
        tooltip-effect="dark"
        :data="form.payInfo"
        :fit="true"
        :default-sort="{ prop: 'createTime', order: 'descending' }"
        v-if="showTable"
      >
        <el-table-column prop="payMethod" label="支付渠道" min-width="80">
          <template slot-scope="scope">
            <div v-if="scope.row.payMethod == 1">线下汇款</div>
            <div v-if="scope.row.payMethod == 2">支付宝</div>
            <div v-if="scope.row.payMethod == 3">微信</div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="payTime" label="付款时间" align="center" min-width="150" ></el-table-column> -->
        <el-table-column prop="updateTime" label="付款时间"></el-table-column>
        <el-table-column prop="payMoney" label="付款金额"></el-table-column>
        <el-table-column prop="payAccount" label="付款账号"></el-table-column>
        <el-table-column label="付款单位/姓名" prop="payUser"></el-table-column>
        <el-table-column label="查看付款凭证">
          <template slot-scope="scope">
            <div class="link" @click="openImg(scope.row.appendix)">
              查看付款凭证
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
// import Steps from "./Steps";
// import StepsCard from "./StepCard";
// import TreeBox from "./TreeBox";
import { getOrders, getAuthFile } from "@/api/order";
import { getOrderById } from "@/api/product";
export default {
  components: {},
  created() {
    this.searchingBtn();
  },
  data() {
    return {
      searchTime: [
@@ -292,16 +257,7 @@
      activeStep: 0,
      activeIndex: 0,
      total: 0, //总数
      dataList: [
        {
          name: "basic",
          phone: "1121313232",
          userType: "个人",
          duration: "永久",
          authList: "集群1,集群2",
          isBind: 1,
        },
      ],
      dataList: [],
      isShowAdd: false, //是否展示新增弹窗
      isShowUnbind: false, //是否展示解绑弹窗
      unbindId: "",
@@ -318,76 +274,107 @@
      cluster: null, //选中的集群类型
      showQuit: false, //展示退出集群的弹窗
      showJoin: false, //展示加入集群的弹窗
      activeEquipment: null, //处理中的设备
      form: {}, //处理中的设备
      isShowDetail: false,
      form: {
        id: "",
        createTime: "",
        createUserName: "",
        payTime: "",
        payMethod: "",
        payAble: 0,
        orderMoney: 0,
        price: "",
        serveYear: 1,
        source: 0,
        status: "",
        products: [],
        activeCodes: [],
        payInfo: [],
      },
      showTable: false,
    };
  },
  methods: {
    goback() {
      this.isShowAdd = false;
      this.activeIndex = 0;
    },
    goto(i) {
      this.activeIndex = i;
    },
    // 跳到设备详情
    checkDetail(row) {
      this.$router.push({
        path: "/equipmentDetail",
        query: {
          id: row.devId,
          ip: row.devIp,
          port: row.serverPort,
          ndid: row.id,
        },
      });
    },
    // 跳到算法详情
    algorithmDetail(row) {
      this.$router.push({
        path: "/algorithmDetail",
        query: {
          id: row.devId,
          ip: row.devIp,
          port: row.serverPort,
        },
      });
    },
    // 查询列表
    save() {},
    searchingBtn() {
      let param = {
        page: this.page,
        size: this.size,
        startTime: this.searchTime ? this.searchTime[0] : "",
        endTime: this.searchTime ? this.searchTime[1] : "",
        inputText: this.inputText,
        productBaseId: "0",
        orderName: "",
        orderType: "",
        status: 0,
      };
      getOrders(param)
        .then((res) => {
          this.dataList = res.data.list.map((item, indez) => {
            let status = "";
            switch (item.orderStatus) {
              case -1:
                status = "已取消";
                break;
              case 0:
                status = "未下单";
                break;
              case 1:
                status = "待支付";
                break;
              case 2:
                status = "已支付";
                break;
              case 11:
                status = "审核中";
                break;
              case 12:
                status = "已驳回";
                break;
              default:
                status = "";
            }
            let name = "";
            let downFlag = false;
            let products = [];
            item.products.forEach((every, index) => {
              // 判断本订单是否存在可下载的内容(软件,sdk)
              if (every.productType == 1 || every.productType == 3) {
                downFlag = true;
              }
              // 归类产品和激活码以供下载
              products.push({
                productId: every.productId,
                productName: every.productName,
                activateCode: every.activateCode,
                productTypeName: every.productTypeName,
              });
              if (index == 0) {
                name += every.productName + "(" + every.productTypeName + ")";
              } else {
                name +=
                  " / " + every.productName + "(" + every.productTypeName + ")";
              }
            });
            return {
              id: item.id,
              sn: item.sn,
              name: name,
              source: item.source == 0 ? "激活码下载" : "线上购买",
              createTime: item.createTime,
              status: status,
              orderStatus: item.orderStatus,
              orderMoney: item.orderMoney,
              payMethod: item.payMethod,
              code:
                item.products.length > 1 ? "-" : item.products[0].activateCode,
              canDownLoad: downFlag,
              products: products,
            };
          });
          this.total = res.data.total;
          if (res.data.total <= this.size) {
            this.page = 1;
          }
        })
        .catch((err) => {
          this.$notify.error(err.msg);
        });
    },
    //分页功能
    handleSizeChange(size) {
      this.size = size;
      this.searchingBtn();
    },
    //分页功能
    refrash(page) {
      this.page = page;
    },
    //解绑按钮
    Untying(row) {
      console.log(row);
      this.unbindId = row.id;
      this.isShowUnbind = true;
      this.searchingBtn();
    },
    //获得默认时间
@@ -408,35 +395,161 @@
      ];
    },
    //关闭新增弹窗
    closeAddBox() {
      this.isShowAdd = false;
    },
    // 关闭解绑弹窗
    closeUnbindBox() {
      this.isShowUnbind = false;
    },
    //解绑成功回调
    reflash() {
      this.isShowUnbind = false;
    },
    clearSearch() {
      debugger;
      this.searchTime = this.getDateInit();
      debugger;
      this.inputText = "";
      this.searchingBtn();
    },
    //退出集群
    quitCluster(equipment) {
      this.activeEquipment = equipment;
      this.showQuit = true;
    showDetail(order) {
      getOrderById(order.id).then((res) => {
        if (res.success) {
          let status = "";
          switch (res.data.orderInfo.orderStatus) {
            case -1:
              status = "已取消";
              break;
            case 0:
              status = "未下单";
              break;
            case 1:
              status = "已下单,待支付";
              break;
            case 2:
              status = "已支付";
              break;
            default:
              status = "";
          }
          let prod = res.data.orderInfo.products.map((item) => {
            // 算出起始服务时间
            let year = res.data.orderInfo.createTime.split("-")[0];
            let endTime =
              parseInt(year) +
              item.serveYear +
              res.data.orderInfo.createTime.slice(4);
            return {
              productId: item.productId,
              productName: item.productName,
              productType: item.productType,
              orderStatus: res.data.orderInfo.orderStatus,
              productTypeName: item.productTypeName,
              productVersion: item.productVersion,
              modules: item.moduleNames,
              sdks: item.sdkNames,
              appendix: item.appendix,
              serveYear: item.serveYear,
              ChCount: item.ChCount,
              authCount: item.authCount,
              devCount: item.devCount,
              price: res.data.orderInfo.orderMoney,
              startTime: res.data.orderInfo.createTime,
              endTime: endTime,
              deviceIds: item.devIdList,
              code: item.activateCode,
              productBaseDetail: item.productBaseDetail,
            };
          });
          let codes = res.data.orderInfo.products.map((item) => {
            return {
              productId: item.productId,
              productName: item.productName,
              code: item.activateCode,
              deviceIds: item.deviceIds,
              status: item.codeStatus == 0 ? "未激活" : "已激活",
              activeTime: item.activeTime,
              devCount: item.devCount,
              usedCount: item.usedCount,
            };
          });
          let payInfo = res.data.orderInfo.payCerts.map((item) => {
            return {
              appendix: item.appendix,
              payMethod: res.data.orderInfo.payMethod,
              payTime: res.data.orderInfo.payTime,
              updateTime: item.updateTime,
              payAccount: item.payAccount,
              payMoney: item.payMoney,
              payUser: item.payUser,
              tradeNo: res.data.orderInfo.tradeNo,
              orderStatus: res.data.orderInfo.orderStatus,
            };
          });
          this.form = {
            id: res.data.orderInfo.id,
            createTime: res.data.orderInfo.createTime,
            createUserName: res.data.orderInfo.createUserName,
            orderMoney: res.data.orderInfo.orderMoney,
            orderStatus: res.data.orderInfo.orderStatus,
            status: status,
            sn: res.data.orderInfo.sn,
            source: res.data.orderInfo.source,
            payMethod: "支付宝",
            price: "-",
            payAble: "-",
            payTime: "-",
            products: prod,
            activeCodes: codes,
            payInfo: payInfo,
          };
          this.isShowDetail = true;
          this.$nextTick(() => {
            this.showTable = true;
          });
        }
      });
    },
    //加入集群
    showDetail(equipment) {
      this.activeEquipment = equipment;
      this.isShowDetail = true;
    back() {
      this.isShowDetail = false;
      this.searchingBtn();
    },
    openImg(url) {
      window.open("/httpImage/" + url);
    },
    async exportList() {
      let param = {
        page: this.page,
        size: this.size,
        startTime: this.searchTime ? this.searchTime[0] : "",
        endTime: this.searchTime ? this.searchTime[1] : "",
        inputText: this.inputText,
        productBaseId: "0",
        orderName: "",
        orderType: "",
        status: 0,
      };
      const result = await getAuthFile(param);
      console.log(result);
      var blob = new Blob([result.body.data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
        }),
        Temp = document.createElement("a");
      Temp.href = window.URL.createObjectURL(blob);
      console.log(result);
      console.log(result.fileName);
      Temp.download = window.decodeURI(result.fileName);
      Temp.setAttribute("download", result.fileName);
      document.body.appendChild(Temp);
      Temp.click();
      document.body.removeChild(Temp);
      window.URL.revokeObjectURL(Temp);
    },
  },
  mounted() {},
@@ -465,9 +578,6 @@
      margin-right: 10px;
    }
  }
  .steps {
  }
  .searchBtn {
    width: 60px;
    height: 32px;
@@ -493,6 +603,7 @@
    align-items: center;
    justify-content: center;
    margin-left: 195px;
    cursor: pointer;
  }
  .resetBtn {
    width: 60px;
@@ -779,6 +890,7 @@
    .iconfont {
      margin-right: 10px;
      font-size: 18px;
      cursor: pointer;
    }
    .t {
      font-size: 16px;
@@ -789,7 +901,7 @@
  }
  .block {
    box-sizing: border-box;
    padding: 20px ;
    padding: 20px;
    padding-bottom: 30px;
    margin-bottom: 24px;
    background: #ffffff;
@@ -818,20 +930,21 @@
        text-align: left;
        .item {
          width: 25%;
          // margin: 15px 0 0;
           margin-top: 30px;
          // margin: 15px 0 0;
          margin-top: 30px;
          label {
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            line-height: 20px;color: #666666;
            line-height: 20px;
            color: #666666;
          }
          span {
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 700;
         color: #3D3D3D;
            color: #3d3d3d;
            line-height: 20px;
          }
        }
@@ -860,4 +973,8 @@
  border-color: #0065ff;
}
.link {
  color: #0065ff;
  cursor: pointer;
}
</style>