jf-frock/src/views/ProductionOrderList/Deliverylist/Deliverylist.vue

<template>
  <div>
    <FullPage
      title="发货单"
      :list="set_list"
      @init="init"
      :loading="loading"
      @searchData="init"
      @changePage="changePage"
      @changeSize="changeSize"
      :tableColums="computedTable"
      :tableData="tableData"
      :pageIndex="pageIndex"
      :total="total"
    >
      <div slot="navButton">
        <!-- <Button
          v-if="persimissionData['表头设置'] || persimissionData.all"
          @click="setupTableHeader"
          type="primary"
          ghost
          icon="ios-cog"
          >表头设置</Button
        > -->
      </div>
      <template slot="basicTypeSet" slot-scope="{ row }">
        <div>
          <span
            v-for="item in warningList"
            :key="item.id"
            :style="{ color: item.color }"
            v-show="item.id == row.warning_state"
            >{{ item.title }}</span
          >
        </div>
      </template>
      <template slot="set" slot-scope="{ row }">
        <a class="map-margin" @click="goPage(row,1)">详情</a>
         <a class="map-margin" @click="goPage(row,2)">查看异常</a>
        <a
          @click="confirmOutStock(row, 1)"
          v-if="row.state == 0"
          class="map-margin"
          >确认出库</a
        >
        <!-- &&(persimissionData['确认出库'] || persimissionData.all) -->
        <a
          @click="confirmOutStock(row, 2)"
          v-if="row.state == 1"
          class="map-margin"
          >确认运输</a
        >
        <!-- &&(persimissionData['确认运输'] || persimissionData.all) -->
        <a
          class="map-margin"
          @click="
            goBigScreen(row);
            showModal = true;
          "
          >大屏</a
        >
      </template>
    </FullPage>
    <Modal v-model="showModal" fullscreen footer-hide class="modal-bs">
      <template slot="header">
        <div class="modal-title">
          <span class="modal-titlt-side">{{ selectedName }}</span>
          <span class="modal-title-name font-gradient-style"
            >倍思特发货清单</span
          >
          <span class="modal-titlt-side">{{ currentDate }}</span>
        </div>
      </template>
      <div class="modal-body">
        <div class="modal-body-top">
          <div class="modal-body-top-left">
            <div class="modal-body-top-left-card">
              <div class="font-gradient-style">
                芯片总数
              </div>
              <div class="card-number-style" ref="tag_num_total">
                <div>0</div>
                <div>0</div>
                <div>0</div>
                <div>0</div>
              </div>
            </div>
            <div class="modal-body-top-left-card">
              <div class="font-gradient-style">
                今日发货
              </div>
              <div class="card-number-style" ref="today_total_total">
                <div>0</div>
                <div>0</div>
                <div>0</div>
                <div>0</div>
              </div>
            </div>
            <div class="modal-body-top-left-card">
              <div class="font-gradient-style">
                已发货
              </div>
              <div class="card-number-style" ref="send_total_total">
                <div>0</div>
                <div>0</div>
                <div>0</div>
                <div>0</div>
              </div>
            </div>
          </div>
          <div class="modal-body-top-right">
            <div class="modal-body-top-right-card">
              <div>
                异常芯片
              </div>
              <div class="card-number-style" ref="unusual_tag_num_total">
                <div>0</div>
                <div>0</div>
                <div>0</div>
                <div>0</div>
              </div>
            </div>
            <span></span>
            <span></span>
          </div>
        </div>
        <div class="modal-body-content">
          <div class="modal-body-content-left">
            <Table
              max-height="400"
              :columns="modalHouseColums"
              :data="modalHouseList"
            ></Table>
            <div style="padding-top:10px;color:white">
              共{{ today_total - send_total }}条未发货
            </div>
          </div>
          <div class="modal-body-content-right">
            <Table
              style="background-color: transparent;"
              stripe
              max-height="470"
              :columns="modalHouseColums"
              :data="modalUnusualTagList"
            ></Table>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      tableColums: [
        {
          title: "订单编号",
          align: "center",
          key: "order_no",
          fixed: "left",
          width: "200",
        },
        {
          title: "运输单号",
          align: "center",
          key: "transport_no",
          minWidth: 200,
        },
        {
          title: "订单类型",
          align: "center",
          key: "type",
          minWidth: 100,
          render: (h, params) =>
            h("span", {}, params.row.type == 1 ? "工装" : "家装"),
        },
        {
          title: "紧急程度",
          align: "center",
          key: "warning_state",
          minWidth: 100,
          slot: "basicTypeSet",
        },
        {
          title: "小区名称",
          align: "center",
          key: "residential_name",
          minWidth: 200,
        },
        {
          title: "出库时间",
          align: "center",
          key: "start_time",
          minWidth: 200,
          render: (h, params) =>
            h("span", {}, this.func.replaceDate(params.row.start_time, 1)),
        },
        {
          title: "确认出库百分比",
          align: "center",
          key: "in_out_value",
          minWidth: 150,
        },
        { title: "客户", align: "center", key: "client_name", minWidth: 150 },
        {
          title: "运输百分比",
          align: "center",
          key: "transportation_value",
          minWidth: 150,
        },
        { title: "手机号", align: "center", key: "mobile", minWidth: 150 },
        {
          title: "订单状态",
          align: "center",
          key: "state",
          minWidth: 100,
          render: (h, params) =>
            h(
              "span",
              {},
              params.row.state == 99
                ? "全部"
                : params.row.state == 0
                ? "可以派工"
                : params.row.state == 1
                ? "已派工"
                : "已完成"
            ),
        },
        {
          title: "操作",
          align: "center",
          key: "set",
          slot: "set",
          fixed: "right",
          width: "150",
        },
      ],
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      proxyObj: {},
      loading: false,
      tableheaders: [],
      showModal: false,
      modalHouseList: [],
      modalUnusualTagList: [],
      //芯片总数
      tag_num: "",
      //今日发货
      today_total: "",
      //已发货
      send_total: "",
      warningList: [],
      //异常芯片
      unusual_tag_num: "",
      modalHouseColums: [
        {
          title: "房间",
          key: "houseName",
          maxWidth: 120,
        },
        {
          title: "产品",
          key: "title",
        },
        {
          title: "部件",
          key: "part_title",
        },
      ],
      selectedName: "",
      currentDate: "",
      timer: "",
    };
  },
  computed: {
    ...mapState(["persimissionData"]),
    computedTable() {
      if (this.tableheaders.length < 1) {
        return this.tableColums;
      }
      return this.func.computedHeader(this.tableheaders, this.tableColums);
    },
    set_list() {
      return [
        {
          title: "订单编号",
          name: "Input",
          serverName: "order_no",
          placeholder: "请输入订单编号",
          value: "",
        },
        {
          title: "订单类型",
          name: "Select",
          placeholder: "请选择",
          serverName: "type",
          value: "",
          option: [
            { label: "工装", value: 1 },
            { label: "家装", value: 0 },
          ],
        },
        {
          title: "订单状态",
          name: "Select",
          placeholder: "请选择",
          serverName: "sub_state",
          value: "",
          option: [
            { label: "可以派工", value: 0 },
            { label: "已派工", value: 1 },
            { label: "已完成", value: 2 },
          ],
        },
        {
          title: "紧急程度",
          name: "Select",
          serverName: "warning_state",
          placeholder: "请选择",
          value: "",
          optionName: "title",
          optionValue: "id",
          option: this.warningList,
        },
        {
          title: "小区名称",
          name: "Input",
          serverName: "residential_name",
          placeholder: "小区名称",
          value: "",
        },
        {
          title: "客户",
          name: "Input",
          serverName: "client_name",
          placeholder: "客户",
          value: "",
        },
        {
          title: "手机号",
          name: "Input",
          serverName: "mobile",
          placeholder: "手机号",
          value: "",
        },
        {
          title: "出库日期范围",
          start_server: "start_time",
          end_server: "end_time",
          name: "Input",
          start_value: "",
          end_value: "",
          isDate: true,
          start_placeholder: "开始日期",
          end_placeholder: "结束日期",
        },
      ];
    },
  },
  methods: {
    init(row) {
      this.pageIndex = 1;
      row.page_index = this.pageIndex;
      row.page_size = this.pageSize;
      this.proxyObj = row;
      this.getData(row);
    },
    getData(row) {
      this.loading = true;
      this.axios("/api/orders_out_list", { params: row }).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.tableheaders = res.data.tableSet || [];
        }
      });
    },
    changePage(e) {
      this.pageIndex = e;
      this.proxyObj.page_index = this.pageIndex;
      this.getData(this.proxyObj);
    },
    changeSize(e) {
      this.pageSize = e;
      this.proxyObj.page_size = this.pageSize;
      this.getData(this.proxyObj);
    },
    confirmOutStock(row, type) {
      //type 1出库  2运输
      let params = {};
      let post_url =
        type == 1 ? "/api/orders_transport" : "/api/orders_transport_confirm";
      params.transport_no = row.transport_no || row.order_no;
      this.confirmDelete({
        title: type == 1 ? "确认出库" : "确认运输",
        content: type == 1 ? "确认出库么？" : "确认运输么？",
        type: "primary",
        then: (e) => {
          this.axios.post(post_url, params).then((res) => {
            if (res.code == 200) {
              this.$Message.success(res.msg);
              this.getData(this.proxyObj);
            }
          });
        },
        cancel: (e) => {},
      });
    },
    goPage(row,type) {
      switch(row,type){
        case 1:
      this.$router.push({
        path: "/cms/productionorderlist/inboundform/details",
        query: {
          order_no: row.order_no,
          type: 2,
          transport_no: row.transport_no,
        },
      });
      break
      case 2:
        this.$router.push('/cms/productionorderlist/deliverylist/checkUnusual')
      }
    },
    goBigScreen(row) {
      this.axios({
        method: "post",
        url: "/api/transport_list",
        data: {
          transport_no: row.transport_no,
          // transport_no:16185413363403
        },
      })
        .then((res) => {
          const temphouse = res.data.house;
          temphouse.forEach((el) => {
            el.houseName = `${el.house}-${el.layer}-${el.unit}-${el.number}`;
          });
          this.modalHouseList = temphouse;
          const tempunusual_tag = res.data.unusual_tag;
          tempunusual_tag.forEach((el) => {
            el.houseName = `${el.house}-${el.layer}-${el.unit}-${el.number}`;
          });
          this.modalUnusualTagList = tempunusual_tag;
          this.tag_num = res.data.tag_num;
          this.today_total = res.data.total;
          this.send_total = res.data.send_total;
          this.unusual_tag_num = res.data.unusual_tag_num;
          this.handleDispaly(
            res.data.tag_num,
            this.$refs.tag_num_total.children
          );
          this.handleDispaly(
            res.data.send_total,
            this.$refs.send_total_total.children
          );
          this.handleDispaly(
            res.data.total,
            this.$refs.today_total_total.children
          );
          this.handleDispaly(
            res.data.unusual_tag_num,
            this.$refs.unusual_tag_num_total.children
          );
          this.selectedName = row.residential_name;
        })
        .catch((err) => {});
    },
    setupTableHeader() {
      this.tableheaders.length < 1
        ? (this.tableheaders = this.tableColums.reduce(
            (pre, cur) => pre.concat(cur.key),
            []
          ))
        : "";
      this.$setTableheader({
        list: this.tableColums,
        selects: this.tableheaders,
        then: (result) => {
          this.tableheaders = result;
          this.axios
            .post("/api/update/table", { id: this.$route.query.id, result })
            .then((res) => {
              if (res.code == 200) {
                this.$Message.success(res.msg);
              }
            });
        },
      });
    },
    //芯片展示更改
    handleDispaly(from, to) {
      //[1,2,3,4]
      to.forEach((el) => {
        el.innerText = 0;
      });
      const arr = from
        .toString()
        .split("")
        .reverse();
      let i = 3;
      arr.forEach((el) => {
        to[i].innerText = el;
        i--;
      });
    },
  },
  created() {
    let _this = this; //声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(function() {
      _this.currentDate = //修改数据date
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1) +
        "-" +
        new Date().getDate() +
        " " +
        new Date().getHours() +
        ":" +
        new Date().getMinutes();
    }, 1000);
    // 获取紧急程度
    this.axios.get("/api/warning_list").then((res) => {
      this.warningList = res.data.data;
    });
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
};
</script>

