| | |
| | | <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> |
| | | <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"> |
| | | <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="componentData.entity.sample" |
| | | 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.sample" @keyup.enter.native="refreshTable()"></el-input></div> |
| | | </div> |
| | | <div class="search_thing"> |
| | | <div class="search_label">状态:</div> |
| | | <div class="search_input"> |
| | | <el-select v-model="componentData.entity.status" placeholder="全部" size="small"> |
| | | <el-option |
| | | v-for="item in statusList" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </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> |
| | | <div class="table"> |
| | | <ValueTable ref="ValueTable" :url="$api.insOrder.selectInsOrderParameter" :componentData="componentData" |
| | | :key="upIndex" @handleWeave="handleWeave"/> |
| | | </div> |
| | | </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: { |
| | | entrustCode: null, |
| | | sample: null, |
| | | state: 1, |
| | | orderBy: { |
| | | field: '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, |
| | | statusList:[], |
| | | claimVisible:false |
| | | } |
| | | }, |
| | | 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> |