Merge branch 'dev' of http://114.132.189.42:9002/r/center-lims-before-ruoyi...

zouyu

2025-03-18 bc44c8e3c9d85691ce3fa73ef1300a6fae46e365

 src/views/business/costStatistics/index.vue

@@ -1,9 +1,409 @@
<style scoped>
.costStatistics {
  width: 100%;
  height: 100%;
}
.title {
  height: 60px;
  line-height: 60px;
}

.search {
  background-color: #fff;
  height: 80px;
  display: flex;
  align-items: center;
}

.search_thing {
  display: flex;
  align-items: center;
  height: 50px;
}

.search_label {
  width: 120px;
  font-size: 14px;
  text-align: right;
}

.search_input {
  width: calc(100% - 120px);
}

>>> .custom-statistic .el-statistic .head {
  font-size: 25px;
}

.table {
  margin-top: 10px;
  background-color: #fff;
  width: calc(100% - 40px);
  height: calc(100% - 60px - 80px - 10px - 40px);
  padding: 20px;
}

.el-form-item {
  margin-bottom: 16px;
}

>>> .el-table tbody tr:hover > td {
  background-color: transparent !important;
}
</style>

<template>
  <div>费用统计</div>
  <div>
    <div class="costStatistics bg-1">
      <div>
        <el-row class="title">
          <el-col :span="12" style="padding-left: 20px; text-align: left"
            >费用统计</el-col
          >
          <el-col :span="12" style="text-align: right">
            <el-button
              size="small"
              type="primary"
              v-hasPermi="['business:costStatistics:OA']"
              >OA推送</el-button
            >
          </el-col>
        </el-row>
      </div>
      <div class="search">
        <div class="search_thing">
          <div class="search_label">时间范围：</div>
          <div class="search_input">
            <el-date-picker
              v-model="dates"
              type="daterange"
              range-separator="至"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              @change="datesChange"
              :key="index2"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="search_thing" style="width: 340px">
          <div class="search_label">委托单位：</div>
          <div class="search_input">
            <el-select
              @focus="getCompanyOptions"
              @change="refreshTable()"
              clearable
              size="small"
              v-model="entity.company"
              style="width: 100%"
            >
              <el-option
                v-for="item in companyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="search_thing" style="padding-left: 30px">
          <el-button size="small" @click="refresh()">重 置</el-button>
          <el-button size="small" type="primary" @click="refreshTable()"
            >查 询</el-button
          >
        </div>
        <div class="search_thing" style="margin-left: 50px">
          <div style="width: 100%; text-align: right">总价：</div>
          <el-statistic
            group-separator=","
            :precision="2"
            :value="total"
          ></el-statistic>
        </div>

        <div class="search_thing" style="padding-left: 70px">
          <el-button
            size="small"
            type="primary"
            @click="handleDown"
            :loading="outLoading"
            v-hasPermi="['business:costStatistics:export']"
            >导出</el-button
          >
        </div>
      </div>
      <div class="table">
        <lims-table
          :tableData="tableData"
          :parentSpanMethod="spanMethod"
          :column="column"
          :tableLoading="tableLoading"
          :height="tableHeight"
          :page="page"
          @pagination="pagination"
        ></lims-table>
      </div>
    </div>
    <el-dialog
      title="在线编制"
      :visible.sync="claimVisible"
      width="70%"
      :modal-append-to-body="false"
    >
      <Word style="height: 70vh" v-if="claimVisible" ref="Word" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="claimVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmClaim">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {};
</script>
import limsTable from "@/components/Table/lims-table.vue";
import {
  costStatistics,
  exportCommissionFees,
  costStatistics2,
  selectCustomPageList,
} from "../../../api/business/costStatistics";