<style lang="scss" scoped>
.modal-bs {
  /deep/.ivu-modal-header,
  /deep/.ivu-modal-body,
  /deep/.ivu-modal-footer {
    padding: 0;
    border: none;
  }
  /deep/.ivu-modal-content {
    background-image: url("./../../../assets/imgs/bgBSContent.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
  }
}
.modal-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: white;
  height: 80px;
  padding: 20px;
  background-image: url("./../../../assets/imgs/bgBSHeader.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  .modal-title-name {
    font-size: 40px;
  }
  .modal-titlt-side {
    width: 15%;
    font-size: 20px;
  }
}
.modal-body {
  margin-top: 50px;
  padding-top: 10px;
  background-image: url("./../../../assets/imgs/bgBSBody.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  .modal-body-top,
  .modal-body-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .modal-body-top {
    padding: 50px 0;
    background-image: url("./../../../assets/imgs/bgBSBodyTop.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    .modal-body-top-left {
      display: flex;
      width: 55%;
      justify-content: space-between;
      margin-top: 30px;
      .modal-body-top-left-card {
        width: 30%;
        margin: 10px;
        text-align: center;
        border-radius: 10px;
        padding: 10px;
        background-color: #282928;
        border: #2a6ffe 1px solid;
        div {
          padding: 10px 0;
          font-size: 30px;
        }
      }
    }
    .modal-body-top-right {
      display: flex;
      width: 40%;
      justify-content: space-between;
      margin-top: 30px;
      .modal-body-top-right-card {
        width: 40%;
        margin: 10px;
        text-align: center;
        border-radius: 10px;
        padding: 10px;
        background-color: #282928;
        border: #ff4242 1px solid;
        color: #ff4242;
        div {
          color: #ff4242;
          padding: 10px 0;
          font-size: 30px;
        }
      }
    }
    /deep/.ivu-card-head {
      border: none;
    }
  }
  .modal-body-content {
    padding-top: 10px;
    .modal-body-content-left {
      width: 55%;
      margin: 10px;
      padding: 50px 20px;
      background-image: url("./../../../assets/imgs/bgBSBodyContent.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      -moz-background-size: 100% 100%;
      /deep/.ivu-table {
        color: #d4d4dc;
        background-color: transparent;

        .ivu-table-header thead tr th {
          // background-color:transparent;
          background-color: rgba(255, 255, 255, 0.1);
          border-bottom: #111419 1px solid;
        }
        .ivu-table-body tbody tr td {
          // background-color:transparent;
          background-color: rgba(255, 255, 255, 0.1);
          border-bottom: #111419 1px solid;
        }
        .ivu-table-tip tbody tr td {
          // background-color:transparent;
          background-color: rgba(255, 255, 255, 0.1);
          border-bottom: #111419 1px solid;
        }
      }
      /deep/.ivu-table:before {
        height: 0;
      }
    }
    .modal-body-content-right {
      width: 40%;
      margin: 10px;
      padding: 50px 20px;
      background-image: url("./../../../assets/imgs/bgBSBodyContent.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      -moz-background-size: 100% 100%;
      /deep/.ivu-table {
        color: #d4d4dc;
        background-color: transparent;
        .ivu-table-header thead tr th {
          // background-color:transparent;
          background-color: rgba(255, 255, 255, 0.1);
          border-bottom: #111419 1px solid;
        }
        .ivu-table-body tbody tr td {
          // background-color:transparent;
          background-color: rgba(255, 255, 255, 0.1);
          border-bottom: #111419 1px solid;
        }
        .ivu-table-tip tbody tr td {
          // background-color:transparent;
          background-color: rgba(255, 255, 255, 0.1);
          border-bottom: #111419 1px solid;
        }
      }
      /deep/.ivu-table:before {
        height: 0;
      }
    }
  }
}
//文字渐变效果
.font-gradient-style {
  background-image: -webkit-gradient(
    linear,
    0% top,
    0% bottom,
    from(#dbddf1),
    to(#a5a8d1)
  );
  color: transparent;
  -webkit-background-clip: text;
  -moz-background-clip: text;
}
//芯片数字展示效果
.card-number-style {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 30px 0;
  div {
    width: 15%;
    color: white;
    padding: 2px 5px;
    background-image: linear-gradient(#121312, #313131);
  }
}
</style>