123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690 |
- <!-- 物料信息基础档案 -->
- <script src="../../../main.js"></script>
- <template>
- <div class="material-basic" v-loading="failLoad">
- <!-- 主体列表 -->
- <el-card class="material-list" v-loading="loading">
- <div style="margin: 0 0 10px 0;">
- <!-- 查询条件 -->
- <el-super-search
- v-model="params"
- :size="size"
- :dict="dict"
- :columns="SearchColumns"
- @reset="handleResetQuery"
- @submit="handleQuery"
- ></el-super-search>
- <!-- <el-row :gutter="10">
- <el-col :span="1.5">
- <el-form :inline="true" :model="queryForm" class="mb-query" @submit.native.prevent>
- <el-form-item label="物料编码">
- <el-input size="small" v-model="queryForm.code" placeholder="物料编码" clearable></el-input>
- </el-form-item>
- <el-form-item label="物料名称">
- <el-input size="small" v-model="queryForm.name" placeholder="物料名称" clearable></el-input>
- </el-form-item>
- <el-form-item label="启用状态">
- <el-select size="small" v-model="queryForm.isEnable" placeholder="请选择" clearable>
- <el-option key="0" label="已启用" value="0"></el-option>
- <el-option key="2" label="已停用" value="2"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="是否同步NC">
- <el-select size="small" v-model="queryForm.isSync" placeholder="请选择" clearable>
- <el-option key="0" label="是" value="0"></el-option>
- <el-option key="2" label="否" value="2"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button size="small" type="primary" @click="handleQuery">搜 索</el-button>
- <el-button size="small" @click="handleResetQuery">重 置</el-button>
- </el-form-item>
- </el-form>
- </el-col>
- </el-row> -->
- </div>
- <!-- 操作栏 -->
- <el-row
- :gutter="10"
- class="mb10"
- type="flex"
- justify="end"
- >
- <!-- 新增、修改、删除、复制 -->
- <el-col :span="1.5">
- <el-button-group>
- <!-- <el-button size="small" @click="handleInster">新增</el-button> -->
- <el-button size="small" @click="handleEdit">修改</el-button>
- <!-- <el-button size="small" @click="handleDel">删除</el-button> -->
- <!-- <el-button size="small" @click="handleCopy">复制</el-button> -->
- </el-button-group>
- </el-col>
- <!-- 查询、刷新、过滤 -->
- <el-col :span="1.5">
- <el-button-group>
- <!-- <el-dropdown size="small" @command="handleFilter">
- <el-button size="small">
- 过滤<i class="el-icon-arrow-down el-icon--right"></i>
- </el-button>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item :command="filterCondition('stop')">显示停用</el-dropdown-item>
- <el-dropdown-item :command="filterCondition('allot')">显示已分配</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown> -->
- <!-- <el-button size="small" @click="handleQuery">查询</el-button> -->
- <el-button size="small" @click="handleRefresh">刷新</el-button>
- </el-button-group>
- </el-col>
- <!-- 启用 -->
- <el-col :span="1.5">
- <el-button-group>
- <el-button size="small" @click="handleIsInvoke" :disabled="checkedList.length != 1"
- v-hasPermi="['system:material:add']">
- <!-- 0:启用 2:停用 -->
- {{ handleJudgeIsUsing() ? '停用' : '启用' }}
- </el-button>
- </el-button-group>
- </el-col>
- <!-- 导入导出 -->
- <el-col :span="1.5">
- <el-button-group>
- <el-button size="small" @click="handleImport" v-hasPermi="['system:material:import']">批量导入</el-button>
- <el-button size="small" @click="handleQueryExport" v-hasPermi="['system:material:export']">批量导出</el-button>
- </el-button-group>
- </el-col>
- </el-row>
- <el-table
- v-if="tableHeader.length"
- border
- :data="taskList"
- ref="materialTable"
- max-height="550"
- @cell-dblclick="handledbClick"
- :row-key="getRowKey"
- @selection-change="handleSelectionChange"
- @select="handleSelect"
- @select-all="handleSelectAll"
- >
- <!-- -->
- <el-table-column type="selection" width="45" :reserve-selection="true" fixed/>
- <el-table-column type="index" label="序号" width="55" align="center"/>
- <el-table-column
- width="150"
- v-for="h in tableHeader" v-if="h.show"
- :label="h.name"
- align="center"
- show-overflow-tooltip
- >
- <template slot-scope="scope">
- <span v-if="h.apiUrl">{{scope.row[`${h.prop}Name`]}}</span>
- <el-checkbox
- v-else-if="h.attribute == 'checkbox'"
- v-model="scope.row[h.prop]"
- disabled
- true-label="0"
- false-label="2"
- ></el-checkbox>
- <el-dict-tag
- v-else-if="h.dictId"
- :value="scope.row[h.prop]"
- :options="dict.type[h.dictId]"
- ></el-dict-tag>
- <span v-else>{{ scope.row[h.prop] || '--' }}</span>
- <!-- {{ h.attribute == 'select' ? scope.row[`${h.prop}Name`] :
- (h.attribute == 'checkbox' ?
- (scope.row[h.prop] == '0' ? '√' : '')
- : scope.row[h.prop])
- }} -->
- </template>
- </el-table-column>
- </el-table>
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="queryParams.pageNum"
- :page-sizes="[10, 20, 50, 100]"
- layout="total, sizes, prev, pager, next, jumper"
- :total="total"
- >
- </el-pagination>
- </el-card>
- <!-- 操作提示 -->
- <el-dialog title="操作提示" :visible.sync="optionDialog.show" width="30%" center>
- <span>是否确认{{ optionDialog.op }}?</span>
- <span slot="footer">
- <el-button @click="handleOptionShow('option', false)">取 消</el-button>
- <el-button type="primary" @click="handleComfirmOption('cancal')">确 定</el-button>
- </span>
- </el-dialog>
- <!-- 导入弹窗 -->
- <el-dialog title="批量导入" :visible.sync="importData.show" width="35%" center :before-close="handlefileDialogColse">
- <div class="mb-import">
- <el-upload class="upload-demo" accept=".xls, .xlsx" ref="upload" action="#" :on-remove="handleFileRemove"
- :file-list="importData.list" :auto-upload="false" :on-change="handleChangeFile" :limit="1">
- <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
- <el-button style="margin-left: 10px;" size="small" type="success" @click="handleDownTemplate">下载模板</el-button>
- <div slot="tip" class="el-upload__tip">只能上传Excel文件</div>
- </el-upload>
- </div>
- <span slot="footer">
- <el-button @click="handleImportData('cancal')">取 消</el-button>
- <el-button type="primary" @click="handleImportData('confirm')">确 定</el-button>
- </span>
- </el-dialog>
- </div>
- </template>
- <script>
- import './style/index.scss';
- import materialApi from '@/api/material/basic';
- import { SearchColumns,OtherDictColumns } from './columns';
- import { initDicts } from "@/utils/init.js";
- export default {
- name: "material-basic",
- dicts:[...initDicts([...SearchColumns,...OtherDictColumns])],
- // dicts:[],
- components: {
- ElSuperSearch: () => import("@/components/super-search/index.vue"),
- ElDictTag: () => import("@/components/DictTag/index.vue"),
- },
- data() {
- const params = this.$init.params(SearchColumns);
- return {
- failLoad: false,
- params:params,
- SearchColumns:SearchColumns,
- size:'mini',
- // 物料基本信息数据
- taskList: [],
- // 查询表单字段
- queryForm: {
- name: '',
- code: '',
- isEnable: '',
- },
- // 总条数
- total: 1,
- loading: false,
- importData: {
- show: false,
- list: []
- },
- // 查询参数
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- code: null,
- name: null
- },
- // 表头
- tableHeader: [],
- // 多选数组
- checkedList: [],
- // 列表选中数据
- // checkedList: [],
- // 操作弹窗
- optionDialog: {
- show: false,
- op: ''
- },
- }
- },
- methods: {
- // 判读是否启用
- handleJudgeIsUsing() {
- return this.checkedList.length == 1 && this.checkedList[0].isEnable == '已启用';
- },
- // 改变分页大小
- handleSizeChange(e) {
- this.queryParams.pageSize = e;
- this.handleQuery();
- },
- // 改变当前页
- handleCurrentChange(e) {
- this.queryParams.pageNum = e;
- this.handleQuery();
- },
- // 新增
- handleInster() {
- this.$notify({
- title: '警告',
- message: '物料只能通过申请审批增加,不能在节点直接录入!',
- type: 'warning'
- });
- },
- // 修改
- handleEdit() {
- if (this.checkedList.length == 1) {
- this.$router.push({
- path: `/material/basicFile/detail/${this.checkedList[0].id}`,
- query: {
- isEdit: true
- }
- });
- } else {
- this.$notify({
- title: '警告',
- message: `${this.checkedList.length > 1 ? '修改只能选择单个数据!' : '请选择需要修改的信息!'}`,
- type: 'warning'
- });
- }
- },
- // 删除
- handleDel() {
- console.log('删除', this.checkedList);
- // delMaterial
- if (this.checkedList.length) {
- let ids = this.checkedList.map(i => i.id);
- materialApi.delMaterial(ids).then(res => {
- if (res.code == 200) {
- this.handleRefresh();
- // 清空选中数据
- this.checkedList = [];
- this.$refs.materialTable.clearSelection();
- }
- })
- } else {
- this.$notify({
- title: '警告',
- message: `请选择需要删除的数据!`,
- type: 'warning'
- });
- }
- },
- // 复制
- handleCopy() {
- console.log('复制');
- },
- //查询
- handleQuery() {
- this.getMaterialList('material');
- },
- // 重置查询条件
- handleResetQuery() {
- // for (const key in this.queryForm) {
- // this.queryForm[key] = '';
- // }
- this.queryParams.pageNum = 1;
-
- this.queryParams.pageSize = 10;
- this.params = this.$init.params(SearchColumns);
- this.handleQuery();
- },
- // 刷新
- handleRefresh() {
- this.getMaterialList('material');
- // for (const key in this.queryForm) {
- // this.queryForm[key] = '';
- // }
- },
- // 过滤
- handleFilter(e) {
- console.log(e, '过滤');
- },
- filterCondition(type) {
- return {
- type
- }
- },
- // 启用/停用
- handleIsInvoke() {
- // true 当前状态为启用,需要改为停用
- // 0:启用 2:停用
- let param = {
- isEnable: this.handleJudgeIsUsing() ? '2' : '0',
- id: this.checkedList[0].id
- };
- materialApi.updateEnableMaterial(param).then(res => {
- if (res.code == 200) {
- this.handleRefresh();
- // 清空选中数据
- this.checkedList = [];
- this.$refs.materialTable.clearSelection();
- }
- })
- },
- isInvoke(val) {
- return val;
- },
- // 申请单查询
- handleQueryForm() {
- console.log('申请单查询');
- },
- // 批量导入
- handleImport() {
- this.importData.show = true
- },
- // 导入弹窗关闭前
- handlefileDialogColse(done) {
- this.importData.list = [];
- done();
- },
- // 导入弹窗操作
- handleImportData(type) {
- switch (type) {
- // 取消
- case 'cancal':
- this.importData.list = [];
- this.importData.show = false;
- break;
- // 确认
- case 'confirm':
- if (this.importData.list.length) {
- let formData = new FormData();
- formData.append('file', this.importData.list[0].raw);
- materialApi.fileImport(formData).then(res => {
- if (res.code == 200) {
- this.importData.show = false;
- this.importData.list = [];
- if (res.data.flag) {
- this.failLoad = true;
- console.log(res.data.datas)
- let param = {failDatas: res.data.datas}
- if (null != param) {
- materialApi.exportMartial(param).then(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 = '导入失败的物料基础档案数据.xlsx'; // 下载后文件名
- document.body.appendChild(downloadElement);
- downloadElement.click(); // 点击下载
- document.body.removeChild(downloadElement); // 下载完成移除元素
- window.URL.revokeObjectURL(href); // 释放blob对象
- this.failLoad = false;
- })
- }
- }
- this.$notify({
- message: res.data.msg,
- type: res.data.flag ? 'warning' : 'success'
- });
-
- } else {
- this.$notify({
- message: res.msg,
- type: res.code == 200 ? 'success' : 'warning'
- });
- }
- })
- } else {
- this.$notify({
- title:'警告',
- message: '请上传文件之后在确认!',
- type: 'warning',
- });
- }
- break;
- }
- },
- // 删除文件
- handleFileRemove(file, fileList) {
- console.log('删除文件', file, 'file', fileList, 'fileList');
- this.importData.list = fileList;
- },
- // 文件发生改变
- handleChangeFile(file, fileList) {
- this.importData.list = fileList;
- },
- // 查询条件导出
- handleQueryExport(){
- console.log(this.params,'this.params');
- this.download('/system/material/export', this.params, `物料基本信息${new Date().getTime()}.xlsx`);
- },
- // 多选批量导出
- handleSelectExport() {
- let ids = this.checkedList.length ? this.checkedList.map(i => i.id) : [];
- if (ids.length) {
- let params = {
- // orgId: '1',
- ids,
- }
- this.download('/system/material/export', params, `物料基本信息${new Date().getTime()}.xlsx`);
- } else {
- this.$notify({
- title:'警告',
- message: '请选择需要导出的数据!',
- type: 'warning'
- });
- }
- },
- // 下载模板
- handleDownTemplate() {
- this.download('/system/material/download', {}, `物料基本信息模板.xlsx`)
- },
- // 操作弹窗显隐
- handleOptionShow(type, val) {
- switch (type) {
- case 'option':
- this.optionDialog.show = val;
- break;
- }
- },
- // 操作弹窗确认按钮
- handleComfirmOption(op) {
- switch (op) {
- case 'cancal':
- this.handleOptionShow('option', false);
- break;
- }
- },
- // 双击行
- handledbClick(e) {
- this.$router.push({
- path: `/material/basicFile/detail/${e.id}`,
- });
- },
- // 绑定row-key
- getRowKey(row) {
- return row.id;
- },
- // 对象数组去重
- handleUnique(arr, key) {
- // arr 需要去重的数组 type:作为去重依据的key
- const res = new Map();
- return arr.filter((arr) => !res.has(arr[key]) && res.set(arr[key], 1))
- },
- // 选中数据改变
- handleSelectionChange(list) {
- // this.checkedList = this.handleUnique([...this.checkedList, ...list], 'id');
- // this.$emit('headerOption', JSON.stringify({ checkedList: [... this.checkedList] }))
- },
- // 行数据勾选操作
- handleSelect(selection, row) {
- this.checkedList = selection;
- // // true就是选中,0或者false是取消选中
- // let selected = selection.length && selection.indexOf(row) !== -1
- },
- //手动勾选全选
- handleSelectAll(selection) {
- this.checkedList = selection;
- },
- // 获取物料列表信息
- getMaterialList(templateCode, query) {
- // (params, page)
- let _this = this;
- this.loading = true;
- let page = {
- pageNum: this.queryParams.pageNum,
- pageSize: this.queryParams.pageSize,
- }
- let param = {
- templateCode,
- ...this.params
- // ...this.queryForm
- }
- // console.log(param, 'param');
- materialApi.materialList(param, page).then((res) => {
- _this.loading = false;
- console.log(res, '获取物料列表信息以及表头字段');
- let {code, data} = res;
- if (code == 200) {
- _this.taskList = data.tableBody.rows;
- _this.total = data.tableBody.total;
- }
- })
- },
- // 获取物料列表表头
- getTagList(templateCode) {
- materialApi.tagList({templateCode}).then(res => {
- console.log(res, '获取物料列表表头');
- if (res.code == 200) {
- // let dictList = []
- // res.data.forEach(item =>{
- // if(item.dictId){
- // // 字典
- // dictList.push({
- // item:{...item},
- // attr:{
- // dictName:item.dictId
- // }
- // });
-
- // }
- // })
- // console.log(dictList,'dictList');
- // console.log(this,'this');
- // this.dict =[...initDicts([...SearchColumns,...dictList])]
- this.tableHeader = res.data;
- }
- })
- },
- },
- created() {
- // this.getMaterialList('material');
- // this.getTagList('material');
- },
- beforeRouteEnter(to, from, next) {
- next((vm) => {
- if (from.name == 'materialDetail') {
- // this.$store.getQuery(this.queryForm);
- console.log(vm, 'queryValue', vm.$store);
- vm.queryForm = vm.$store.state.query.queryVlue;
- // 清空选中数据
- vm.checkedList = [];
- vm.$refs.materialTable &&vm.$refs.materialTable.clearSelection();
- }
- vm.getTagList('material');
- vm.getMaterialList('material');
- });
- },
- // 进入详情,保留查询条件
- beforeRouteLeave(to, from, next) {
- if (to.name == 'materialDetail') {
- this.$store.commit('SET_QUERY', this.queryForm);
- } else {
- this.$store.commit('SET_QUERY', {name: '', code: ''});
- }
- next();
- }
- };
- </script>
- <style lang="scss">
- .material-list {
- // height: calc(100vh - 70px);
- .el-card__body {
- height: 100%;
- box-sizing: border-box;
- padding: 10px;
- .el-table {
- overflow: auto;
- .el-table__body-wrapper {
- overflow-y: auto !important;
- overflow-x: auto !important;
- }
- }
- }
- .el-pagination {
- margin-top: 8px;
- text-align: right;
- }
- }
- .mb-import {
- padding: 0 20%;
- text-align: center;
- display: flex;
- align-items: flex-start;
- justify-content: space-around;
- }
- </style>
- <style scoped>
- .el-dialog__header {
- background-color: rgb(244, 244, 244);
- }
- .mb-query >>> .el-form-item__label {
- font-weight: normal;
- font-size: 12px;
- }
- .mb-query >>> .el-form-item {
- margin-bottom: 8px;
- }
- .mb-query >>> .el-select {
- width: 90px;
- }
- .mb-query >>> .el-scrollbar__wrap {
- margin-bottom: -18px;
- }
- </style>
|