<template>
|
<div class="standard-library-main">
|
<div class="content-main">
|
<div class="library-bom" style="width: 300px">
|
<el-row :gutter="10">
|
<el-col :span="19">
|
<el-input size="small" clearable v-model="filterText" placeholder="输入关键字进行过滤"></el-input>
|
</el-col>
|
<el-col :span="5">
|
<el-button size="small" type="primary" icon="el-icon-plus" @click="addTreeFormVisible = true"></el-button>
|
</el-col>
|
</el-row>
|
<el-button size="small" type="text">全部</el-button>
|
<el-tree ref="tree" style="width: 100%" class="filter-tree" :data="standardTree" :props="defaultProps"
|
node-key="id" :highlight-current="true" :default-expand-all="true" :filter-node-method="filterNode"
|
:render-content="renderContent" @node-click="nodeClick" />
|
</div>
|
<div class="library-table" style="width: 80%">
|
<div class="table-header">
|
<div class="serve-btn">
|
<span class="tipMsg">{{ msg !== "" ? msg : "" }}</span>
|
<el-select size="small" v-model="versionValue" @change="changeSelect" placeholder="请选择版本号">
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
<el-button size="small" type="primary" @click="addVersionFun">新增版本号</el-button>
|
<el-button size="small" type="primary" @click="centerDialogVisible = true">新增项目</el-button>
|
<el-button size="small" class="top_div_button" icon="el-icon-delete-solid" style="color: #00a5ff"
|
@click="deleteListClick">删除</el-button>
|
</div>
|
</div>
|
<div class="table-box">
|
<el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border
|
height="calc(100vh - 250px)" default-expand-all ref="multipleTable" @select="selectTr"
|
@select-all="selectAll" @selection-change="handleSelectionChange"
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
|
<el-table-column type="selection" label="序号"> </el-table-column>
|
<el-table-column type="index" width="50px" label="序号"></el-table-column>
|
<el-table-column label="项目名称" sortable>
|
<template scope="scope">
|
<el-tag>
|
<div class="firstDiv" :style="`color: ${
|
scope.row.code == '[1]' ? '#16a7ff' : '#58c173'
|
}`">
|
{{ scope.row.code == "[1]" ? "01" : "02" }}
|
</div>
|
<span style="color: black">{{ scope.row.name }}</span>
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="unit" label="单位" sortable></el-table-column>
|
<el-table-column label="标准值" sortable>
|
<template scope="scope">
|
<el-input v-if="scope.row.edit === true || scope.row.code === '[2]'" @blur="requiredOnfocus(scope)"
|
v-model="scope.row.required" placeholder="请输入标准值"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="internal" label="内控值" sortable>
|
<template scope="scope">
|
<el-input v-if="scope.row.edit === true || scope.row.code === '[2]'" @blur="requiredOnfocus(scope)"
|
v-model="scope.row.internal" placeholder="请输入内控值"></el-input>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- 弹出表单页 -->
|
<div>
|
<!-- -->
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-dialog class="addTree" title="添加标准指标" width="28%" :visible.sync="addTreeFormVisible">
|
<el-form v-model="addTreeForm" label-position="top">
|
<el-form-item label="标准类型">
|
<el-cascader v-model="addTreeForm.addTypeArr" :options="formTypeOptions"
|
:props="{ ...defaultProps, checkStrictly: true }" clearable @change="changeCascader"/>
|
</el-form-item>
|
<el-form-item v-show="addTreeForm.addTypeArr.length < 2" label="物料名称">
|
<el-input @change="changeSample" v-model="addTreeForm.materialName" />
|
</el-form-item>
|
<el-form-item v-show="addTreeForm.addTypeArr.length < 3" label="执行标准">
|
<el-input v-model="addTreeForm.standardName" />
|
</el-form-item>
|
<el-form-item v-show="addTreeForm.addTypeArr.length < 4" label="规格型号">
|
<el-input v-model="addTreeForm.specificationsName" />
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="subAddTreeForm">确 定</el-button>
|
<el-button @click="clear">取 消</el-button>
|
</div>
|
</el-dialog>
|
<el-dialog :visible.sync="centerDialogVisible" width="30%" title="新增" :hide-required-asterisk="false">
|
<el-form :model="form" :rules="rules" ref="ruleForm" class="addForm">
|
<el-form-item prop="father">
|
<span>项目分组：</span>
|
<el-autocomplete class="inline-input" v-model="form.father" :fetch-suggestions="querySearch"
|
placeholder="请输入样品分组" style="width: calc(100% - 70px);"></el-autocomplete>
|
</el-form-item>
|
<el-row :gutter="24">
|
<el-col :span="12">
|
<el-form-item prop="name">
|
<span>项目名称：</span>
|
<el-input style="width: calc(100% - 70px);" v-model="form.name" placeholder="请输入项目名称"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item prop="unit">
|
<span v-html="'单 位：'"></span>
|
<el-input style="width: calc(100% - 70px);" v-model="form.unit" placeholder="请输入单位"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="centerDialogVisible = false" size="small ">取 消</el-button>
|
<el-button type="primary" @click="submitAdd" size="small ">确认</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getMaterialList,
|
getProductList,
|
addMaterial,
|
addStandards,
|
addSpecifications,
|
deleteListApi,
|
blurUpdateApi,
|
getVersion,
|
addVersion,
|
addProduct
|
} from "@/api/standardLibrary";
|
import {
|
addStandardProjectGroupApi,
|
} from "@/api/basicData/index";
|
export default {
|
data() {
|
return {
|
projectGroupingOptions:[],
|
form: {
|
father: "", // 项目分组
|
name: "", // 项目名称
|
unit: "", // 单位
|
},
|
rules: {
|
fater:[{required:true,message:"请选择项目名称",trigger:"blur"}],
|
name: [
|
{required: true,message: "请输入项目名称",trigger: "blur"},
|
{min: 2,max: 25,message: "长度在 2 到 25 个字符",trigger: "blur",},
|
],
|
unit: [
|
{required: true,message: "请输入单位",trigger: "blur"},
|
{min: 1,max: 25,message: "长度在 1 到 25 个字符",trigger: "blur"}
|
],
|
},
|
centerDialogVisible : false,
|
filterNodeData: [],
|
options: [],
|
versionValue: "",
|
deleteList: [],
|
msg: "",
|
isAllSelect: false,
|
addTreeFormVisible: false,
|
filterText: "",
|
// 标准库bom树
|
standardTree: [],
|
// bom的,默认配置值
|
defaultProps: {
|
children: "children",
|
label: "name",
|
value: "id",
|
},
|
tableData: [],
|
oldtableData: [],
|
tablespecifications: [],
|
// 选中的节点数据
|
selectData: {},
|
formTypeOptions: [],
|
addTreeForm: {
|
addTypeArr: [],
|
specificationsName: "",
|
materialName: "",
|
standardName: "",
|
}
|
};
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val);
|
},
|
addTreeFormVisible(newVal){
|
if(newVal === false){
|
this.clear();
|
}
|
},
|
centerDialogVisible: {
|
handler(newVal, oldVal) {
|
if (newVal == true) {
|
addStandardProjectGroupApi().then((res) => {
|
this.projectGroupingOptions = res.data;
|
});
|
} else {
|
// 请求成功清除数据
|
this.form = {};
|
// 提交成功清除检验
|
this.$refs.ruleForm.resetFields();
|
}
|
},
|
},
|
},
|
created() {
|
this.getStandardTree();
|
},
|
mounted() {
|
|
},
|
methods: {
|
querySearch(queryString, cb) {
|
var restaurants = []
|
this.projectGroupingOptions.forEach(a => {
|
restaurants.push({
|
value: a
|
})
|
})
|
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
// 调用 callback 返回建议列表的数据
|
cb(results);
|
},
|
createFilter(queryString) {
|
return (restaurant) => {
|
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
};
|
},
|
clear(){
|
this.addTreeFormVisible = false;
|
this.addTreeForm.addTypeArr=[];
|
this.addTreeForm.specificationsName='';
|
this.addTreeForm.materialName=''
|
this.addTreeForm.standardName=''
|
},
|
changeSample(){
|
let selectType=this.standardTree.filter(item=>{
|
return item.id===this.addTreeForm.addTypeArr[0]
|
})[0];
|
if(this.addTreeForm.addTypeArr.length==1){
|
let samples=selectType.children.filter(item=>{
|
return item.name===this.addTreeForm.materialName
|
})[0]
|
if(samples===undefined||samples===[]){
|
this.$message({
|
message: '请先在基础数据中添加该【'+this.addTreeForm.materialName+'】样品',
|
type: 'warning'
|
});
|
return false;
|
}
|
}
|
return true
|
},
|
oneSize(){},
|
twoSize(){
|
return true;
|
},
|
threeSize(){
|
return true;
|
},
|
async initSelect() {
|
this.options = [];
|
this.versionValue = "";
|
const response = await getVersion({
|
specificationsId: this.selectData.id,
|
});
|
if (response.code === 200 && response.data.length > 0) {
|
this.getTableByClick(this.selectData, response.data[0]);
|
for (let i = 0; i < response.data.length; i++) {
|
this.options.push({
|
value: response.data[i],
|
label: "V" + response.data[i],
|
});
|
this.versionValue = response.data[0];
|
}
|
}
|
},
|
changeSelect() {
|
this.tableData = [];
|
this.getTableByClick(this.selectData, this.versionValue);
|
},
|
async submitAdd(){
|
await addProduct({
|
father : this.form.father,
|
name : this.form.name,
|
specificationId: this.selectData.id,
|
unit : this.form.unit,
|
version : this.versionValue
|
}).then(res=>{
|
console.log(res);
|
this.$message.success(res.message);
|
this.centerDialogVisible = false;
|
this.getTableByClick(this.selectData, this.versionValue);
|
}).catch(error=>{
|
this.$message.error(error.message);
|
})
|
},
|
async insertVersion() {
|
const resp = await addVersion({
|
specificationsId: this.selectData.id,
|
version: this.versionValue
|
});
|
if (resp.code === 200) {
|
this.initSelect();
|
this.$message({
|
type: "success",
|
message: resp.message,
|
});
|
}
|
},
|
addVersionFun() {
|
this.$confirm("确认添加新的版本号吗?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
this.insertVersion();
|
})
|
.catch(() => {});
|
},
|
filterNode(value, data,node) {
|
if (!value) return true;
|
return data.name.indexOf(value) !== -1;
|
},
|
// 获取bom树的标准数据
|
async getStandardTree() {
|
let {
|
data
|
} = await getMaterialList();
|
if (data.length < 2) {
|
if (data.length == 0) {
|
data = [{
|
type: 0
|
}, {
|
type: 1
|
}]
|
} else {
|
data[1] = {
|
type: data[0].type == 1 ? 0 : 1
|
}
|
}
|
}
|
this.standardTree = data.map((item) => {
|
let name = null;
|
switch (item.type) {
|
case 0:
|
name = "原材料";
|
break;
|
case 1:
|
name = "成品";
|
break;
|
}
|
return {
|
...item,
|
id: item.type,
|
name,
|
};
|
});
|
// formTypeOptions
|
// 默认第一个四级节点搜索，新增配置项
|
const treeOptions = JSON.parse(JSON.stringify(this.standardTree));
|
this.getDefault(treeOptions, 0);
|
this.formTypeOptions = treeOptions;
|
this.$nextTick().then(() => {
|
const firstNode = document.querySelector(
|
".el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node"
|
);
|
try {
|
firstNode.click();
|
} catch (e) {
|
//TODO handle the exception
|
}
|
});
|
|
},
|
getDefault(arr, index) {
|
for (const item of arr) {
|
if (item.children && item.children?.length > 0) {
|
// 有子节点
|
this.getDefault(item.children, index + 1);
|
if (index === 2) {
|
item.children = null;
|
}
|
}
|
}
|
},
|
// 点击bom树节点方法
|
async nodeClick(data, node, element) {
|
// 是子节点
|
if (node.level === 4) {
|
this.getParentData(node.parent, node.data.name);
|
// 存下选中节点
|
this.selectData = data;
|
this.getTableByClick(data, this.versionValue);
|
this.initSelect();
|
}
|
if (!("children" in data)) {
|
return;
|
}
|
},
|
// 获取树路径
|
getParentData(node, name) {
|
if (node !== null) {
|
if (node.data.name !== undefined) {
|
this.msg = node.data.name + " > " + name;
|
}
|
this.getParentData(node.parent, this.msg);
|
}
|
},
|
async getTableByClick(data, versionVal) {
|
await getProductList({
|
specificationsId: data.id,
|
version: versionVal,
|
}).then((res) => {
|
res.data.forEach((i) => {
|
if (i.name === undefined) {
|
i.name = i.children[0].name;
|
i.unit = i.children[0].unit;
|
i.id = i.children[0].id;
|
i.required = i.children[0].required;
|
i.internal = i.children[0].internal;
|
i.edit = true;
|
delete i.children;
|
}
|
});
|
this.tableData = res.data;
|
this.selectDataList();
|
});
|
},
|
specificationDetails(row) {
|
// 跳转产品规格详情页
|
this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`);
|
},
|
renderContent(h, {
|
node,
|
data,
|
store
|
}) {
|
// 判断是否是父节点或文件夹
|
const isFolder = "children" in data;
|
return ( <span class="tree-node"> {
|
isFolder ? ( <i class = {node.expanded ?"el-icon-folder-opened blue-folder" : "el-icon-folder blue-folder"} ></i>
|
) : ( <i class = "el-icon-document blue-folder" > </i>)
|
} <div class = "tree-lable" > [{node.level}] {data.name} </div> </span>
|
);
|
},
|
async subAddTreeForm() {
|
if(this.addTreeForm.addTypeArr.length==0){
|
this.$message({
|
message: '请先选择标准类型！',
|
type: 'warning'
|
});
|
return
|
}
|
let handelerSample=this.changeSample()
|
if(!handelerSample){
|
return;
|
}
|
let res = null;
|
try {
|
switch (this.addTreeForm.addTypeArr.length) {
|
case 1:
|
res = await addMaterial({
|
...this.addTreeForm,
|
type: this.addTreeForm.addTypeArr[0],
|
});
|
break;
|
case 2:
|
res = await addStandards({
|
...this.addTreeForm,
|
materialId: this.addTreeForm.addTypeArr[1],
|
});
|
break;
|
case 3:
|
res = await addSpecifications({
|
...this.addTreeForm,
|
standardId: this.addTreeForm.addTypeArr[2],
|
});
|
break;
|
}
|
} catch (error) {
|
this.$message.error("添加失败");
|
}
|
this.$message.success("添加成功");
|
this.addTreeFormVisible = false;
|
this.getStandardTree();
|
this.getTableByClick(this.selectData, this.versionValue);
|
this.addTreeForm.addTypeArr=[];
|
this.addTreeForm.specificationsName=''
|
this.addTreeForm.materialName=''
|
this.addTreeForm.standardName=''
|
// console.log(this.addTreeForm);
|
},
|
changeCascader(data) {
|
this.addTreeForm.addTypeArr = data;
|
},
|
selectDataList() {
|
let i=0
|
this.tableData.forEach((a) => {
|
a.id="0"+i
|
a.code = "[1]";
|
i++;
|
if (a.children != undefined) {
|
a.children.forEach((b) => {
|
b.code = "[2]";
|
});
|
}
|
});
|
},
|
// 表格树全部选中配置
|
// 全选/取消选操作
|
selectAll(val) {
|
this.isAllSelect = !this.isAllSelect;
|
let data = this.tableData;
|
this.toggleSelect(data, this.isAllSelect, "all");
|
},
|
//选择某行
|
selectTr(selection, row) {
|
this.$set(row, "isChecked", !row.isChecked);
|
this.$nextTick(() => {
|
this.isAllSelect = row.isChecked;
|
this.toggleSelect(row, row.isChecked, "tr");
|
});
|
},
|
//递归子级
|
toggleSelect(data, flag, type) {
|
if (type === "all") {
|
if (data.length > 0) {
|
data.forEach((item) => {
|
this.toggleSelection(item, flag);
|
if (item.children && item.children.length > 0) {
|
this.toggleSelect(item.children, flag, type);
|
}
|
});
|
}
|
} else {
|
if (data.children && data.children.length > 0) {
|
data.children.forEach((item) => {
|
item.isChecked = !item.isChecked;
|
this.$refs.multipleTable.toggleRowSelection(item, flag);
|
this.toggleSelect(item, flag, type);
|
});
|
}
|
}
|
},
|
//改变选中
|
toggleSelection(row, flag) {
|
this.$set(row, "isChecked", flag);
|
this.$nextTick(() => {
|
if (flag) {
|
this.$refs.multipleTable.toggleRowSelection(row, flag);
|
} else {
|
this.$refs.multipleTable.clearSelection();
|
}
|
});
|
},
|
handleSelectionChange(val) {
|
this.deleteList = [];
|
val.forEach((v) => {
|
if (v.id !== undefined) {
|
this.deleteList.push(v.id);
|
}
|
});
|
},
|
// 表格树全部选中配置 结束
|
deleteListClick() {
|
if(this.deleteList.length==0){
|
this.$message.error('请选择要删除的项目')
|
return
|
}
|
deleteListApi(this.deleteList).then((res) => {
|
this.$message({
|
message: res.message,
|
type: "success",
|
});
|
this.getTableByClick(this.selectData, this.versionValue);
|
});
|
},
|
async requiredOnfocus(scope) {
|
console.log(scope);
|
let obj = {
|
id: scope.row.id,
|
required: scope.row.required,
|
internal: scope.row.internal,
|
};
|
let internal=obj.internal.charAt(0)
|
let required=obj.required.charAt(0)
|
let arr=['>','<','='];
|
if(!arr.includes(required)){
|
this.$message({
|
message: '标准值参数不符合！',
|
type: 'warning'
|
});
|
return
|
}
|
if(!arr.includes(internal)){
|
this.$message({
|
message: '内控值参数不符合！',
|
type: 'warning'
|
});
|
return
|
}
|
await blurUpdateApi(obj).then((res) => {
|
this.$message({
|
message: res.message,
|
type: "success",
|
});
|
this.getTableByClick(this.selectData, this.versionValue);
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
// el-table表格对齐
|
::v-deep .el-table__row:not([class*="el-table__row--level-"]) {
|
td:nth-child(2) {
|
padding-left: 23px !important;
|
}
|
}
|
|
.standard-library-main {
|
width: 100vh;
|
height: 100%;
|
|
// 页面中心内容区域
|
.content-main {
|
display: flex;
|
height: 100%;
|
min-height: calc(100vh - 88px);
|
max-height: calc(100vh - 88px);
|
padding: 15px;
|
|
>div {
|
padding: 20px;
|
background: #fff;
|
}
|
|
.library-bom {
|
// padding-right: 10px;
|
width: 300px;
|
overflow-y: auto;
|
// height: 100%;
|
max-height: 100%;
|
|
// margin-right: 12px;
|
// overflow-y: scroll;
|
.el-tree {
|
// margin-top:
|
width: 100%;
|
|
::v-deep .el-tree-node__content {
|
height: 24px !important;
|
font-size: 18px;
|
// display: inline-block !important;
|
padding: 2px;
|
|
// color: #333;
|
.tree-node {
|
display: flex;
|
align-items: center;
|
height: 20px;
|
}
|
|
.tree-lable {
|
height: 100%;
|
line-height: 23px;
|
font-size: 12px;
|
padding-left: 8px;
|
}
|
|
.blue-folder {
|
color: rgb(64, 158, 255);
|
}
|
}
|
}
|
}
|
|
.library-table {
|
// height: 100%;
|
width: 170vh;
|
max-height: 100%;
|
// flex: 8;
|
margin-left: 12px;
|
display: flex;
|
flex-direction: column;
|
|
// overflow-y: scroll;
|
.table-header {
|
display: flex;
|
justify-content: space-between;
|
width: 100%;
|
|
.el-form-item {
|
margin-bottom: 30px !important;
|
}
|
}
|
|
.table-box {
|
flex: 1;
|
background: #fff;
|
// padding: 20px 20px 10px 20px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
|
>div:nth-child(3) {
|
// height: 20px;
|
display: flex;
|
justify-content: end;
|
margin: 10px 0;
|
}
|
}
|
}
|
}
|
|
.addTree {
|
.el-form-item {
|
margin-bottom: 10px;
|
}
|
|
.el-cascader {
|
width: 100%;
|
}
|
}
|
}
|
|
.search-bar {
|
.el-input {
|
position: relative;
|
font-size: 0.07292rem;
|
display: inline-block;
|
width: 70%;
|
}
|
}
|
|
.firstDiv {
|
float: left;
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background-color: #eff5ff;
|
margin-top: 5px;
|
justify-content: center;
|
display: flex;
|
align-items: center;
|
margin-right: 8px;
|
}
|
|
.el-tag.el-tag {
|
border-color: transparent;
|
background-color: transparent;
|
}
|
|
.el-tag.el-tag:hover {
|
border-color: transparent;
|
background-color: transparent;
|
}
|
|
.serve-btn {
|
width: 100%;
|
padding-bottom: 6px;
|
text-align: right;
|
|
.el-select {
|
margin-right: 10px;
|
}
|
}
|
|
.tipMsg {
|
float: left;
|
font-size: 16px;
|
font-weight: 500;
|
color: #999999;
|
}
|
</style>
|
