diff --git a/package.json b/package.json index fa283ae..1e1c474 100644 --- a/package.json +++ b/package.json @@ -91,6 +91,7 @@ "connect": "3.6.6", "eslint": "7.15.0", "eslint-plugin-vue": "7.2.0", + "html-webpack-plugin": "^5.6.0", "lint-staged": "10.5.3", "runjs": "4.4.2", "sass": "1.32.13", diff --git a/src/views/integrationApi/apiAdmin.vue b/src/views/integrationApi/apiAdmin.vue index 9dc2b12..8de7669 100644 --- a/src/views/integrationApi/apiAdmin.vue +++ b/src/views/integrationApi/apiAdmin.vue @@ -792,5 +792,6 @@ export default { // /deep/ .ace_editor { // height: 90vh !important; // } + } </style> diff --git a/src/views/integrationOptionV2/index.vue b/src/views/integrationOptionV2/index.vue index 0bcd484..d748d44 100644 --- a/src/views/integrationOptionV2/index.vue +++ b/src/views/integrationOptionV2/index.vue @@ -2,38 +2,38 @@ <div class="wrap"> <div class="tree" v-if="$route.query.viewType === '1'" style="flex:0.18"> <BaseMenuTree - :menuData="treeData" - :filterShow="false" - :Allshow="false" - :treeButton="false" - :filterButtonShow="false" - style="height: 100%" - :treeProps="treeProps" - @handleNodeClick="homeHandleNodeClick" - ref="menuTree" + :menuData="treeData" + :filterShow="false" + :Allshow="false" + :treeButton="false" + :filterButtonShow="false" + style="height: 100%" + :treeProps="treeProps" + @handleNodeClick="homeHandleNodeClick" + ref="menuTree" ></BaseMenuTree> </div> <div class="main" :style="{flex:$route.query.viewType === '1'?0.82:1}" v-loading="mainLoading"> <div class="top"> <div class="search"> <BaseNewForm - v-loading="searchLoading" - refName="searchForm" - :formRow="searchFormRow" - :formRule="false" - :ruleForm="searchForm" - :newFlag="true" - :treeSelectInfo="treeSelectInfo" - :isFunBtn="false" + v-loading="searchLoading" + refName="searchForm" + :formRow="searchFormRow" + :formRule="false" + :ruleForm="searchForm" + :newFlag="true" + :treeSelectInfo="treeSelectInfo" + :isFunBtn="false" ></BaseNewForm> </div> <div class="btnList"> <div class="btnItem" v-for="item in searchButton" :key="item.buttonType"> <el-button - type="primary" - size="mini" - @click="buttonHandle(item)" - v-btnPermission="{ btnID: item.buttonType, routeId: $route.meta.id }" + type="primary" + size="mini" + @click="buttonHandle(item)" + v-btnPermission="{ btnID: item.buttonType, routeId: $route.meta.id }" >{{ item.buttonName }} </el-button> </div> @@ -41,18 +41,18 @@ </div> <div class="table"> <BaseTable - ref="mainTable" - :treeSelectInfo="treeSelectInfo" - :tableData="tableData" - :tableColumn="tableColumn" - :funData="mainFunData" - :funWidth="funWidth" - :showIndex="true" - :tabLoading="mainTabLoading" - @onFunc="tableButtonHandle" - @selectValueGeT="selectValueGeTHandle" - :tableHeight="'67vh'" - :border="false" + ref="mainTable" + :treeSelectInfo="treeSelectInfo" + :tableData="tableData" + :tableColumn="tableColumn" + :funData="mainFunData" + :funWidth="funWidth" + :showIndex="true" + :tabLoading="mainTabLoading" + @onFunc="tableButtonHandle" + @selectValueGeT="selectValueGeTHandle" + :tableHeight="'67vh'" + :border="false" > <template #data_status="{row}"> {{ data_status_dist[row.data_status] }} @@ -60,8 +60,8 @@ </BaseTable> <div class="nextPage"> <BasePage - :pageModel="pageModel" - @update:pageModel="currentChangeHandle" + :pageModel="pageModel" + @update:pageModel="currentChangeHandle" ></BasePage> </div> </div> @@ -72,15 +72,15 @@ </h1> <div class="dialogForm" v-if="dialogShow" style="padding: 0 20px"> <BaseNewForm - :treeSelectInfo="treeSelectInfo" - :loading="dialogCommitLoading" - :formRow="formRow" - :ruleForm="ruleForm" - :lookFlag="lookFlag" - :newFlag="newFlag" - @onSubmit="onSubmitHandele" - :isFunBtn="false" - ref="dialogForm" + :treeSelectInfo="treeSelectInfo" + :loading="dialogCommitLoading" + :formRow="formRow" + :ruleForm="ruleForm" + :lookFlag="lookFlag" + :newFlag="newFlag" + @onSubmit="onSubmitHandele" + :isFunBtn="false" + ref="dialogForm" ></BaseNewForm> </div> <template v-for="(item, index) in dialogTabaleInfo"> @@ -89,17 +89,17 @@ {{ item.title }} </h1> <BaseTableForm - :lookflag="lookFlag" - :showIndex="true" - :treeSelectInfo="treeSelectInfo" - :indexOperate="true" - :tableInfo="item" - @newRow="dialogTableAddHandle" - @onFunc="dialogTableDeleHandle" - :funData="dialogfunData" - :border="false" - :formIndex="index" - table-height="30vh" + :lookflag="lookFlag" + :showIndex="true" + :treeSelectInfo="treeSelectInfo" + :indexOperate="true" + :tableInfo="item" + @newRow="dialogTableAddHandle" + @onFunc="dialogTableDeleHandle" + :funData="dialogfunData" + :border="false" + :formIndex="index" + table-height="30vh" ></BaseTableForm> </div> @@ -112,14 +112,14 @@ <div class="title">分发</div> <div class="value" style="margin-left: 20px"> <el-select - v-model="sendCheckboxList" - placeholder="请选择" + v-model="sendCheckboxList" + placeholder="请选择" > <el-option - v-for="item in sendTableData" - :key="item.id" - :label="item.name" - :value="item.id" + v-for="item in sendTableData" + :key="item.id" + :label="item.name" + :value="item.id" > </el-option> </el-select> @@ -129,14 +129,14 @@ <div class="title">类型</div> <div class="value" style="margin-left: 20px"> <el-select - v-model="sendCheckboxType" - placeholder="请选择" + v-model="sendCheckboxType" + placeholder="请选择" > <el-option - v-for="item in sendTableTypeOptions" - :key="item.id" - :label="item.name" - :value="item.id" + v-for="item in sendTableTypeOptions" + :key="item.id" + :label="item.name" + :value="item.id" > </el-option> </el-select> @@ -146,25 +146,21 @@ <el-button type="primary" @click="sendRowHandle()">下发 </el-button> </div> - </div> - <!-- <baseTable--> - <!-- :tableData="sendTableData"--> - <!-- :tableColumn="sendTableColumn"--> - <!-- >--> - <!-- <template v-slot:status="{row}">--> - <!-- {{ sendDist[row.status] }}--> - <!-- </template>--> - <!-- <template v-slot:fun="{row}">--> - <!-- <el-button v-if="row.status === '1'||row.status === '2'" type="danger" @click="sendRowHandle(row)">删除--> - <!-- </el-button>--> - <!-- <el-button v-if="row.status === '3'||row.status === '4'" type="primary" @click="sendRowHandle(row)">下发--> - <!-- </el-button>--> - <!-- </template>--> - <!-- </baseTable>--> + </div>` + </baseDialog> + <baseDialog width="30%" v-model="dataDistDialog" :footerShow="false" title="查看数据格式"> + <vue-json-editor + class="editor" + v-model="authInfo" + :showBtns="false" + :mode="'code'" + /> + </baseDialog> </div> </template> <script> +import vueJsonEditor from "vue-json-editor"; import { deepClone } from '@/utils/index.js' import { getUserModuleApi } from '@/api/integrationOption/integrationOption.js' import BaseNewForm from './compoments/baseNewForm' @@ -300,7 +296,9 @@ export default { name: '删除' } ], - rowId: '' + rowId: '', + dataDistDialog:false, + authInfo:{}, } }, methods: { @@ -478,16 +476,32 @@ export default { cancelButtonText: '取消', type: 'warning' }) - .then(() => { - this.deleRowHanlde(row.id) + .then(() => { + this.deleRowHanlde(row.id) - }) - .catch((error) => { - }) + }) + .catch((error) => { + }) } else if (item.type === 'send') { this.sendHandle(row.id) + } else if (item.type === 'viewData') { + this.getDataDist(row.id) } }, + //查看数据格式方法 + async getDataDist(id) { + const res = await getUserModuleApi({ + tl: 'mdmService', + as: '', + dj: 'queryMdmShowDetailsDictionary' + }, { + mdmCode: this.$route.meta.mdmCode, + id: id + }) + console.log(res, 'res') + this.dataDistDialog = true + this.authInfo = res.attribute + }, // 分页器更新数据 currentChangeHandle(pageModel) { this.pageModel = pageModel @@ -552,15 +566,15 @@ export default { cancelButtonText: '取消', type: 'warning' }) - .then(() => { - this.dialogTabaleInfo[index].tableData.splice(row.index, 1) - this.$message({ - type: 'success', - message: '删除成功!' - }) - }) - .catch((error) => { + .then(() => { + this.dialogTabaleInfo[index].tableData.splice(row.index, 1) + this.$message({ + type: 'success', + message: '删除成功!' }) + }) + .catch((error) => { + }) } }, //dialog表格提交 @@ -694,20 +708,20 @@ export default { showType: '4' }) res.attribute.mainMdmModuleDb.sublistMdmModuleDbFileds.forEach(item => { - item.mdmModuleDbFiledsRules.forEach(ele => { - if (ele.ruleCode === 'required' || ele.ruleCode === 'disabled') { - if (!ele.ruleValue) { - item[ele.ruleCode] = false - } else { - item[ele.ruleCode] = JSON.parse(ele.ruleValue) - } + item.mdmModuleDbFiledsRules.forEach(ele => { + if (ele.ruleCode === 'required' || ele.ruleCode === 'disabled') { + if (!ele.ruleValue) { + item[ele.ruleCode] = false } else { - item[ele.ruleCode] = ele.ruleValue + item[ele.ruleCode] = JSON.parse(ele.ruleValue) } + } else { + item[ele.ruleCode] = ele.ruleValue + } - item['id'] = item.enName - }) - } + item['id'] = item.enName + }) + } ) this.dialogFormName = res.attribute.mainMdmModuleDb.dbName this.formRow = [] @@ -744,7 +758,7 @@ export default { if (data.status === '200') { this.ruleForm = data.attribute[this.mainTableName] console.log(this.ruleForm, - '123' + '123' ) console.log(this.ruleForm, this.mainTableName, data.attribute, '123') this.dialogTabaleInfo.forEach(table => { @@ -939,12 +953,13 @@ export default { BasePage, BaseTable, BaseNewForm, - baseDialog + baseDialog, + vueJsonEditor } , computed: { funWidth() { - return this.mainFunData.length * 70 + return this.mainFunData.length * 90 } } @@ -1008,4 +1023,17 @@ export default { border-radius: 8px; } </style> +<style lang="less" scoped> + +//.code-json-editor { +/* jsoneditor右上角默认有一个链接,加css去掉 */ +/deep/ .jsoneditor-poweredBy { + display: none !important; +} +/deep/ .ace-jsoneditor { + height: 350px !important; +} + +//} +</style> diff --git a/src/views/intergrationTask/taskLogdetailData/index.vue b/src/views/intergrationTask/taskLogdetailData/index.vue index b9dd538..c0b762e 100644 --- a/src/views/intergrationTask/taskLogdetailData/index.vue +++ b/src/views/intergrationTask/taskLogdetailData/index.vue @@ -119,7 +119,7 @@ export default { tableData: [], //表格数据 pageModel: { pageNum: 1, - pageSize: 10 + pageSize: 100 }, queryModel: { plugin_id: '', diff --git a/src/views/masterDataOptions/displayInfo/index.vue b/src/views/masterDataOptions/displayInfo/index.vue index 69b771a..6da49c2 100644 --- a/src/views/masterDataOptions/displayInfo/index.vue +++ b/src/views/masterDataOptions/displayInfo/index.vue @@ -266,10 +266,16 @@ export default { buttonName: '查看', buttonValue: 'view', buttonType: '6' - }, { + }, + { buttonName: '下发', buttonValue: 'send', buttonType: '7' + }, + { + buttonName: '查看数据格式', + buttonValue: 'viewData', + buttonType: '8' } ],//所有按钮 dist: { diff --git a/src/views/masterDataOptions/displayInfo/settingChunk.vue b/src/views/masterDataOptions/displayInfo/settingChunk.vue index bc41bb3..43a7797 100644 --- a/src/views/masterDataOptions/displayInfo/settingChunk.vue +++ b/src/views/masterDataOptions/displayInfo/settingChunk.vue @@ -93,6 +93,11 @@ export default { buttonName: '下发', buttonValue: 'send', buttonType: '7' + }, + { + buttonName: '查看数据格式', + buttonValue: 'viewData', + buttonType: '8' } ],//所有按钮 //key字段【'待选字段',‘选中字段’,viewType】 diff --git a/src/views/systemReports/u8positiveReports/baseNewTable2/baseTable/index.vue b/src/views/systemReports/u8positiveReports/baseNewTable2/baseTable/index.vue new file mode 100644 index 0000000..9a81e0f --- /dev/null +++ b/src/views/systemReports/u8positiveReports/baseNewTable2/baseTable/index.vue @@ -0,0 +1,708 @@ +<!-- +* @name: 自定义 el-table +* @author: Zhangpengcheng +* @date: 2022-08-30 +* tabLoading 加载 headerStyle表头格式 tableData数据 border纵向边框 @current-change单选触发 summary-method合计 @cell-click某个单元格点击触发事件 @sort-change触发后台排序 +* @row-click 当某一行被点击时会触发该事件 highlight-current-row是否高亮 show-summary是否合计 SummariesIndex合计需要的index @selection-change多选 tableHeight高度 +* :style="'height:'+ tableHeight + '!important'" +--> +<template> + <!-- :row-class-name="tableRowClassName" --> + <span style="position: relative"> + <el-table + v-loading="tabLoading" + ref="elTable" + :header-cell-style="headerStyle" + :data="tableData" + :border="border" + :min-width="minWidth" + :summary-method="getSummaries" + :row-class-name="tableRowClassName" + :size="size" + :row-key="getRowKey" + :max-height="tableMaxHeight" + :height="tableHeight" + @cell-click="getCellClick" + @row-click="getRowClick" + @current-change="handleCurrentChange" + :highlight-current-row="highlightCurrent" + :show-summary="showsummary" + :SummariesIndex="SummariesIndex" + @row-dblclick="rowDblclick" + @selection-change="handleSelectionChange" + @select="select" + @select-all="selectAll" + style="width: 100%" + :cell-class-name="tableCellName" + :style="'min-height:' + minHeight + ';max-height:' + maxHeight" + @sort-change="sortChange" + :key="itemKey" + @cell-dblclick="doubleClick" + fit + :span-method="objectSpanMethod" + > + <el-table-column + align="center" + :reserve-selection="true" + v-if="showSelect" + type="selection" + width="55" + > + </el-table-column> + + <el-table-column + label="序号" + align="center" + type="index" + v-if="showIndex" + width="50" + > + <template slot-scope="scope"> + <div v-if="indexOperate" style="text-align: center"> + <p v-if="scope.$index + 1 != tableData.length"> + {{ scope.$index + 1 }} + </p> + <el-button + type="primary" + plain + icon="el-icon-plus" + circle + v-else + size="mini" + @click="newRow" + > + </el-button> + </div> + <p v-else>{{ scope.$index + 1 }}</p> + </template> + </el-table-column> + + <el-table-column label="单选" align="center" v-if="slotrow" width="50"> + <template slot-scope="scope"> + <!-- 定义插槽:父组件可以使用 v-slot:prop="{row}" 搭配template标签,自定义每一列单元格的样式与操作 --> + <el-radio v-model="radioIndex" :label="scope.$index" + ><span></span + ></el-radio> + </template> + </el-table-column> + + <el-table-column + v-for="(item, ind) in tableColumn" + :key="ind" + :width="item.width ? item.width : 'auto'" + :label="item.label" + :prop="item.prop" + :show-overflow-tooltip="item.tooltip" + :sortable="item.sortable" + :align="item.align ? item.align : 'center'" + :min-width="item.minWidth ? item.minWidth : '100px'" + header-align="center" + :fixed="item.fixed" + > + <!-- :isClick="item.other && item.other.isClick ? item.other.isClick : false" --> + <template slot-scope="scope"> + <!-- 定义插槽:父组件可以使用 v-slot:prop="{row}" 搭配template标签,自定义每一列单元格的样式与操作 --> + <slot :name="item.prop" :row="slotrow ? scope : scope.row"> + <!-- 插槽后备内容:如父组件不使用插槽则使用后备内容 --> + <span + :style="{ + color: item.color ? item.color : '#333', + cursor: item.isClick ? 'pointer' : 'default', + }" + > + {{ + !item.stateOption + ? scope.row[item.prop] + : item.stateOption[scope.row[item.prop]] | timeFiter + }} + </span> + </slot> + </template> + </el-table-column> + <el-table-column + label="操作" + :width="funWidth" + v-if="funData.length != 0" + align="center" + header-align="center" + :fixed="fixedTable" + style="border-radius: 0 10px 10px 0" + > + <template slot-scope="scope"> + <div flex="cross:center main:center"> + <div + v-for="(item, index) in funData" + :key="index" + :class="{ 'mr-12': index + 1 != funData.length }" + @click.stop="funcEmit(index, scope.row, item)" + class="btnText" + > + <span + :style="'color:' + item.color" + v-if="!item.ifField && !item.hiddenField" + >{{ item.text }}</span + > + <span + :style="{ + color: + scope.row[item.ifField] == item.fieldVal + ? item.fieldColor + : item.color, + }" + v-if="item.ifField" + > + {{ + scope.row[item.ifField] == item.fieldVal + ? item.fieldTxt + : item.text + }} + </span> + </div> + </div> + </template> + </el-table-column> + <!-- 操作 、自定义插槽 --> + <slot v-else></slot> + </el-table> + <div class="buttom"> + <el-button + type="primary" + plain + icon="el-icon-plus" + circle + size="mini" + @click="newRow" + class="bottom" + v-if="tableData.length == 0 && bottomPlus == true" + ></el-button> + </div> + </span> +</template> +<script> +import Sortable from "sortablejs"; +import { v4 as uuidv4 } from "uuid"; +export default { + props: { + // 最大高度 + tableMaxHeight: { + type: [String, Number], + }, + // loading + tabLoading: { + type: Boolean, + default: false, + }, + // 序号操作icon + indexOperate: { + type: Boolean, + default: false, + }, + // 固定列 + fixedTable: { + type: [Boolean, String], + default: "right", + }, + // 读取字段 + slotrow: { + type: Boolean, + default: false, + }, + showsummary: { + type: Boolean, + default: false, + }, + // 表格高度 + tableHeight: { + type: [Number, String], + default: "auto", + }, + minHeight: { + type: [Number, String], + default: "auto", + }, + maxHeight: { + type: [Number, String], + default: "auto", + }, + // 表格高度 + // windowHight: { + // type: [ String], + // default: 'auto' + // }, + // 表格尺寸 + size: { + type: String, + default: "small", + }, + // 表格数据 + tableData: { + type: Array, + default: () => { + return []; + }, + }, + // 表头数据 + tableColumn: { + type: Array, + default: () => { + return []; + }, + }, + // 合计的index + SummariesIndex: { + type: Array, + default: () => { + return []; + }, + }, + // 是否显示选择框 + showSelect: { + type: Boolean, + default: false, + }, + // 是否显示序号 + showIndex: { + type: Boolean, + default: false, + }, + // 操作选项 + funData: { + type: Array, + default: () => { + return []; + }, + }, + // 操作按钮宽度 + funWidth: { + type: Number, + default: 80, + }, + // 是否带有纵向边框 + border: { + type: Boolean, + default: true, + }, + minWidth: { + type: String, + default: "100px", + }, + + // 单选是否高亮 + highlightCurrent: { + type: Boolean, + default: false, + }, + // 默认拖动 + sortableSwitch: { + type: Boolean, + default: false, + }, + // 表格为空时的添加按钮 + bottomPlus: { + type: Boolean, + default: false, + }, + // headerStyle:{ + // type: String, + // default:{ + // 'background-color': '#F5F5F5', + // 'color': '#333333', + // }, + // } + tableDataMergeList: { + type: Array, + default: () => { + return []; + }, + }, + }, + data() { + return { + headerStyle: { + "background-color": "#F5F5F5", + color: "#333333", + }, + itemKey: true, + radioIndex: false, + }; + }, + created() {}, + mounted() { + this.rowDrop(); + // 解决滚动条问题 + // var tableBody = this.$refs.elTable.$refs.footerWrapper + // tableBody.addEventListener('scroll', () => { + // // 滚动距离 + // const scrollLeft = tableBody.scrollLeft + // this.$refs.elTable.$refs.bodyWrapper.scrollLeft = scrollLeft + // }) + }, + filters: { + timeFiter(val) { + if (!val && val != 0) { + return; + } else { + let returnData = val; + if (typeof val != "number" && typeof val != "boolean") { + // console.log(val,"asdasdad") + returnData = val.split("T").join(" "); + } + return returnData; + // return val + } + }, + }, + computed: {}, + watch: { + tableData: { + deep: true, + handler(newV, oldV) { + newV.forEach((el, index) => { + el.sort = index; + }); + // this.setTableKey() + }, + }, + }, + methods: { + objectSpanMethod({ row, column }) { + if (this.tableDataMergeList.includes(column.property)) { + if (row[`${column.property}Length`]) { + return { + rowspan: row[`${column.property}Length`], + colspan: 1, + }; + } else { + return { + rowspan: 0, + colspan: 0, + }; + } + } + }, + uuidKey() { + return uuidv4(); + }, + setCurrent(row) { + this.$refs.elTable.setCurrentRow(row); + }, + select(selection, row) { + this.$emit("select", selection, row); + }, + selectAll(selection) { + this.$emit("selectAll", selection); + }, + setTableKey() { + this.itemKey = !this.itemKey; + }, + // 单元格双击事件 + doubleClick(row, column, cell, event) { + this.$emit("doubleClick", row, column, cell, event); + }, + // 取消多选 + clearSelect() { + this.$refs.elTable.clearSelection(); + }, + /** + * @description 单元格点击事件 + * @author duanyipeng + * @createDate 2020/7/6 21:36 + * @param { Object } row 每一行数据 + * @param { Object } column 选中单元格表头数据 + * @use { + * other:{ + * isClick:true + * } + * } + */ + getCellClick(row, column) { + let label = column.label; + // let itemColumn = this.tableColumn.filter(item => { + // return item.label === label + // }) + // if (itemColumn[0] && itemColumn[0].other && itemColumn[0].other.isClick) { + // this.$emit('onCellClick', row, label) + // } + this.$emit("onCellClick", row, label); + }, + // 每一行点击事件 + getRowClick(row, column, event) { + this.handleCurrentChange(row); + this.$emit("onRowClick", row, event); + }, + // 每一行双击点击事件 + rowDblclick(row, column, event) { + this.$emit("rowDblclick", row); + }, + // 保存选中的数据id,row-key就是要指定一个key标识这一行的数据 + getRowKey(row) { + return uuidv4(); + }, + // 多选事件 + handleSelectionChange(selectTable) { + this.$emit("onSelectionChange", selectTable); + }, + /** + * 触发操作事件 + * 参数1:当前按钮索引 + * 参数2:当前按钮所在行数据 + */ + funcEmit(index, row, item) { + this.$emit("onFunc", index, row, item); + }, + // 排序改变 降序:descending;升序ascending + sortChange(column) { + this.$emit("sortChange", column.prop, column.order); + }, + //单选 + handleCurrentChange(val) { + this.radioIndex = val.index; + this.$emit("radioChange", val); + }, + clearRadioIndex() { + this.radioIndex = false; + }, + setRadioIndex(index) { + this.radioIndex = index; + }, + // 添加index + tableCellName({ row, column, rowIndex, columnINdex }) { + row.index = rowIndex; + column.index = columnINdex; + }, + // tableRowClassName({ row,rowIndex}) { + // if (rowIndex === 1) { + // return 'warning-row'; + // } else if (rowIndex === 3) { + // return 'success-row'; + // } + // return ''; + // }, + tableRowClassName: function ({ row, rowIndex }) { + let data = ""; + this.$emit( + "row-class-name", + { + row: row, + rowIndex: rowIndex, + }, + (val) => { + data = val; + } + ); + return data; //属性名必须返回一个string + }, + newRow() { + let arr = this.getAddRowData(); + this.$emit("newRow", arr); + this.$nextTick(() => { + this.$refs.elTable.bodyWrapper.scrollTop = + this.$refs.elTable.bodyWrapper.scrollHeight; + this.$refs.elTable.doLayout(); + }); + }, + getAddRowData() { + let arr = {}; + this.tableColumn.forEach((el) => { + arr[el.prop] = ""; + }); + return arr; + }, + //行拖拽,排序方法 + rowDrop() { + if (!this.sortableSwitch) { + return; + } + const el = this.$refs.elTable.$el.querySelectorAll( + ".el-table__body-wrapper > table > tbody" + )[0]; + this.sortable = Sortable.create(el, { + ghostClass: "sortable-ghost", + setData: function (dataTransfer) { + dataTransfer.setData("Text", ""); + }, + onEnd: (evt) => { + const targetRow = this.tableData.splice(evt.oldIndex, 1)[0]; + this.tableData.splice(evt.newIndex, 0, targetRow); + }, + }); + }, + // 默认选择 + toggleSelection(rowData, selected) { + if (rowData) { + rowData.forEach((row) => { + this.$refs.elTable.toggleRowSelection(row, selected); + }); + } else { + this.$refs.elTable.clearSelection(); + } + }, + handlerSpanMethod(row, column, rowIndex, columnIndex) { + this.$emit("spanMethod", row, column, rowIndex, columnIndex); + }, + // 合计 + getSummaries(params) { + const { columns, data } = params; + const sums = []; + columns.forEach((column, index) => { + if (index === 0) { + sums[index] = "合计"; + return; + } + this.SummariesIndex.forEach((el) => { + if (index == el) { + const values = data.map((item) => Number(item[column.property])); + if (!values.every((value) => isNaN(value))) { + sums[index] = values.reduce((prev, curr) => { + const value = Number(curr); + if (!isNaN(value)) { + return prev + curr; + } else { + return prev; + } + }, 0); + sums[index] = sums[index].toFixed(2); + } else { + sums[index] = ""; + } + } + }); + }); + this.$emit("sums", sums); + + return sums; + }, + }, +}; +</script> + +<style> +.el-table .warning-row { + background: #ffe562; +} + +.el-table .success-row { + background: #acf389; +} + +.el-table .denger-row { + background: #e13501; +} + +.fiexTableBottm { + position: sticky; + bottom: 0; +} +</style> +<style scoped lang="scss"> +.btnText { + cursor: pointer; +} + +.mr-12 { + margin-right: 12px; +} + +::v-deep .cell { + font-weight: 400; +} + +.buttom { + ::v-deep .el-button--mini.is-circle { + position: absolute; + top: 50px; + left: 10px; + } +} + +::v-deep .el-table__cell:last-child { + border-radius: 0 10px 10px 0; +} + +// ::v-deep .el-table .sort-caret.ascending { +// top: 1px +// } + +// ::v-deep .el-table .sort-caret.descending { +// bottom: 2px +// } + +// ::v-deep .el-table .caret-wrapper { +// height: 23px; +// } + +// 解决滚动条问题 +// div ::v-deep .el-table--scrollable-x .el-table__body-wrapper{overflow-x: hidden!important;z-index: 2!important;} +// div ::v-deep .el-table__footer-wrapper {overflow-x: auto;border-top: 1px solid #f4f4f4;} +// ::v-deep .el-table { +// overflow-x: auto; +// } +// ::v-deep .el-table__header-wrapper, +// ::v-deep .el-table__body-wrapper, +// ::v-deep .el-table__footer-wrapper { +// overflow: visible; +// } +// ::v-deep .el-table::after { +// position: relative; +// } +// ::v-deep .el-table--scrollable-x ::v-deep .el-table__body-wrapper { +// overflow: visible; +// } +// ::v-deep .el-table { .el-table__body-wrapper { z-index: 2; } } +::v-deep.el-table { + width: 100%; + margin-bottom: 0vh !important; + + &::before { + display: none; + } + + .el-table__body { + -webkit-border-vertical-spacing: 0px !important; // 垂直间距 设置的是行间距 + } + + //以下代码是实现边框效果 + thead th { + font-size: 14px; + color: #575757 !important; + + &:nth-last-child(2) { + border-right: 1px solid rgba(0, 0, 0, 0.1) !important; + border-radius: 0 5px 5px 0; + right: 1px; + } + } + + thead th, + .el-table__row td { + font-size: 18px; + font-family: PingFangSC-Semibold, PingFang SC; + font-weight: 600; + border-top: 1px solid rgba(0, 0, 0, 0.1) !important; + border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; + + &:first-child { + border-left: 0px solid rgba(0, 0, 0, 0.1) !important; + border-radius: 0px 0 0 0px !important; + } + } + + .el-table__row > td { + font-size: 12px; + color: #333333; + + &:last-child { + border-left: 0px solid rgba(0, 0, 0, 0.1) !important; + border-radius: 0px 0 0 0px !important; + } + } + + .el-table__body tr:hover > td.el-table__cell { + background-color: #eef5fe !important; + } + + .el-table__fixed::before { + display: none; + } +} +</style> diff --git a/src/views/systemReports/u8positiveReports/baseNewTable2/index.vue b/src/views/systemReports/u8positiveReports/baseNewTable2/index.vue new file mode 100644 index 0000000..efbcdb8 --- /dev/null +++ b/src/views/systemReports/u8positiveReports/baseNewTable2/index.vue @@ -0,0 +1,198 @@ +<template> + <div class="wrapTable"> + <div class="RightBtnList"> + <el-tooltip + class="item" + effect="dark" + :content="item.title" + placement="top" + v-for="(item, index) in fixedButtonList" + :key="index" + trigger="hover" + > + <span> + <el-button + size="mini" + :icon="item.icon" + @click.stop=" + fixedClick( + item, + '#mainTable', + '机台排产表', + mainTableData, + mainTableColumn + ) + " + style="margin: 0" + ></el-button> + </span> + </el-tooltip> + </div> + <div class="table"> + <base-table + v-loading="tableLoading" + :showIndex="false" + :tableData="tableData" + :tableColumn="tableColumn" + :tableDataMergeList="tableDataMergeList" + tableHeight="70vh" + id="mainTable" + > + <template #new_state="{row}"> + <div> + {{ row.new_state === 'Y' ? "成功" : row.new_state === 'N' ? "失败" : "" }} + </div> + </template> + </base-table> + </div> + <div class="page"> + <el-pagination + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + :current-page="pageModel.pageNum" + :page-sizes="[10, 20, 40, 100,5000,9999]" + :page-size="pageModel.pageSize" + layout="total, prev, pager, next,sizes, jumper" + :total="pageModel.pageTotal" + > + </el-pagination> + </div> + </div> +</template> + +<script> +import baseTable from "./baseTable/index.vue"; +//导出excel使用 +import XLSX from "xlsx"; +import FileSaver from "file-saver"; +//打印 +import {basePrintJS} from "@/utils/util"; + +export default { + name: "baseNewTable", + props: { + tableData: { + type: Array, + default: () => { + return []; + }, + }, + tableColumn: { + type: Array, + default: () => { + return []; + }, + }, + tableLoading: {type: Boolean, default: false}, + exportEventName: {type: String, default: "导出文件名"}, + tableDataMergeList: { + type: Array, + default: () => { + return []; + }, + }, + pageModel: { + type: Object, + default: () => { + return { + page: 1, + limit: 10, + pageTotal: 99, + }; + }, + }, + }, + data() { + return { + fixedButtonList: [ + { + icon: "el-icon-printer", + title: "打印", + }, + { + icon: "el-icon-folder", + title: "导出", + }, + ], + }; + }, + methods: { + /* + * 导出、打印功能 + * item:当前按钮信息 + * boxId:打印表单id(仅导出) + * name:导出后文件名(仅导出) + * tableData:传打印表格当前tableData(仅打印) + * tableColumn:传打印表格当前tableColumn(仅打印) + * */ + fixedClick(item, boxId, name) { + if (item.title == "导出") { + this.exportEvent(name, boxId); + } else if (item.title == "打印") { + this.duplicate(); + } + }, + //导出功能 + exportEvent(excelName, boxId) { + let gatherData = { + raw: true, + }; + let grid = XLSX.utils.table_to_book( + document.querySelector(boxId), + gatherData + ); + let workbook = XLSX.write(grid, { + bookType: "xlsx", + bookSST: true, + type: "array", + }); + try { + FileSaver.saveAs( + new Blob([workbook], { + type: "application/octet-stream", + }), + this.exportEventName + ".xlsx" + ); + } catch (e) { + if (typeof console !== "undefined") console.log(e, workbook); + } + return workbook; + }, + //打印 + duplicate() { + basePrintJS(this.tableData, this.tableColumn); + }, + //页码size改变 + handleSizeChange(val) { + console.log(val); + this.$emit("pageSizeChange", val); + }, + //页码改变 + handleCurrentChange(val) { + this.$emit("pageChange", val); + }, + }, + components: { + baseTable, + }, +}; +</script> + +<style scoped lang="scss"> +.wrapTable { + > .RightBtnList { + display: flex; + justify-content: flex-end; + } + + > .table { + margin-top: 10px; + } + + > .page { + margin-top: 10px; + display: flex; + justify-content: flex-end; + } +} +</style> diff --git a/src/views/systemReports/u8positiveReports/tocPositive.vue b/src/views/systemReports/u8positiveReports/tocPositive.vue new file mode 100644 index 0000000..b5aeede --- /dev/null +++ b/src/views/systemReports/u8positiveReports/tocPositive.vue @@ -0,0 +1,600 @@ +<template> + <div class="MachineSchedulingTable"> + <!-- 搜索框--> + + <div class="search"> + <div class="datepickBox" style=""> + <el-date-picker + v-model="queryCriteria.business_date_start" + type="date" + placeholder="选择开始日期" + value-format="yyyy-MM-dd" + > + </el-date-picker> + </div> + <div class="datepickBox" style=""> + <el-date-picker + v-model="queryCriteria.business_date_end" + type="date" + placeholder="选择结束时间" + value-format="yyyy-MM-dd" + > + </el-date-picker> + </div> + <div class="radio"> + <el-select v-model="queryCriteria.new_state" placeholder="请选择"> + <el-option + v-for="item in stateOptions" + :key="item.value" + :label="item.label" + :value="item.value"> + </el-option> + </el-select> + </div> + <div class="chunk"> + <el-input v-model="queryCriteria.spec_no" placeholder="商家编码"></el-input> + </div> + <div class="chunk"> + <el-input v-model="queryCriteria.warehouse_no" placeholder="仓库编码"></el-input> + </div> + <div class="chunk"> + <el-input v-model="queryCriteria.warehouse_name" placeholder="仓库名称"></el-input> + </div> + <div class="chunk"> + <el-input v-model="queryCriteria.new_system_number" placeholder="U8C单号"></el-input> + </div> + <div class="chunk"> + <el-input v-model="queryCriteria.shop_name" placeholder="店铺名称"></el-input> + </div> + <div class="chunk"> + <el-input v-model="queryCriteria.shop_no" placeholder="店铺编码"></el-input> + </div> + <div class="chunk"> + <el-input v-model="queryCriteria.order_no" placeholder="旺店通出库单编码"></el-input> + </div> + <el-button + type="primary" + @click="query" + :loading="loading" + size="small" + style="width: 5%; margin: 10px 20px" + >查询 + </el-button> + <el-button + type="primary" + @click="downLoad" + :loading="loading" + size="small" + style="width: 5%; margin: 10px 20px" + >excel导出 + </el-button> + <el-button + type="warning" + @click="reset" + :loading="loading" + size="small" + style="width: 5%; margin: 10px 20px" + >重置 + </el-button> + </div> + <!-- 主体内容--> + <div class="main"> + <baseNewTable + :tableData="mainTableData" + :tableColumn="mainTableColumn" + :tableLoading="tableLoading" + :tableDataMergeList="tableDataMergeList" + :pageModel="pageModel" + @pageSizeChange="(val) => pageSizeChange(val, pageModel)" + @pageChange="(val) => pageChange(val, pageModel)" + exportEventName="Toc正向流程表" + > + </baseNewTable> + </div> + </div> +</template> + +<script> +import baseNewTable from "./baseNewTable2/index.vue"; +import {authApi, downFilesBasedFileNameFileTypeAPI} from "@/api/apis/auth"; +import { + basePrintJS, +} from "@/utils/util.js"; + +export default { + name: "MachineSchedulingTable", + data() { + return { + stateOptions: [ + {label: "全部", value: ""}, + {label: "成功", value: "Y"}, + {label: "失败", value: "N"}, + ], + //搜索框内容 + queryCriteria: { + "reportDate": "", + "business_date_start": "", + "business_date_end": "", + "new_state": "", + "spec_no": "", + "warehouse_no": "", + "warehouse_name": "", + "new_system_number": "", + "shop_name": "", + "shop_no": "", + "order_no": "" + }, + pageModel: { + "pageSize": 100, + "pageNum": 1, + pageTotal: 0, + }, + + //搜索按钮loading + loading: false, + //表单loading + tableLoading: false, + workshop: [], + //客户下拉 + queryCriteriaOption: [], + //色号下拉 + colorNumOption: [], + //批号下拉 + contractCodeOption: [], + //机台下拉 + workBenchIDOption: [], + //生产名称下拉 + cInvNameOption: [], + // 产品类型下拉 + cInvCNameOption: [], + //生产班组 + stateNameOption: [ + { + label: "甲", + value: "甲", + }, + { + label: "乙", + value: "乙", + }, + { + label: "丙", + value: "丙", + }, + ], + // 右侧按钮 + fixedButtonList: [ + { + icon: "el-icon-printer", + title: "打印", + }, + { + icon: "el-icon-folder", + title: "导出", + }, + ], + //正常表单 + mainTableData: [], + //缺少字段产品大类、本次生产重量 + mainTableColumn: [ + { + label: "是否成功", + prop: "new_state", + tooltip: true, + width: 150, + }, + { + label: "成功/失败原因", + prop: "new_transmit_info", + tooltip: true, + width: 150, + }, + { + label: "U8C销售单号", + prop: "new_system_number", + tooltip: true, + width: 150, + }, + { + label: "U8C销售主键", + prop: "new_system_primary", + tooltip: true, + width: 150, + }, + { + label: "旺店通品牌名称", + prop: "brand_name", + tooltip: true, + width: 150, + }, + { + label: "旺店通品牌编码", + prop: "barcode", + tooltip: true, + width: 150, + }, + { + label: "商家编码sku", + prop: "spec_no", + tooltip: true, + width: 150, + }, + { + label: "旺店通货品数量", + prop: "goods_count", + tooltip: true, + width: 150, + }, + { + label: "出库明细主键", + prop: "rec_id", + tooltip: true, + width: 150, + }, + { + label: "总货款", + prop: "share_amount", + tooltip: true, + width: 150, + }, + { + label: "仓库编码", + prop: "warehouse_no", + tooltip: true, + width: 150, + }, + { + label: "仓库名称", + prop: "warehouse_name", + tooltip: true, + width: 150, + }, + { + label: "出库单编码", + prop: "order_no", + tooltip: true, + width: 150, + }, + { + label: "旺店通店铺名称", + prop: "shop_name", + tooltip: true, + width: 150, + }, + { + label: "旺店通店铺编码", + prop: "shop_no", + tooltip: true, + width: 150, + }, + { + label: "发货日期(业务日期)", + prop: "consign_time", + tooltip: true, + width: 200, + }, + ], + //正常合并 + tableDataMergeList: [], + }; + }, + methods: { + async downLoad() { + if (this.queryCriteria.business_date_start && this.queryCriteria.business_date_end) { + let startDate = new Date(this.queryCriteria.business_date_start); + let endDate = new Date(this.queryCriteria.business_date_end); + let differenceInMillis = endDate - startDate; + let differenceInDays = differenceInMillis / (1000 * 60 * 60 * 24); + // 判断差值是否在15天以内 + if (!isNaN(differenceInDays) && differenceInDays < 31) { + } else { + this.$vmNews("开始时间和结束时间范围请选择在30天内"); + return + } + } else { + this.$vmNews("请选择开始时间和结束时间"); + return + } + let params = { + ...this.queryCriteria, + ...this.pageModel, + pageSize: 9999, + pageNum: 1 + }; + this.openLoading('detail') + const res = await authApi("busidataTocsalesServiceImpl", "busidataTocsalesServiceImpl", "queryToCSalesReportExcel", "", params); + + if (res.status == 200) { + const response = await downFilesBasedFileNameFileTypeAPI(res.attribute) + // console.log(res) + const url = window.URL.createObjectURL(new Blob([response]), {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}); + const link = document.createElement('a'); + link.href = url; + link.setAttribute('download', 'toc正向流程报表.xlsx'); // 设置下载的文件名 + document.body.appendChild(link); + link.click(); + } + return + + }, + reset() { + this.pageModel.pageNum = 1; + this.queryCriteria = { + "reportDate": "", + "business_date_start": "", + "business_date_end": "", + "new_state": "", + "spec_no": "", + "warehouse_no": "", + "warehouse_name": "", + "new_system_number": "", + "shop_name": "", + "shop_no": "", + "order_no": "" + }; + }, + //limit改变 + pageSizeChange(val, obj) { + obj.pageSize = val; + this.init(); + }, + //页码变更 + pageChange(val, obj) { + obj.page = val; + this.init(); + }, + //搜索联想 + async remoteMethod(val, row, options) { + // 客户 + if (row == "cusCode") { + const res = await GetCustomerListAPI(val); + this[options] = []; + if (res.code == 1) { + res.data[1].forEach((item) => { + this[options].push({label: item.cCusName, value: item.cCusCode}); + }); + } + } else if (row === "workBenchID") { + //这个不需要动态搜索 + if (this[options].length) return; + const res = await WorkbenchGetBillListAPI({ + page: 1, + limit: 999, + Sequence: "", + SequenceName: "", + CodeOrName: "", + areaID: "", + workShopID: "", + }); + this[options] = []; + if (res.code == 1) { + res.data[1].forEach((item) => { + this[options].push({ + label: item.workName, + value: item.workID, + }); + }); + } + } else if (row === "cInvCode") { + const res = await U8BaseGetInvenListAPI({ + page: 1, + limit: 200, + codeOrName: val, + }); + this[options] = []; + if (res.code == 1) { + res.data[1].forEach((item) => { + this[options].push({label: item.cInvName, value: item.cInvCode}); + }); + } + } else if (row === "cInvCCode") { + const res = await U8BaseGetInvClassListAPI({ + page: 1, + limit: 200, + codeOrName: val, + }); + this[options] = []; + if (res.code == 1) { + res.data[1].forEach((item) => { + this[options].push({ + label: item.cInvCName, + value: item.cInvCCode, + }); + }); + } + } + }, + // 点击查询 + query() { + this.pageModel.pageNum = 1; + if (this.queryCriteria.business_date_start && this.queryCriteria.business_date_end) { + let startDate = new Date(this.queryCriteria.business_date_start); + let endDate = new Date(this.queryCriteria.business_date_end); + let differenceInMillis = endDate - startDate; + let differenceInDays = differenceInMillis / (1000 * 60 * 60 * 24); + // 判断差值是否在15天以内 + if (!isNaN(differenceInDays) && differenceInDays < 11) { + } else { + this.$vmNews("开始时间和结束时间范围请选择在10天内"); + return + } + } else { + this.$vmNews("请选择开始时间和结束时间"); + return + } + this.init(); + }, + /* + * 导出、打印功能 + * item:当前按钮信息 + * boxId:打印表单id(仅导出) + * name:导出后文件名(仅导出) + * tableData:传打印表格当前tableData(仅打印) + * tableColumn:传打印表格当前tableColumn(仅打印) + * */ + fixedClick(item, boxId, name, tableData, tableColumn) { + if (item.title == "导出") { + this.exportEvent(name, boxId); + } else if (item.title == "打印") { + this.duplicate(tableData, tableColumn); + } + }, + //导出功能 + exportEvent(excelName, boxId) { + console.log(document.querySelector(boxId), "123", boxId); + let gatherData = { + raw: true, + }; + let grid = XLSX.utils.table_to_book( + document.querySelector(boxId), + gatherData + ); + let workbook = XLSX.write(grid, { + bookType: "xlsx", + bookSST: true, + type: "array", + }); + try { + FileSaver.saveAs( + new Blob([workbook], { + type: "application/octet-stream", + }), + excelName + ".xlsx" + ); + } catch (e) { + if (typeof console !== "undefined") console.log(e, workbook); + } + return workbook; + }, + //打印 + duplicate(tableData, tableColumn) { + basePrintJS(tableData, tableColumn); + }, + //初始化表单 + async init() { + this.tableLoading = true; + let params = { + ...this.queryCriteria, + ...this.pageModel, + }; + //初始化表单 + const res = await authApi("busidataTocsalesServiceImpl", "busidataTocsalesServiceImpl", "queryToCSalesReport", "", params); + console.log(res, '初始化res') + this.pageModel.pageTotal = res.attribute.total; + this.mainTableData = this.dataDispose( + res.attribute.list, + this.tableDataMergeList + ); + this.tableLoading = false; + }, + //data处理 + dataDispose(data, arr) { + if (!arr.length) return data; + //分类存放分组 + let tempObj = {}; + //结果 + let result = []; + //将层级转变为 [[1],[1,2],[1,2,3]] + const transformedArray = arr.reduce((acc, currentValue) => { + acc.push([...(acc.length ? acc[acc.length - 1] : []), currentValue]); + return acc; + }, []); + //开始对表单进行排序 + //排序后的arr + let newArr = []; + let sortObj = {}; + data.forEach((item) => { + let keyValue = ""; + arr.forEach((key2, index) => { + keyValue += item[key2]; + }); + if (!sortObj[keyValue]) { + sortObj[keyValue] = data.filter((item01) => { + return arr.every((prop) => item01[prop] === item[prop]); + }); + } + }); + Object.keys(sortObj) + .sort() + .forEach((key) => { + newArr = [...newArr, ...sortObj[key]]; + }); + // 开始循环 + newArr.forEach((item) => { + transformedArray.forEach((key) => { + //keyValue:当前key下的value加一起,用于tempObj的key + let keyValue = ""; + key.forEach((keyItem, index) => { + keyValue += item[keyItem]; + if (index < key.length - 1) { + keyValue += "|"; + } + }); + if (!tempObj[keyValue]) { + //拿到所有当前key下相同数据 + tempObj[keyValue] = newArr.filter((item01) => { + return key.every((prop) => item01[prop] === item[prop]); + }); + // 计算总数 + tempObj[keyValue][0][`${key[key.length - 1]}Length`] = + tempObj[keyValue].length; + + if (key.length === 1) { + result = [...tempObj[keyValue], ...result]; + } + } + }); + }); + return result; + }, + }, + mounted() { + // this.init(); + }, + components: { + baseNewTable, + }, +}; +</script> + +<style scoped lang="scss"> +.MachineSchedulingTable { + padding: 15px; + border-radius: 20px; + background-color: #fff; + overflow: auto; + + .div_title { + color: #696969; + background-color: #f1efef; + line-height: 35px; + height: 35px; + margin: 20px 0 10px; + text-align: center; + + > span { + width: 23%; + display: inline-block; + margin-left: 15px; + } + } + + > .search { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start; + + > div { + margin-left: 10px !important; + width: 200px !important; + } + + } + + > .main { + > .tableBox { + } + } +} +</style> diff --git a/src/views/systemReports/u8positiveReports/tocReverse.vue b/src/views/systemReports/u8positiveReports/tocReverse.vue new file mode 100644 index 0000000..4a8ffbe --- /dev/null +++ b/src/views/systemReports/u8positiveReports/tocReverse.vue @@ -0,0 +1,596 @@ +<template> + <div class="MachineSchedulingTable"> + <!-- 搜索框--> + + <div class="search"> + <div class="datepickBox" style=""> + <el-date-picker + v-model="queryCriteria.business_date_start" + type="date" + placeholder="选择开始日期" + value-format="yyyy-MM-dd" + > + </el-date-picker> + </div> + <div class="datepickBox" style=""> + <el-date-picker + v-model="queryCriteria.business_date_end" + type="date" + placeholder="选择结束时间" + value-format="yyyy-MM-dd" + > + </el-date-picker> + </div> + <div class="radio"> + <el-select v-model="queryCriteria.new_state" placeholder="请选择"> + <el-option + v-for="item in stateOptions" + :key="item.value" + :label="item.label" + :value="item.value"> + </el-option> + </el-select> + </div> + <div class="chunk"> + <el-input v-model="queryCriteria.spec_no" placeholder="商家编码"></el-input> + </div> + <div class="chunk"> + <el-input v-model="queryCriteria.warehouse_no" placeholder="仓库编码"></el-input> + </div> + <div class="chunk"> + <el-input v-model="queryCriteria.warehouse_name" placeholder="仓库名称"></el-input> + </div> + <div class="chunk"> + <el-input v-model="queryCriteria.new_system_number" placeholder="U8C单号"></el-input> + </div> + <div class="chunk"> + <el-input v-model="queryCriteria.shop_name" placeholder="店铺名称"></el-input> + </div> + <div class="chunk"> + <el-input v-model="queryCriteria.shop_no" placeholder="店铺编码"></el-input> + </div> + <div class="chunk"> + <el-input v-model="queryCriteria.order_no" placeholder="旺店通出库单编码"></el-input> + </div> + <el-button + type="primary" + @click="query" + :loading="loading" + size="small" + style="width: 5%; margin: 10px 20px" + >查询 + </el-button> + <el-button + type="primary" + @click="downLoad" + :loading="loading" + size="small" + style="width: 5%; margin: 10px 20px" + >excel导出 + </el-button> + <el-button + type="warning" + @click="reset" + :loading="loading" + size="small" + style="width: 5%; margin: 10px 20px" + >重置 + </el-button> + </div> + <!-- 主体内容--> + <div class="main"> + <baseNewTable + :tableData="mainTableData" + :tableColumn="mainTableColumn" + :tableLoading="tableLoading" + :tableDataMergeList="tableDataMergeList" + :pageModel="pageModel" + @pageSizeChange="(val) => pageSizeChange(val, pageModel)" + @pageChange="(val) => pageChange(val, pageModel)" + exportEventName="Toc反向流程表" + ></baseNewTable> + </div> + </div> +</template> + +<script> +import baseNewTable from "./baseNewTable2/index.vue"; +import {authApi, downFilesBasedFileNameFileTypeAPI} from "@/api/apis/auth"; + +export default { + name: "MachineSchedulingTable", + data() { + return { + stateOptions: [ + {label: "全部", value: ""}, + {label: "成功", value: "Y"}, + {label: "失败", value: "N"}, + ], + //搜索框内容 + queryCriteria: { + "reportDate": "", + "business_date_start": "", + "business_date_end": "", + "new_state": "", + "spec_no": "", + "warehouse_no": "", + "warehouse_name": "", + "new_system_number": "", + "shop_name": "", + "shop_no": "", + "order_no": "" + }, + pageModel: { + "pageSize": 100, + "pageNum": 1, + pageTotal: 0, + }, + + //搜索按钮loading + loading: false, + //表单loading + tableLoading: false, + workshop: [], + //客户下拉 + queryCriteriaOption: [], + //色号下拉 + colorNumOption: [], + //批号下拉 + contractCodeOption: [], + //机台下拉 + workBenchIDOption: [], + //生产名称下拉 + cInvNameOption: [], + // 产品类型下拉 + cInvCNameOption: [], + //生产班组 + stateNameOption: [ + { + label: "甲", + value: "甲", + }, + { + label: "乙", + value: "乙", + }, + { + label: "丙", + value: "丙", + }, + ], + // 右侧按钮 + fixedButtonList: [ + { + icon: "el-icon-printer", + title: "打印", + }, + { + icon: "el-icon-folder", + title: "导出", + }, + ], + //正常表单 + mainTableData: [], + //缺少字段产品大类、本次生产重量 + mainTableColumn: [ + { + label: "是否成功", + prop: "new_state", + tooltip: true, + width: 150, + }, + { + label: "成功/失败原因", + prop: "new_transmit_info", + tooltip: true, + width: 150, + }, + { + label: "U8C销售单号", + prop: "new_system_number", + tooltip: true, + width: 150, + }, + { + label: "U8C销售主键", + prop: "new_system_primary", + tooltip: true, + width: 150, + }, + { + label: "旺店通品牌名称", + prop: "brand_name", + tooltip: true, + width: 150, + }, + { + label: "旺店通品牌编码", + prop: "brand_no", + tooltip: true, + width: 150, + }, + { + label: "商家编码sku", + prop: "spec_no", + tooltip: true, + width: 150, + }, + { + label: "旺店通货品数量", + prop: "num", + tooltip: true, + width: 150, + }, + { + label: "价格", + prop: "price", + tooltip: true, + width: 150, + }, + { + label: "旺店通入库明细主键", + prop: "rec_id", + tooltip: true, + width: 150, + }, + { + label: "旺店通仓库编码", + prop: "warehouse_no", + tooltip: true, + width: 150, + }, + { + label: "旺店通仓库名称", + prop: "warehouse_name", + tooltip: true, + width: 150, + }, + { + label: "旺店通入库单编码", + prop: "order_no", + tooltip: true, + width: 150, + }, + { + label: "旺店通店铺名称", + prop: "shop_name", + tooltip: true, + width: 150, + }, + { + label: "旺店通店铺编码", + prop: "shop_no", + tooltip: true, + width: 150, + }, + { + label: "旺店通入库审核日期(业务日期)", + prop: "business_date", + tooltip: true, + width: 200, + }, + ], + //正常合并 + tableDataMergeList: [], + }; + }, + methods: { + async downLoad() { + if (this.queryCriteria.business_date_start && this.queryCriteria.business_date_end) { + let startDate = new Date(this.queryCriteria.business_date_start); + let endDate = new Date(this.queryCriteria.business_date_end); + let differenceInMillis = endDate - startDate; + let differenceInDays = differenceInMillis / (1000 * 60 * 60 * 24); + // 判断差值是否在15天以内 + if (!isNaN(differenceInDays) && differenceInDays < 31) { + } else { + this.$vmNews("开始时间和结束时间范围请选择在30天内"); + return + } + } else { + this.$vmNews("请选择开始时间和结束时间"); + return + } + let params = { + ...this.queryCriteria, + ...this.pageModel, + pageSize: 9999, + pageNum: 1 + }; + this.openLoading('detail') + const res = await authApi("busidataTocsalesServiceImpl", "busidataTocsalesServiceImpl", "queryToCReturnReportExcel", "", params); + + if (res.status == 200) { + const response = await downFilesBasedFileNameFileTypeAPI(res.attribute) + // console.log(res) + const url = window.URL.createObjectURL(new Blob([response]), {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}); + const link = document.createElement('a'); + link.href = url; + link.setAttribute('download', 'toc反向流程报表.xlsx'); // 设置下载的文件名 + document.body.appendChild(link); + link.click(); + } + return + + }, + reset() { + this.pageModel.pageNum = 1; + this.queryCriteria = { + "reportDate": "", + "business_date_start": "", + "business_date_end": "", + "new_state": "", + "spec_no": "", + "warehouse_no": "", + "warehouse_name": "", + "new_system_number": "", + "shop_name": "", + "shop_no": "", + "order_no": "" + }; + }, + //limit改变 + pageSizeChange(val, obj) { + obj.pageSize = val; + this.init(); + }, + //页码变更 + pageChange(val, obj) { + obj.page = val; + this.init(); + }, + //搜索联想 + async remoteMethod(val, row, options) { + // 客户 + if (row == "cusCode") { + const res = await GetCustomerListAPI(val); + this[options] = []; + if (res.code == 1) { + res.data[1].forEach((item) => { + this[options].push({label: item.cCusName, value: item.cCusCode}); + }); + } + } else if (row === "workBenchID") { + //这个不需要动态搜索 + if (this[options].length) return; + const res = await WorkbenchGetBillListAPI({ + page: 1, + limit: 999, + Sequence: "", + SequenceName: "", + CodeOrName: "", + areaID: "", + workShopID: "", + }); + this[options] = []; + if (res.code == 1) { + res.data[1].forEach((item) => { + this[options].push({ + label: item.workName, + value: item.workID, + }); + }); + } + } else if (row === "cInvCode") { + const res = await U8BaseGetInvenListAPI({ + page: 1, + limit: 200, + codeOrName: val, + }); + this[options] = []; + if (res.code == 1) { + res.data[1].forEach((item) => { + this[options].push({label: item.cInvName, value: item.cInvCode}); + }); + } + } else if (row === "cInvCCode") { + const res = await U8BaseGetInvClassListAPI({ + page: 1, + limit: 200, + codeOrName: val, + }); + this[options] = []; + if (res.code == 1) { + res.data[1].forEach((item) => { + this[options].push({ + label: item.cInvCName, + value: item.cInvCCode, + }); + }); + } + } + }, + // 点击查询 + query() { + this.pageModel.pageNum = 1; + if (this.queryCriteria.business_date_start && this.queryCriteria.business_date_end) { + let startDate = new Date(this.queryCriteria.business_date_start); + let endDate = new Date(this.queryCriteria.business_date_end); + let differenceInMillis = endDate - startDate; + let differenceInDays = differenceInMillis / (1000 * 60 * 60 * 24); + // 判断差值是否在15天以内 + if (!isNaN(differenceInDays) && differenceInDays < 11) { + } else { + this.$vmNews("开始时间和结束时间范围请选择在10天内"); + return + } + } else { + this.$vmNews("请选择开始时间和结束时间"); + return + } + this.init(); + }, + /* + * 导出、打印功能 + * item:当前按钮信息 + * boxId:打印表单id(仅导出) + * name:导出后文件名(仅导出) + * tableData:传打印表格当前tableData(仅打印) + * tableColumn:传打印表格当前tableColumn(仅打印) + * */ + fixedClick(item, boxId, name, tableData, tableColumn) { + if (item.title == "导出") { + this.exportEvent(name, boxId); + } else if (item.title == "打印") { + this.duplicate(tableData, tableColumn); + } + }, + //导出功能 + exportEvent(excelName, boxId) { + console.log(document.querySelector(boxId), "123", boxId); + let gatherData = { + raw: true, + }; + let grid = XLSX.utils.table_to_book( + document.querySelector(boxId), + gatherData + ); + let workbook = XLSX.write(grid, { + bookType: "xlsx", + bookSST: true, + type: "array", + }); + try { + FileSaver.saveAs( + new Blob([workbook], { + type: "application/octet-stream", + }), + excelName + ".xlsx" + ); + } catch (e) { + if (typeof console !== "undefined") console.log(e, workbook); + } + return workbook; + }, + //打印 + duplicate(tableData, tableColumn) { + basePrintJS(tableData, tableColumn); + }, + //初始化表单 + async init() { + this.tableLoading = true; + let params = { + ...this.queryCriteria, + ...this.pageModel, + }; + //初始化表单 + const res = await authApi("busidataTocsalesServiceImpl", "busidataTocsalesServiceImpl", "queryToCReturnReport", "", params); + console.log(res, '初始化res') + this.pageModel.pageTotal = res.attribute.total; + this.mainTableData = this.dataDispose( + res.attribute.list, + this.tableDataMergeList + ); + this.tableLoading = false; + }, + //data处理 + dataDispose(data, arr) { + if (!arr.length) return data; + //分类存放分组 + let tempObj = {}; + //结果 + let result = []; + //将层级转变为 [[1],[1,2],[1,2,3]] + const transformedArray = arr.reduce((acc, currentValue) => { + acc.push([...(acc.length ? acc[acc.length - 1] : []), currentValue]); + return acc; + }, []); + //开始对表单进行排序 + //排序后的arr + let newArr = []; + let sortObj = {}; + data.forEach((item) => { + let keyValue = ""; + arr.forEach((key2, index) => { + keyValue += item[key2]; + }); + if (!sortObj[keyValue]) { + sortObj[keyValue] = data.filter((item01) => { + return arr.every((prop) => item01[prop] === item[prop]); + }); + } + }); + Object.keys(sortObj) + .sort() + .forEach((key) => { + newArr = [...newArr, ...sortObj[key]]; + }); + // 开始循环 + newArr.forEach((item) => { + transformedArray.forEach((key) => { + //keyValue:当前key下的value加一起,用于tempObj的key + let keyValue = ""; + key.forEach((keyItem, index) => { + keyValue += item[keyItem]; + if (index < key.length - 1) { + keyValue += "|"; + } + }); + if (!tempObj[keyValue]) { + //拿到所有当前key下相同数据 + tempObj[keyValue] = newArr.filter((item01) => { + return key.every((prop) => item01[prop] === item[prop]); + }); + // 计算总数 + tempObj[keyValue][0][`${key[key.length - 1]}Length`] = + tempObj[keyValue].length; + + if (key.length === 1) { + result = [...tempObj[keyValue], ...result]; + } + } + }); + }); + return result; + }, + }, + mounted() { + // this.init(); + }, + components: { + baseNewTable, + }, +}; +</script> + +<style scoped lang="scss"> +.MachineSchedulingTable { + padding: 15px; + border-radius: 20px; + background-color: #fff; + overflow: auto; + + .div_title { + color: #696969; + background-color: #f1efef; + line-height: 35px; + height: 35px; + margin: 20px 0 10px; + text-align: center; + + > span { + width: 23%; + display: inline-block; + margin-left: 15px; + } + } + + > .search { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start; + + > div { + margin-left: 10px !important; + width: 200px !important; + } + + } + + > .main { + > .tableBox { + } + } +} +</style> diff --git a/vue.config.js b/vue.config.js index 6476c09..89e8c5e 100644 --- a/vue.config.js +++ b/vue.config.js @@ -40,15 +40,15 @@ module.exports = { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { // target: `http://hzya.ufyct.com:9067/`, - //target: `http://ufidahz.com.cn:9067/`, + target: `http://ufidahz.com.cn:9067/`, // target: `http://127.0.0.1:9081/`, // target: `http://192.168.2.78:9999`, // target: `http://192.168.2.85:9999`, // target: `http://192.168.2.78:8080`, - // target: `http://192.168.2.78:9999`, + // target: `http://192.168.2.78:10086`, // target: `http://192.168.2.185:9999`, // target: `http://192.168.2.83:9999`, - target:'http://127.0.0.1:9999/', + // target:'http://127.0.0.1:9999/', changeOrigin: true, pathRewrite: { ["^" + process.env.VUE_APP_BASE_API]: "",