accout-ui/src/views/InvoiceSales/relationQuery/index.vue

<template>
  <div class="relationQuery pagePadding">
    <div style="min-width: 1260px">
      <div style="padding: 5px 0 10px 0">
        <el-row :gutter="10" style="padding: 0 0 0px 0">
          <el-col :span="6" style="width: 170px">
            <el-select
              :size="searchSize"
              v-model="parmValue.type"
              placeholder="查询依据"
              @change="typeChange"
            >
              <el-option
                v-for="item in queryBasisList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6" style="width: 470px">
            <el-select
              v-model="code"
              multiple
              filterable
              :size="searchSize"
              remote
              style="width: 100%"
              :multiple-limit="1"
              reserve-keyword
              placeholder="请输入公司名称"
              :remote-method="remoteMethod"
              :loading="selectLoading"
              class="setWidth"
            >
              <el-option
                v-for="item in activeOptions"
                :key="item.companyNo"
                :label="item.companyName"
                :value="item.companyNo"
              />
            </el-select>
          </el-col>
          <el-col :span="6" style="width: 400px">
            <el-input
              placeholder="请输入编码"
              v-model="parmValue.codeNo"
              :size="searchSize"
              class="input-with-select"
            >
              <el-select
                v-model="parmValue.type"
                slot="prepend"
                disabled
                @change="
                  parmValue.page = 1;
                  searchList();
                "
                :size="searchSize"
                style="width: 120px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in queryBasisList"
                  :key="item.code"
                  :label="item.name + '编码'"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-input>
            <!-- <el-input
            v-model="parmValue.sequenceNo"
            :size="searchSize"
            placeholder="请输入确认单编号"
          ></el-input> -->
          </el-col>
          <el-col
            :span="6"
            style="float: right; width: 226px; text-align: right"
          >
            <el-button
              :size="searchSize"
              type="primary"
              icon="el-icon-search"
              @click="searchList"
            />
            <el-button
              type="warning"
              v-if="powers.some((item) => item == '024')"
              :size="searchSize"
              @click="restSearch"
            >
              重置
            </el-button>
            <el-button
              v-if="powers.some((item) => item == '002')"
              :size="searchSize"
              type="primary"
              style="margin-left: 10px"
              @click="searchList"
            >
              刷新
            </el-button>
          </el-col>
        </el-row>
      </div>
      <div v-loading="loading">
        <div v-if="active && active.length > 0">
          <el-row :gutter="20" class="header-j">
            <el-col
              :span="8"
              :class="{ width1: headIndex !== 1, width2: headIndex === 1 }"
              v-for="(head, headIndex) in active"
              :key="head"
            >
              <head-template
                :title="
                  head === 'capital'
                    ? '资金'
                    : head === 'order'
                    ? '确认单'
                    : '发票'
                "
                :dashdIndex="headIndex"
                :type="parmValue.type"
              />
            </el-col>
          </el-row>
          <div class="body-main" v-if="tableData && tableData.length > 0">
            <div
              v-for="(item, index) in tableData"
              :key="item + index"
              class="body-page-main"
            >
              <el-row :gutter="20" class="body-page">
                <el-col
                  :span="8"
                  :class="{ width1: headIndex !== 1, width2: headIndex === 1 }"
                  class="body-page-item"
                  v-for="(head, headIndex) in active"
                  :key="head + headIndex"
                >
                  <item-template
                    :list="item[head].list"
                    :headIndex="headIndex"
                    :type="parmValue.type"
                  />
                  <el-tooltip
                    v-if="headIndex !== 1 && !item[head].btn"
                    class="item"
                    effect="dark"
                    content="核销记录"
                    placement="top"
                  >
                    <div
                      class="btn"
                      :class="{ right: headIndex === 0, left: headIndex === 2 }"
                      v-if="headIndex !== 1 && !item[head].btn"
                      @click="
                        openModal(
                          item[active[1]].No,
                          item[active[1]].list[0].code,
                          active[1],
                          head
                        )
                      "
                    >
                      <i
                        class="el-icon-d-arrow-left"
                        v-if="headIndex === 0"
                      ></i>
                      <i class="el-icon-d-arrow-right" v-else></i>
                    </div>
                  </el-tooltip>
                  <div
                    class="btn dis"
                    :class="{ right: headIndex === 0, left: headIndex === 2 }"
                    v-if="headIndex !== 1 && item[head].btn"
                  >
                    <i class="el-icon-d-arrow-left" v-if="headIndex === 0"></i>
                    <i class="el-icon-d-arrow-right" v-else></i>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="body-main" v-else>
            <div class="body-page-main">
              <el-row :gutter="20" class="body-page">
                <el-col
                  v-for="i in 3"
                  :key="i"
                  :span="8"
                  class="body-page-item"
                  :class="{ width2: i === 2, width1: i !== 2 }"
                >
                  <div class="nodate">暂无数据</div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <div class="myCard" v-else>
          <div class="excelUploadBox">
            <i class="el-icon-receiving"></i>
            <span class="boxM">请选择查询依据！</span>
          </div>
        </div>
      </div>

      <div
        class="Pagination"
        style="text-align: right; margin-top: 10px"
        v-show="count > 0"
      >
        <el-pagination
          :size="searchSize"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page="parmValue.page"
          :page-sizes="[15, 50, 100]"
          :page-size="parmValue.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        ></el-pagination>
      </div>
      <add-edit
        :id="modelId"
        :show-model="showModel"
        :No="No"
        :is-detail="isDetail"
        @refresh="searchList"
        @cancel="showModel = false"
      />
    </div>
  </div>
