drp-ui/src/views/expend/expendMx.vue

<template>
  <div id="expendMx">
    <div v-if="isList">
      <el-card
        v-loading="loading"
        style="position: relative;"
      >
      <el-form class="search_area" label-width="auto">
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-form-item label="编码">
                <el-input
                  v-model.trim="params.code"
                  size="mini"
                  clearable
                  style="width: 200px"
                />
              </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="医院编码">
                <el-input
                  v-model.trim="params.custCode"
                  size="mini"
                  clearable
                  style="width: 200px"
                />
              </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="供应商编码">
                <el-input
                  v-model.trim="params.supplierCode"
                  size="mini"
                  clearable
                  style="width: 200px"
                />
              </el-form-item>
          </el-col>


          <el-col :span="1.5">
            <el-form-item label="结算开始日期">
              <el-date-picker
                v-model="params.startDate"
                clearable
                type="date"
                value-format="yyyy-MM-dd"
                size="mini"
                style="width: 200px"
              >
              </el-date-picker>
              </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="结算截止日期">
              <el-date-picker
                v-model="params.endDate"
                clearable
                type="date"
                value-format="yyyy-MM-dd"
                size="mini"
                style="width: 200px"
              ></el-date-picker>
              </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="结算单号">
                <el-input
                  v-model.trim="params.settleNo"
                  size="mini"
                  clearable
                  style="width: 200px"
                />
              </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="是否汇总">
              <el-select style="width: 200px" size="mini" clearable v-model="params.isSum" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label-width="80px">
              <el-button type="primary" size="mini" icon="el-icon-search" @click="searchList">搜索</el-button>
              <el-button size="mini" plain icon="el-icon-refresh" @click="resetList">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="btn_grooup">
        <!-- <el-button type="primary" size="mini" @click="submits">提交</el-button> -->
        <el-button type="primary" size="mini" @click="pulldata">下拉数据</el-button>
        <el-button type="primary" size="mini" @click="huizong">汇总</el-button>
      </div>

      <el-super-ux-table
        id="data-table"
        v-model="tableData"
        index
        checkbox
        :size="size"
        :dict="dict"
        :page="pageInfo"
        :height=500
        :columns="TableColumns"
        pagination
        convenitentOperation
        storage-key="expendMxList"
        @row-dblclick="useSee"
        @row-select="useSelect"
        @selection-change="handleSelectionChange"
        @row-click="rowSelect"
        @pagination="useQuery(params, pageInfo)"
        ref="tables"
      >
        <ux-table-column
          fixed="right"
          title="操作"
          align="center"
          width="100"
          >
          <template slot-scope="scope">
            <!-- <el-button type="text" size="mini" v-if="scope.row.status == '1' && scope.row.flowId" @click="reback(scope.row)">收回</el-button> -->
            <el-button type="text" size="mini" @click="check(scope.row)">查看</el-button>
            <el-button type="text" size="mini" @click="edit(scope.row)">编辑</el-button>
          </template>
        </ux-table-column>
      </el-super-ux-table>

      </el-card>
    </div>

    <Add v-model="isList" v-if="!isList" :pageStu="page" :disable="disable" :row="rowDetail" @refresh="searchList"/>
  </div>
</template>

