spring
2025-02-26 d5a26ba2eab0a966c1754ef1d9918bfcb6e1e289
src/components/view/b1-expenses.vue
@@ -1,188 +1,382 @@
<style scoped>
   .title {
      height: 60px;
      line-height: 60px;
   }
  .title {
    height: 60px;
    line-height: 60px;
  }
   .search {
      background-color: #fff;
      height: 80px;
      display: flex;
      align-items: center;
   }
  .search {
    background-color: #fff;
    height: 80px;
    display: flex;
    align-items: center;
  }
   .search_thing {
      display: flex;
      align-items: center;
      height: 50px;
   }
  .search_thing {
    display: flex;
    align-items: center;
    height: 50px;
  }
   .search_label {
      width: 120px;
      font-size: 14px;
      text-align: right;
   }
  .search_label {
    width: 120px;
    font-size: 14px;
    text-align: right;
  }
   .search_input {
      width: calc(100% - 120px);
   }
  .search_input {
    width: calc(100% - 120px);
  }
   .table {
      margin-top: 10px;
      background-color: #fff;
      width: calc(100% - 40px);
      height: calc(100% - 60px - 80px - 10px - 40px);
      padding: 20px;
   }
  .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-form-item {
    margin-bottom: 16px;
  }
  >>>.el-table tbody tr:hover>td {
    background-color: transparent !important;
  }
</style>
<template>
   <div class="inspection_order">
      <div style="width: 100%;height: 100%;">
         <div>
            <el-row class="title">
               <el-col :span="12" style="padding-left: 20px;">费用统计</el-col>
          <el-col :span="12" style="text-align: right;">
                  <el-button size="small" type="primary">OA推送</el-button>
               </el-col>
            </el-row>
         </div>
         <div class="search">
  <div class="inspection_order">
    <div style="width: 100%;height: 100%;">
      <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">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="datetimerange"
              range-separator="至"
              format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small">
          <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">
               <div class="search_label">委托人:</div>
               <div class="search_input"><el-input size="small" placeholder="请输入" clearable
                     v-model="componentData.entity.name" @keyup.enter.native="refreshTable()"></el-input></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>
         <div class="table">
            <ValueTable ref="ValueTable" :url="$api.insOrder.costStatistics" :componentData="componentData"
               :key="upIndex" @handleWeave="handleWeave"/>
         </div>
      </div>
        </div>
        <div class="search_thing" style="width: 340px">
          <div class="search_label">委托单位:</div>
          <div class="search_input">