<style></style>
export default {
  components: {
    limsTable,
  },
  data() {
    return {
      tableHeight: "",
      tableData: [],
      column: [
        {
          label: "下单时间",
          prop: "createTime",
        },
        {
          label: "委托编号",
          prop: "entrustCode",
        },
        {
          label: "样品名称",
          prop: "sample",
        },
        {
          label: "规格型号",
          prop: "model",
        },
        {
          label: "样品数量",
          prop: "num",
        },
        {
          label: "总价",
          prop: "price",
        },
        {
          label: "试验项目",
          prop: "inspectionItem",
        },
        {
          label: "委托单位",
          prop: "company",
        },
        {
          label: "委托人",
          prop: "name",
        },
      ],
      tableLoading: false,
      page: {
        current: 1,
        size: 20,
        total: 0,
      },
      entity: {
        company: null,
        dates: null,
      },
      entityCopy: {},
      upIndex: 0,
      claimVisible: false,
      dates: [],
      index2: 0,
      total: 0,
      companyOptions: [], // 委托单位枚举值
      outLoading: false,
    };
  },
  created() {
    this.getTableHeight();
  },
  mounted() {
    this.getDates();
    this.refreshTable();
    this.entityCopy = this.HaveJson(this.entity);
  },
  methods: {
    // 合并单元格
    spanMethod({row, column, rowIndex, columnIndex}) {
      // 委托单号相同的进行一个列合并
      const mergeColumns = [1,2,8,9]
      if (
        mergeColumns.includes(columnIndex)
      ) {
        // 如果是第一行， 或者上一行数据的委托单号和当前行的委托单号不一样
        if (
          rowIndex == 0 ||
          row.entrustCode != this.tableData[rowIndex - 1].entrustCode
        ) {
          // 计算需要合并的行数
          let rowspan = 1;
          while (
            rowIndex + rowspan < this.tableData.length &&
            row.entrustCode == this.tableData[rowIndex + rowspan].entrustCode
          ) {
            rowspan++;
          }
          return [rowspan, 1];
        } else {
          return [0, 0];
        }
      } else {
        // 其他列不合并
        return [1, 1];
      }
    },
    getTableHeight() {
      const windowHeight = window.innerHeight;
      this.tableHeight = windowHeight - 50 - 46 - 60 - 80 - 60 - 32 + "";
    },
    getData() {
      this.tableLoading = true;
      let params = { ...this.page, ...this.entity };
      costStatistics(params).then((res) => {
        this.tableData = res.data.records;
        this.page.total = res.data.total;
        this.tableLoading = false;
      });
    },
    pagination({ page, limit }) {
      this.page.current = page;
      this.page.size = limit;
      this.refreshTable();
    },

    handleDown() {
      let data = {
        company: this.entity.company ? this.entity.company : "",
        startTime: this.dates[0],
        endTime: this.dates[1],
      };
      this.outLoading = true;
      exportCommissionFees(data).then((res) => {
        const blod = new Blob([res], { type: "application/octet-stream" });
        const url = URL.createObjectURL(blod);
        const link = document.createElement("a");
        link.href = url;
        link.download = "委托费用统计.xlsx";
        document.body.appendChild(link);
        link.click();
        this.$nextTick(() => {
          this.$message.success("导出成功");
          this.outLoading = false;
        });
      });
    },
    getTotal() {
      costStatistics2(this.entity).then((res) => {
        this.total = res.data.total;
      });
    },
    getDates() {
      //当前月第一天
      var y = new Date().getFullYear(); //获取年份
      var m = new Date().getMonth() + 1; //获取月份
      var d = "01";
      m = m < 10 ? "0" + m : m; //月份补 0
      let startDate = [y, m, d].join("-");
      //当前月最后一天
      var y = new Date().getFullYear(); //获取年份
      var m = new Date().getMonth() + 1; //获取月份
      var d = new Date(y, m, 0).getDate(); //获取当月最后一日
      m = m < 10 ? "0" + m : m; //月份补 0
      d = d < 10 ? "0" + d : d; //日数补 0
      let endDate = [y, m, d].join("-");
      this.dates = [startDate, endDate];
      this.index2++;
      this.entity.dates = `["${startDate}","${endDate}"]`;
    },
    getCompanyOptions() {
      selectCustomPageList({ ...this.page, ...this.entity })
        .then((res) => {
          const list = res.data.records;
          this.companyOptions = [];
          list.map((item) => {
            const obj = Object.assign({
              value: item.id,
              label: item.company,
            });
            this.companyOptions.push(obj);
          });
        })
        .catch((e) => {
          this.$message.error("查询失败");
        });
    },
    refreshTable() {
      this.entity.dates = JSON.stringify(this.dates);
      this.getData();
      this.getTotal();
    },
    refresh() {
      this.entity = this.HaveJson(this.entityCopy);
      this.getDates();
      this.getTotal();
      this.$nextTick(() => {
        this.getData();
      });
    },
    handleWeave() {
      this.claimVisible = true;
    },
    // 权限分配
    getPower(radio) {
      let power = JSON.parse(sessionStorage.getItem("power"));
      let up = false;
      let del = false;
      let add = false;
      for (var i = 0; i < power.length; i++) {
        if (power[i].menuMethod == "upInsOrder") {
          up = true;
        }
        if (power[i].menuMethod == "addInsOrder") {
          add = true;
        }
      }
      if (!up) {
        this.componentData.do.splice(4, 1);
      }
    },
    handleClose() {
      this.upLoad = false;
    },
    confirmClaim() {
      console.log(11111111111, this.$refs.Word.getValue());
    },
    datesChange(val) {
      if (val == null) {
        return;
      }
      this.componentData.entity.dates = JSON.stringify(val);
      this.$refs["ValueTable"].selectList();
      this.getTotal();
    },
  },
};
</script>