<script>
import { mxList, pullMx, huizongMX, exportMx } from '@/api/expend/expendMx.js'
export default {
  dicts: ['sys_status', 'sys_number_yes_no'],
  components: {
    Add: () => import("./expendMxDetail.vue"),
    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
  },
  data() {
    return {
      // 页面配置
      isList: true,
      // 页面状态
      page: '',
      disable: false,
      rowDetail: {},
      size: "mini",
      loading: false,
      options: [{value: '0', label: '是'}, {value: '2', label: '否'}],
      params: {
        code: '',
        custCode: '',
        supplierCode: '',
        startDate: '',
        endDate: '',
        settleNo: '',
      },
      pageInfo: {
        pageNum: 1,
        pageSize: 20,
        total: 0
      },
      tableData: [],
      selectData: [],
      // SearchColumns: SearchColumns,
      TableColumns: [
        { item: { key: "code", title: "编码"}, attr: {} },
        { item: { key: "verifyState", title: "单据状态"}, attr: {
          is: "el-dict-tag",
          dictName: "sys_status",
          }
        },
        { item: { key: "serviceFee", title: "服务费合计" }, attr: {} },
        { item: { key: "custName", title: "医院名称" }, attr: {} },
        { item: { key: "custCode", title: "医院编码" }, attr: {} },
        { item: { key: "supplierCode", title: "供应商编码" }, attr: {} },
        { item: { key: "supplierName", title: "供应商名称" }, attr: {} },
        { item: { key: "isSum", title: "是否汇总" }, attr: {
          is: 'el-dict-tag',
          dictName: "sys_number_yes_no",
        } },
        { item: { key: "settleNo", title: "结算单号"}, attr: {} },
        { item: { key: "startDate", title: "结算开始日期" }, attr: {} },
        { item: { key: "endDate", title: "结算截止日期" }, attr: {} },
        { item: { key: "totalAmount", title: "合计金额" }, attr: {} },
        { item: { key: "remark", title: "备注"}, attr: {} },
      ].map(({ item, attr }) => ({
      attr,
      item: {
        ...item,
        sortabled: true,
        fixedabled: true,
        filterabled: true,
        hiddenabled: true,
      },
      })),
      ids: []
    }
  },
  created() {
    this.useQuery(this.params, this.pageInfo)
  },
  methods: {
    searchList() {
      this.useQuery(this.params, this.pageInfo)
    },
    resetList() {
      this.params = {
        code: '',
        custCode: '',
        supplierCode: '',
        startDate: '',
        endDate: '',
        settleNo: '',
      }
      this.useQuery(this.params, this.pageInfo)
    },
    useSee() {},
    useSelect() {},
    handleSelectionChange(selection) {
      console.log('选中', selection)
      // this.ids = selection.map(item => item.id)
      // console.log('选中数组', this.ids)
      this.ids = selection
    },
    rowSelect(row) {
      this.$refs.tables.toggleRowSelection([{row: row}]);
    },
    async useQuery(prop, page) {
      let params = {...prop, ...page}
      await mxList(params).then(res => {
        if( res.code === 200 ) {
          this.tableData = res.rows
          this.pageInfo.total = res.total
        }
      })
    },
    submits() {
      this.isList = false
      this.page = 'add'
      this.disable = false
    },
    pulldata() {
      this.$modal.loading("正在下拉数据，请稍后...");
      pullMx().then(res => {
        if(res.code === 200) {
          this.$modal.closeLoading();
          this.$modal.notifySuccess(res.msg);
          this.useQuery(this.params, this.pageInfo)
        }
      }).catch(err => {
        this.$modal.closeLoading();
      })
    },
    huizong() {
      console.log('ids', this.ids);
      if (this.ids.length <= 0) {
        this.$modal.notifyWarning("至少勾选一条数据");
      } else {
        let map = {
          ids: this.ids.map(s => s.id)
        }
        this.download('/pu/doc/pullToCcd', {...map}, `汇总明细_${new Date().getTime()}.xlsx`)
      }
    },
    huizongDC(arr) {
      this.download('/pu/doc/pullToCcd', {...arr}, `汇总明细_${new Date().getTime()}.xlsx`)
      // exportMx(arr).then(res => {
      //   console.log('111',res)
      //   const blob = new Blob([res], {
      //     type: "application/vnd.ms-excel;charset=UTF-8",
      //   }); // 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
      //   const downloadElement = document.createElement("a"); //创建a标签
      //   const href = window.URL.createObjectURL(blob); // 创建下载的链接
      //   downloadElement.href = href; //下载地址
      //   downloadElement.download = '消耗单明细'; // 下载后文件名
      //   document.body.appendChild(downloadElement);
      //   downloadElement.click(); // 点击下载
      //   document.body.removeChild(downloadElement); // 下载完成移除元素
      //   window.URL.revokeObjectURL(href); // 释放blob对象
      // })
    },
    check(row) {
      this.isList = false
      this.page = 'check'
      this.rowDetail = row
      this.disable = true
    },
    edit(row) {
      this.isList = false
      this.page = 'edit'
      this.rowDetail = row
      this.disable = false
    },
  }
}
</script>

<style lang="scss" scoped>
#expendMx {
  padding: 12px;
  box-sizing: border-box;
  overflow-y: scroll;
}
.btn_grooup {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>