<!--            <el-input size="small" placeholder="请输入" clearable-->
<!--               @keyup.enter.native="refreshTable()"></el-input>-->
            <el-select @focus="getCompanyOptions" @change="refreshTable()" clearable
                       size="small" v-model="componentData.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="padding-left: 70px;">总价:{{total}}</div>
        <div class="search_thing" style="padding-left: 70px;">
          <el-button size="small" type="primary" @click="handleDown" :loading="outLoading" v-if="isExport">导出</el-button>
        </div>
      </div>
      <div class="table">
        <ValueTable ref="ValueTable" :url="$api.insOrder.costStatistics"
                    :componentData="componentData" :key="upIndex"
          @handleWeave="handleWeave" :column-min-width="'140'"/>
      </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>
      <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>
   import ValueTable from '../tool/value-table.vue'
  import Word from '../tool/word.vue'
   export default {
      components: {
         ValueTable,
      Word,
      },
      data() {
         return {
            componentData: {
               entity: {
                  name: null,
                  orderBy: {
                     field: 'id,ins_sample_id',
                     order: 'asc'
                  }
               },
               isIndex: true,
               showSelect: false,
               select: false,
               do: [],
               linkEvent:{},
               tagField: {
                  type: {
                     select: [{
                        value: 0,
                        type: 'success',
                        label: '普通'
                     }, {
                        value: 1,
                        type: 'warning',
                        label: '优先'
                     }, {
                        value: 2,
                        type: 'danger',
                        label: '紧急'
                     }]
                  },
                  createUser: {
                     select: []
                  }
               },
               selectField: {},
               requiredAdd: [],
               requiredUp: []
            },
            entityCopy: {},
            upIndex: 0,
        claimVisible:false,
            dates: []
         }
      },
      mounted() {
         this.entityCopy = this.HaveJson(this.componentData.entity)
         this.getPower()
      },
      methods: {
         refreshTable() {
            this.$refs['ValueTable'].selectList()
         },
         refresh() {
            this.componentData.entity = this.HaveJson(this.entityCopy)
            this.upIndex++
         },
      handleWeave(){
  import ValueTable from '../tool/value-table.vue'
  export default {
    components: {
      ValueTable,
    },
    data() {
      return {
        componentData: {
          entity: {
            company: null,
            dates: null,
            orderBy: {
              field: 'id',
              order: 'asc'
            }
          },
          init: false,
          isIndex: true,
          showSelect: false,
          select: false,
          highlight: false,
          do: [],
          linkEvent: {},
          spanConfig: {
            //合并行
            rows: [{
                name: 'createTime',
                index: 1
              },
              {
                name: 'entrustCode',
                index: 2
              },
              /* {
                name: 'sample',
                index: 3
              },
              {
                name: 'model',
                index: 4
              }, */
              {
                name: 'company',
                index: 8
              },
              {
                name: 'name',
                index: 9
              },
            ],
            // 特殊的合并行,根据main和rows的name来合并
            /* special: {
              main: 'entrustCode',
              rows: [{
                  name: 'sample',
                  index: 3
                },
                {
                  name: 'model',
                  index: 4
                },
                {
                  name: 'num',
                  index: 5
                },
                {
                  name: 'price',
                  index: 6
                },
              ]
            } */
          },
          tagField: {
            type: {
              select: [{
                value: 0,
                type: 'success',
                label: '普通'
              }, {
                value: 1,
                type: 'warning',
                label: '优先'
              }, {
                value: 2,
                type: 'danger',
                label: '紧急'
              }]
            },
            createUser: {
              select: []
            }
          },
          selectField: {},
          requiredAdd: [],
          requiredUp: [],
          needSort: ['createTime', 'sample'],
        },
        entityCopy: {},
        upIndex: 0,
        claimVisible: false,
        dates: [],
        index2: 0,
        total: 0,
        companyOptions: [], // 委托单位枚举值
        entity: {
          orderBy: {
            field: 'id',
            order: 'asc'
          }
        },
        page: {
          current: -1,
          size: -1,
        },
        outLoading:false,
        isExport:false
      }
    },
    mounted() {
      this.getDates()
      this.refreshTable()
      this.entityCopy = this.HaveJson(this.componentData.entity)
      this.getPower()
    },
    methods: {
      handleDown(){
        let entity = {...this.componentData.entity}
        // entity.dates = JSON.stringify(entity.dates)
        delete entity.orderBy
        this.outLoading = true
        this.$axios.post(this.$api.insOrder.export,{
          entity:entity
        },{
            headers: {
              'Content-Type': 'application/json'
            }
          ,responseType: "blob"}).then(res => {
          this.outLoading = false
          const blob = new Blob([res],{ type: 'application/octet-stream' });
          //将Blob 对象转换成字符串
          let reader = new FileReader();
          reader.readAsText(blob, 'utf-8');
          reader.onload = () => {
            try {
              let result = JSON.parse(reader.result);
              if (result.message) {
                this.$message.error(result.message);
              } else {
                const url = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = url;
                let date = JSON.parse(entity.dates)
                link.download = (entity.company?entity.company+' ':'')+date[0]+' - '+date[1]+'费用统计.xlsx';
                link.click();
                this.$message.success('导出成功')
              }
            } catch (err) {
              console.log(err);
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              let date = JSON.parse(entity.dates)
              link.download = (entity.company?entity.company+' ':'')+date[0]+' - '+date[1]+'费用统计.xlsx';
              link.click();
              this.$message.success('导出成功')
            }
          }
        })
      },
      getTotal(){
        this.$axios.post(this.$api.insOrder.costStatistics2, {
          entity:this.componentData.entity
        }, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).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.componentData.entity.dates = `["${startDate}","${endDate}"]`
      },
      getCompanyOptions () {
        this.$axios.post(this.$api.user.selectCustomPageList, {
          page: this.page,
          entity: this.entity
        }, {
          headers: {
            'Content-Type': 'application/json'
          }
          }
        ).then(res => {
          if (res.code === 200) {
            const list = res.data.body.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.$refs['ValueTable'].selectList()
        this.getTotal()
      },
      refresh() {
        this.componentData.entity = this.HaveJson(this.entityCopy)
        this.componentData.init = true
        this.getDates()
        this.getTotal()
        this.upIndex++
      },
      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())
      // 权限分配
      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 (power[i].menuMethod == 'export') {
            this.isExport = 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>