</template>
   <script>
import mixinPage from "@/mixins/elPaginationHandle";
import asyncRequest from "@/apis/service/InvoiceSales/relationQuery";
import { mapGetters } from "vuex";
import { invoiceType, capitalType, queryBasisList } from "@/assets/js/linkType";
import headTemplate from "./headTemplate.vue";
import itemTemplate from "./itemTemplate.vue";
import addEdit from "./addEdit";
import resToken from "@/mixins/resToken";

export default {
  name: "relationQuery",
  components: {
    headTemplate,
    itemTemplate,
    addEdit,
  },
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "relationQuery"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  data() {
    return {
      code: [],
      input: "",
      No: "",
      selectLoading: false,
      invoiceType: invoiceType,
      capitalType: capitalType,
      queryBasisList: queryBasisList,
      active: ["capital", "order", "invoice"],
      loading: false,
      showModel: false,
      isDetail: false,
      modelId: 0,
      parmValue: {
        type: "",
        companyNo: "",
        page: 1,
        size: 15,
        codeNo: "",
      },
      count: 0, // 总条数
      tableData: [],
    };
  },
  mixins: [mixinPage, resToken],

  mounted() {
    this.restSearch();
  },

  methods: {
    restSearch() {
      this.code = [];
      this.active = [];
      this.parmValue = {
        type: "",
        companyNo: "",
        page: 1,
        size: 15,
        codeNo: "",
      };
      this.tableData = [];
      // this.searchList();
    },
    openModal(No, codeNo, from, to) {
      console.log(from, to);
      this.isDetail = 0;
      switch (from + "," + to) {
        case "order,invoice":
          this.isDetail = "1";
          break;
        case "order,capital":
          this.isDetail = "2";
          break;
        case "capital,order":
          this.isDetail = "3";
          break;

        case "invoice,capital":
          this.isDetail = "4";
          break;
        case "capital,invoice":
          this.isDetail = "5";
          break;
        case "invoice,order":
          this.isDetail = "6";
          break;
      }
      console.log(this.isDetail);
      this.modelId = codeNo;
      this.No = No;
      this.showModel = true;
    },
    async typeChange(val) {
      if (val) {
        let index = this.queryBasisList.findIndex((v1) => v1.code === val);
        if (index !== -1) {
          this.active = this.queryBasisList[index].active;
        } else {
          this.active = [];
          this.tableData = [];
        }
      } else {
        this.active = [];
        this.tableData = [];
      }
      this.parmValue.codeNo = "";
      await this.searchList();
    },

    async searchList() {
      if (this.parmValue.type === "") {
        this.$message.warning("请选择查询依据！");
        return;
      }
      if (this.active && this.active.length === 3) {
        this.parmValue.companyNo = this.code.join(",");
        this.loading = true;

        this.tableData = [];
        // for (let i = 0; i < 5; i++) {

        // }
        let res = await asyncRequest.list(this.parmValue);
        console.log(res);
        if (res && res.code === 0 && res.data) {
          let data = res.data.list;
          data.forEach((v1) => {
            let modelA = {
              order: {
                btn: v1.dashd === "orderinfo" ? true : false,
                No: "",
                list: [],
              },
              capital: {
                btn: v1.dashd === "tradeinfo" ? true : false,
                No: "",
                list: [],
              },
              invoice: {
                btn: v1.dashd === "invinfo" ? true : false,
                No: "",
                list: [],
              },
            };
            v1.orderinfo.forEach((v2) => {
              v2.qrdNo.forEach((v3) => {
                let itemQ = {
                  code: v3.qrdNo,
                  name: v2.companyName,
                  inv_fee: v3.ainv_fee,
                  fund_fee: v3.afund_fee,
                  order_fee: 0,
                };
                modelA.order.No = v2.orderNo;
                modelA.order.list.push(itemQ);
              });
            });

            v1.tradeinfo.forEach((v2) => {
              let itemW = {
                code: v2.traNo,
                name: v2.companyName,
                inv_fee: v2.inv_fee,
                fund_fee: 0,
                order_fee: v2.order_fee,
              };
              modelA.capital.No = v2.traNo;
              modelA.capital.list.push(itemW);
            });

            v1.invinfo.forEach((v2) => {
              let itemE = {
                code: v2.invNo,
                name: v2.companyName,
                inv_fee: 0,
                fund_fee: v2.atrade_fee,
                order_fee: v2.aorder_fee,
              };
              modelA.invoice.No = v2.invNo;
              modelA.invoice.list.push(itemE);
            });

            this.tableData.push(modelA);
          });
          this.count = Number(res.data.count);
        } else if (res && res.code >= 100 && res.code <= 104) {
          await this.logout();
        } else {
          this.tableData = [];
          this.count = 0;
        }
        this.loading = false;
      }
    },
    // async statusConfirm(id, status) {
    //   console.log(id, status);
    //   let str = status === "1" ? "禁用" : "启用";
    //   await this.$confirm("确定要改为" + str, {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(async () => {
    //       this.loading = true;
    //       const model = {
    //         id: id,
    //         status: status === "1" ? "0" : "1",
    //       };
    //       const res = await asyncRequest.status(model);
    //       if (res.code === 0) {
    //         this.loading = false;
    //         this.$notify.success({
    //           title: "状态修改成功！",
    //           message: "",
    //         });
    //         await this.searchList();
    //       } else {
    //         this.loading = false;
    //       }
    //     })
    //     .catch(() => {
    //       console.log("取消");
    //     });
    // },
    async remoteMethod(query) {
      this.selectLoading = true;
      if (query !== "") {
        this.activeOptions = [];
        const res = await asyncRequest.clist({
          page: 1,
          size: 100,
          company: query,
        });
        if (res && res.code === 0 && res.data && res.data.list) {
          this.activeOptions = res.data.list;
        } else if (res && res.code >= 100 && res.code <= 104) {
          await this.logout();
        } else {
          this.$message.warning(res.message);
        }
      } else {
        this.activeOptions = [];
      }
      this.selectLoading = false;
    },
  },
};
</script>
   <style lang="scss" scoped>
