256 lines
8.4 KiB
Vue
256 lines
8.4 KiB
Vue
NEW_FILE_CODE
|
|
<template>
|
|
<div class="JNPF-common-layout material_data">
|
|
<div class="JNPF-common-layout-center">
|
|
<el-row class="JNPF-common-search-box" :gutter="14">
|
|
<el-form @submit.native.prevent>
|
|
<el-col :span="6">
|
|
<el-form-item label="物料编码">
|
|
<el-input v-model="query.matCode" placeholder="请输入" clearable></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="物料名称">
|
|
<el-input v-model="query.matName" placeholder="请输入" clearable></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="物料类型">
|
|
<JnpfSelect v-model="query.matType" placeholder="请选择" clearable :options="matTypeOptions"
|
|
:props="matTypeProps">
|
|
</JnpfSelect>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="状态">
|
|
<JnpfSelect v-model="query.enabledStatus" placeholder="请选择" clearable :options="enabledStatusOptions"
|
|
:props="enabledStatusProps">
|
|
</JnpfSelect>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="品牌">
|
|
<el-input v-model="query.brand" placeholder="请输入" clearable></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="规格型号">
|
|
<el-input v-model="query.spec" placeholder="请输入" clearable></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item class="btn">
|
|
<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
|
|
<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-form>
|
|
</el-row>
|
|
<div class="JNPF-common-layout-main JNPF-flex-main">
|
|
<div class="JNPF-common-head">
|
|
<div>
|
|
<el-button type="primary" icon="icon-ym icon-ym-btn-add" @click="addOrUpdateHandle()">新建</el-button>
|
|
</div>
|
|
<div class="JNPF-common-head-right"></div>
|
|
</div>
|
|
<JNPF-table v-loading="listLoading" :data="list">
|
|
<el-table-column prop="matCode" label="物料编码" align="center"/>
|
|
<el-table-column prop="matName" label="物料名称" align="center"/>
|
|
<el-table-column prop="parentName" label="父分类" align="center"/>
|
|
<el-table-column prop="matType" label="物料类型" align="center">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.matType == '1' ? '原材料' : scope.row.matType == '2' ? '半成品' : scope.row.matType == '3' ? '成品' : scope.row.matType }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="unit" label="单位" align="center"/>
|
|
<el-table-column prop="brand" label="品牌" align="center"/>
|
|
<el-table-column prop="spec" label="规格型号" align="center"/>
|
|
<el-table-column prop="safeStock" label="安全库存" align="center"/>
|
|
<el-table-column prop="enabledStatus" label="状态" align="center">
|
|
<template slot-scope="scope">
|
|
<el-tag :type="scope.row.enabledStatus == 1 ? 'success' : 'info'" size="small">
|
|
{{ scope.row.enabledStatus == 1 ? '启用' : scope.row.enabledStatus == 2 ? '未启用' : scope.row.enabledStatus }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="remark" label="备注" align="center"/>
|
|
<el-table-column prop="creatorTime" label="创建时间" align="center" :formatter="jnpf.tableDateFormat1"/>
|
|
<el-table-column label="操作" fixed="right" align="center" width="200">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" @click="addOrUpdateHandle(scope.row)">编辑</el-button>
|
|
<el-button type="text" @click="detailHandle(scope.row)">详情</el-button>
|
|
<el-button type="text" style="color: #f56c6c" @click="handleDelete(scope.row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</JNPF-table>
|
|
<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
|
|
@pagination="initData" />
|
|
</div>
|
|
</div>
|
|
<JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh" />
|
|
<JNPF-Detail v-if="detailVisible" ref="JNFPDetail" @close="closeDetail" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import request from "@/utils/request";
|
|
import { mapGetters } from "vuex";
|
|
import JNPFForm from "./form";
|
|
import JNFPDetail from "./detail";
|
|
import jnpf from "@/utils/jnpf";
|
|
|
|
export default {
|
|
name: "material_list",
|
|
components: {
|
|
JNPFForm,
|
|
JNFPDetail,
|
|
},
|
|
data() {
|
|
return {
|
|
keyword: "",
|
|
query: {
|
|
matCode: undefined,
|
|
matName: undefined,
|
|
parentId: undefined,
|
|
matType: undefined,
|
|
enabledStatus: undefined,
|
|
brand: undefined,
|
|
spec: undefined,
|
|
},
|
|
defListQuery: {
|
|
sort: "desc",
|
|
sidx: "",
|
|
},
|
|
list: [],
|
|
listLoading: false,
|
|
multipleSelection: [],
|
|
total: 0,
|
|
listQuery: {
|
|
currentPage: 1,
|
|
pageSize: 20,
|
|
sort: "",
|
|
sidx: "",
|
|
},
|
|
formVisible: false,
|
|
detailVisible: false,
|
|
matTypeOptions: [
|
|
{ fullName: "原材料", id: "1" },
|
|
{ fullName: "半成品", id: "2" },
|
|
{ fullName: "成品", id: "3" },
|
|
],
|
|
matTypeProps: { label: "fullName", value: "id" },
|
|
enabledStatusOptions: [
|
|
{ fullName: "启用", id: 1 },
|
|
{ fullName: "未启用", id: 2 },
|
|
],
|
|
enabledStatusProps: { label: "fullName", value: "id" },
|
|
};
|
|
},
|
|
computed: {
|
|
jnpf() {
|
|
return jnpf
|
|
},
|
|
...mapGetters(["userInfo"]),
|
|
menuId() {
|
|
return this.$route.meta.modelId || "";
|
|
},
|
|
},
|
|
created() {
|
|
this.initData();
|
|
},
|
|
methods: {
|
|
initData() {
|
|
this.listLoading = true;
|
|
let _query = {
|
|
...this.listQuery,
|
|
...this.query,
|
|
dataType: 0,
|
|
};
|
|
Object.keys(_query).forEach(key => {
|
|
if (_query[key] === undefined || _query[key] === null || _query[key] === '') {
|
|
delete _query[key];
|
|
}
|
|
});
|
|
|
|
request({
|
|
url: `/api/example/material/getList`,
|
|
method: "post",
|
|
data: _query,
|
|
}).then((res) => {
|
|
var _list = [];
|
|
for (let i = 0; i < res.data.list.length; i++) {
|
|
let _data = res.data.list[i];
|
|
_list.push(_data);
|
|
}
|
|
this.list = _list;
|
|
this.total = res.data.pagination.total;
|
|
this.listLoading = false;
|
|
});
|
|
},
|
|
addOrUpdateHandle(row) {
|
|
let id = row ? row.id : "";
|
|
this.formVisible = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.JNPFForm.init(id);
|
|
});
|
|
},
|
|
detailHandle(row) {
|
|
this.detailVisible = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.JNFPDetail.init(row.id);
|
|
});
|
|
},
|
|
closeDetail() {
|
|
this.detailVisible = false;
|
|
},
|
|
handleDelete(row) {
|
|
this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
request({
|
|
url: `/api/example/material/${row.id}`,
|
|
method: 'delete'
|
|
}).then(res => {
|
|
this.$message({
|
|
message: res.msg,
|
|
type: 'success',
|
|
duration: 1500,
|
|
onClose: () => {
|
|
this.initData();
|
|
}
|
|
});
|
|
});
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消删除'
|
|
});
|
|
});
|
|
},
|
|
search() {
|
|
this.listQuery.currentPage = 1;
|
|
this.listQuery.pageSize = 20;
|
|
this.initData();
|
|
},
|
|
refresh(isrRefresh) {
|
|
this.formVisible = false;
|
|
if (isrRefresh) this.search();
|
|
},
|
|
reset() {
|
|
this.query = {
|
|
matCode: undefined,
|
|
matName: undefined,
|
|
parentId: undefined,
|
|
matType: undefined,
|
|
enabledStatus: undefined,
|
|
brand: undefined,
|
|
spec: undefined,
|
|
};
|
|
this.search();
|
|
},
|
|
},
|
|
};
|
|
</script>
|