emis-frontend/src/views/emis/emisMaterial/index.vue
2024-08-18 21:49:24 +08:00

513 lines
19 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<XdPageContainer class="app-container">
<SearchForm slot="pageHeader" :model="queryParams" ref="queryForm" size="small" :maxShow="3" label-width="68px" v-show="showSearch" @search="handleQuery" @reset="resetQuery">
<el-form-item label="品名编号" prop="materialCode">
<el-input
v-model="queryParams.materialCode"
:placeholder="$t('品名编号')"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="品名名称" prop="materialName">
<el-input
v-model="queryParams.materialName"
:placeholder="$t('品名名称')"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="是否启用" prop="blEnable">
<el-select v-model="queryParams.blEnable" placeholder="启停状态" clearable filterable @change="handleQuery">
<el-option
v-for="dict in dict.type.sys_biz_enable_status"
v-bind:key="dict.value"
v-bind:label="dict.label"
v-bind:value="dict.value"
/>
</el-select>
</el-form-item>
</SearchForm>
<XdTable
slot="pageContent"
slot-scope="slotProps"
:height="(slotProps.contentHeight)+'px'"
v-loading="loading"
border
size="small"
:data="emisMaterialList"
:showSearch.sync="showSearch"
:queryParams="queryParams"
:total="total"
@queryTable="getList"
@selection-change="handleSelectionChange"
@sort-change="handleSortChange"
>
<div slot="toolbar">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['emis:emisMaterial:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['emis:emisMaterial:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['emis:emisMaterial:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-upload
action=""
name="file"
accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
:show-file-list="false"
v-hasPermi="['emis:emisMaterial:add']"
:before-upload="beforeAvatarUpload">
<el-button slot="trigger" plain class="filter-item" size="mini" type="primary" >导入</el-button>
<el-link type="primary" style="line-height: 28px;font-size:13px" href="/static/tpl/imp_materia_tpl.xls">下载导入模版</el-link>
</el-upload>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['emis:emisMaterial:export']"
>导出</el-button>
</el-col>
</el-row>
</div>
<el-table-column type="selection" width="55" align="center" />
<!--
<el-table-column label="序号" align="center" min-width="60">
<template slot-scope="scope">
<span v-text="getIndex(scope.$index)"> </span>
</template>
</el-table-column>
<el-table-column label="xxx" align="left" prop="xxx" min-width="180">
<template slot-scope="scope">
<div class="link-type" @click="handleView(scope.row)">{{scope.row.orderSn}}</div>
</template>
</el-table-column>
<el-table-column label="结算状态" align="center" prop="settleStatus" :sort-orders="['descending','ascending']" sortable="custom" min-width="80">
<template slot-scope="scope">
<div v-if="scope.row.settleStatus == 40" style="color:red;">
<span class="el-tag el-tag--danger">已拒绝</span>
</div>
</template>
</el-table-column>
-->
<el-table-column :label="$t('品名编号')" align="center" prop="materialCode" min-width="100" />
<el-table-column :label="$t('品名名称')" align="center" prop="materialName" min-width="100" />
<el-table-column :label="$t('出售单价')" align="center" prop="unitPrice" min-width="100" />
<el-table-column :label="$t('物品单位')" align="center" prop="goodsUnit" min-width="100" />
<el-table-column :label="$t('采购价格')" align="center" prop="stockPrice" min-width="100" />
<el-table-column :label="$t('是否需要发放单号')" align="center" prop="blSend" min-width="150" >
<template slot-scope="scope">
<span v-if="scope.row.blSend == 1" >是</span>
<span v-else >否</span>
</template>
</el-table-column>
<el-table-column :label="$t('最低申购数量')" align="center" prop="lowQuantity" min-width="100" />
<el-table-column :label="$t('库存预警')" align="center" prop="alertNumber" min-width="100" />
<el-table-column :label="$t('是否提供给网点申请')" align="center" prop="blApply" min-width="100" >
<template slot-scope="scope">
<span v-if="scope.row.blApply == 1" >是</span>
<span v-else >否</span>
</template>
</el-table-column>
<el-table-column :label="$t('是否提供给运单发放')" align="center" prop="blNeedbill" min-width="100" >
<template slot-scope="scope">
<span v-if="scope.row.blNeedbill == 1" >是</span>
<span v-else >否</span>
</template>
</el-table-column>
<el-table-column :label="$t('启用状态')" align="center" prop="blEnable" min-width="100" >
<template slot-scope="scope">
<span v-if="scope.row.blEnable == 1" >启用</span>
<span v-else >停用</span>
</template>
</el-table-column>
<el-table-column label="创建人" align="center" prop="createByName" width="80" :show-overflow-tooltip="true"/>
<el-table-column label="创建网点" align="center" prop="createSiteName" width="80" :show-overflow-tooltip="true"/>
<el-table-column label="创建时间" align="center" prop="createTime" width="170"/>
<el-table-column label="修改人" align="center" prop="updateByName" width="80" :show-overflow-tooltip="true"/>
<el-table-column label="修改网点" align="center" prop="updateSiteName" width="80" :show-overflow-tooltip="true"/>
<el-table-column label="修改时间" align="center" prop="updateTime" width="170"/>
<!-- <el-table-column :label="$t('是否列表')" align="center" prop="blList" min-width="100" /> -->
<!-- <el-table-column :label="$t('单个数量')" align="center" prop="unitNumber" min-width="100" /> -->
<!-- <el-table-column :label="$t('数量')" align="center" prop="quantity" min-width="100" /> -->
<el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['emis:emisMaterial:edit']"
>修改</el-button>
<!--
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['emis:emisMaterial:remove']"
>删除</el-button> -->
</template>
</el-table-column>
</XdTable>
<el-dialog :title="titleForm" :visible.sync="openForm" width="50%" :destroy-on-close="true" v-dialogDrag append-to-body>
<emisMaterialForm :id="currentId" @on-changed="handleFormChanged" @on-cancel="cancelForm"></EmisMaterialForm>
</el-dialog>
<!--
<el-dialog :title="titleView" :visible.sync="openView" width="60%" :close-on-click-modal="false" v-dialogDrag append-to-body>
<emisMaterialView :id="id" ></EmisMaterialView>
</el-dialog>
-->
</XdPageContainer>
</template>
<script>
import { listEmisMaterial, getEmisMaterial, delEmisMaterial, addEmisMaterial, updateEmisMaterial } from "@/api/emis/emisMaterial";
import elDateSimplePicker from '@/components/DatePickerAdv/elDateSimplePicker';
// import emisMaterialView from '@/views/emis/emisMaterial/emisMaterialView';
import emisMaterialForm from '@/views/emis/emisMaterial/emisMaterialForm';
export default {
name: "EmisMaterial",
components: { elDateSimplePicker,emisMaterialForm },
dicts: [
],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 创建时间搜索
dateTimeRange:[],
// 总条数
total: 0,
// 物料类型表格数据
emisMaterialList: [],
currentId:null,
openForm: false,
titleForm: "",
// 弹出展示层
id:null,
titleView:"",
openView: false,
// 更新站点时间范围
daterangeCreateTime: [],
// 更新站点时间范围
daterangeUpdateTime: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
materialCode: null,
materialName: null,
materialNameEn: null,
blList: null,
unitNumber: null,
unitPrice: null,
stockPrice: null,
goodsUnit: null,
quantity: null,
alertNumber: null,
lowQuantity: null,
blNeedbill: null,
blApply: null,
blSend: null,
blEnable: null,
},
};
},
created() {
this.getList();
},
methods: {
/** 查询物料类型列表 */
getList() {
this.loading = true;
this.queryParams.params = {};
if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
}
if (null != this.daterangeUpdateTime && '' != this.daterangeUpdateTime) {
this.queryParams.params["beginUpdateTime"] = this.daterangeUpdateTime[0];
this.queryParams.params["endUpdateTime"] = this.daterangeUpdateTime[1];
}
listEmisMaterial(this.addDateRange(this.queryParams, this.dateTimeRange)).then(response => {
this.emisMaterialList = response.rows;
this.total = response.total;
this.loading = false;
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
// 排序 查询字段是表格中字段名字 动态取值排序顺序
handleSortChange(column) {
this.queryParams.orderByColumn = column.prop;
this.queryParams.isAsc = column.order;
this.getList();
},
/** 新增按钮操作 */
handleAdd(row) {
this.currentId=null;
this.openForm= true;
this.titleForm = "新增";
},
handleShowMoreInput(){
this.moreInputVisible = !this.moreInputVisible;
},
/** 修改按钮操作 */
handleUpdate(row) {
this.currentId= row.id;
this.openForm = true;
this.titleForm = "修改";
},
handleView(row) {
this.id=row.id;
this.titleView="查看";
this.openView=true;
// this.router.push({ path: '/emis/emisMaterial/viewDetail', query: { id: row.id }})
},
handleFormChanged(){
this.openForm = false;
this.getList();
},
cancelForm(){
this.openForm = false;
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除').then(function() {
return delEmisMaterial(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
beforeAvatarUpload(file) {
this.readerData(file)
return false
},
readerData(rawFile) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = e => {
const data = e.target.result
const workbook = XLSX.read(data, { type: 'array' })
const firstSheetName = workbook.SheetNames[0] // firstSheetName
// if (!excelTypes.includes(firstSheetName)) {
// reject('无法识别当前Excel模板')
// this.$modal.msgError('无法识别当前Excel模板')
// return
// }
const worksheet = workbook.Sheets[firstSheetName]
// const header = this.getHeaderRow(worksheet) // 标题
const results = XLSX.utils.sheet_to_json(worksheet)
console.log(results);
this.batchImportData(results);
resolve()
}
reader.readAsArrayBuffer(rawFile)
})
},
getHeaderRow(sheet) {
const headers = []
const range = XLSX.utils.decode_range(sheet['!ref'])
let C
const R = range.s.r
/* start in the first row */
for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
/* find the cell in the first row */
let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
headers.push(hdr)
}
return headers
},
async batchImportData(results) {
const _index = 1
let loadingInstance = this.$loading({
text: '正在导入 ' + _index + ' ...'
})
for (let index = 0; index < results.length; index++) {
const element = results[index]
// 品名编号 品名名称 出售单价 物品单位 采购价格 最低申购数量 库存预警数 是否提供给网点申请 是否启用 备注
const postData= {
materialCode: element['品名编号'],
materialName: element['品名名称'],
unitPrice: element['出售单价'],
stockPrice: element['采购价格'],
goodsUnit: element['物品单位'],
alertNumber: element['库存预警数'],
lowQuantity: element['最低申购数量'],
blApply: element['是否提供给网点申请'],
blEnable: element['是否启用'],
remark: element['备注'],
};
const res = await addEmisMaterial(postData)
console.log(res);
if (res.code !== 200) {
this.$modal.msgError(JSON.stringify(res.msg))
loadingInstance.close()
return
}
loadingInstance.close()
loadingInstance = this.$loading({
text: '正在导入 ' + _index + ' 数据...'
})
}
loadingInstance.close()
this.handleQuery();
},
/** 导出按钮操作 */
handleExport() {
// this.download('emis/emisMaterial/export', {
// ...this.queryParams
// }, `emisMaterial_${new Date().getTime()}.xlsx`)
const loadingInstance = this.$loading({
text: '正在导出...'
})
var qParam = {...this.queryParams};
qParam.pageNum=1;
qParam.pageSize=5000;
listEmisMaterial(this.addDateRange(qParam, this.dateTimeRange)).then(response => {
this.downloadLoading = false
if (response.code === 200) {
const curList = response.rows
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['序号','物料编号','物料名称','物料英文名称','是否列表','单个数量','出售价格','采购价格','计量单位','数量','库存预警','最低申购数量','是否需要运单发放','是否提供给网点申请','是否提供给运单发放','启用状态','排序','备注','租户ID','删除标志(0代表存在','创建者','创建时间','更新者','更新时间','创建站点','更新站点',];
const filterVal = ['id','materialCode','materialName','materialNameEn','blList','unitNumber','unitPrice','stockPrice','goodsUnit','quantity','alertNumber','lowQuantity','blNeedbill','blApply','blSend','blEnable','orderNum','remark','tenantId','delFlag','createBy','createTime','updateBy','updateTime','createSite','updateSite',];
const data = this.formatJson(filterVal, curList, response.rows)
excel.export_json_to_excel({
header: tHeader,
data,
filename: '物料类型',
autoWidth: true
})
loadingInstance.close()
})
}
});
},
formatJson(filterVal, jsonData, resData) {
let index = 0
return jsonData.map(v => filterVal.map(j => {
if (j === 'index') {
return ++index
}
if (j === 'status') {
var statusStr='xxx'
if(v[j] == 10){
statusStr='xxx'
}
return statusStr;
}
return v[j]
}))
},
/** 列索引函数 */
getIndex($index) {
return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
},
/** 时间搜索响应函数 */
dateTimeChange(value){
this.dateTimeRange=value;
},
}
};
</script>
<style scoped>
.el-divider{
margin-top: 0px;
background: 0 0;
border-top: 1px solid #E6EBF5;
}
.el-divider__text {
color: #0955ee;
cursor: pointer;
}
</style>