.relationQuery {
  // overflow-x: scroll;
  width: 100%;
  height: 100%;
  position: relative;
  .header-j {
    .width1 {
      width: 330px;
    }
    .width2 {
      width: calc(100% - 660px);
    }
  }
  .body-main {
    position: relative;
    width: 100%;
    .body-page-main {
      position: relative;
      width: 100%;
      .body-page {
        display: flex;
        width: calc(100% + 20px);
        align-items: stretch;
        .body-page-item {
          width: 33.33%;
          position: relative;
          &.width1 {
            width: 330px;
          }
          &.width2 {
            width: calc(100% - 660px);
          }
          .nodate {
            width: 100%;
            line-height: 36px;
            text-align: center;
            color: #909399;
            font-size: 13px;
            //  width: 100%;
            // position: relative;
            // height: 100%;
            border: 1px solid rgb(223, 230, 236);
            border-top: 0;
          }
          .btn {
            position: absolute;
            // background: #e4393c;
            width: 40px;
            height: 30px;
            box-sizing: border-box;
            // border: 1px solid rgb(99, 203, 231);
            color: rgb(99, 203, 231);
            text-align: center;
            line-height: 26px;
            font-size: 17px;
            z-index: 5;
            border-radius: 2px;
            top: calc(50% - 15px);

            i {
              font-weight: 900;
              font-family: "Microsoft Yahei", sans-serif "Microsoft Yahei",
                sans-serif;
            }
            &.right {
              right: -20px;
            }
            &.left {
              left: -20px;
            }
            &:hover {
              cursor: pointer;
            }
            &.dis {
              color: rgb(213, 220, 226);
              i {
                font-weight: normal;
              }

              &:hover {
                cursor: not-allowed;
              }
            }
          }
          // display: flex;
          // align-items: stretch;
        }
      }
    }
  }
  .myCard {
    border-radius: 4px;
    border: 1px solid #e6ebf5;
    background-color: #ffffff;
    padding: 18px;
    color: #303133;
    box-sizing: content-box;

    .excelUploadBox {
      position: relative;
      width: 100%;
      height: 120px;
      line-height: 120px;

      box-sizing: border-box;
      &:hover {
        cursor: pointer;
      }
      .el-icon-receiving {
        width: 100%;
        text-align: center;
        height: 50px;
        display: block;
        font-size: 32px;
        line-height: 90px;
        color: #d3d4d6;
      }
      .boxM {
        width: 100%;
        display: block;
        text-align: center;
        line-height: 65px;
        height: 60px;
        color: #909399;
      }
    }
  }
}
</style>
  
};