<template>
|
<div class="main_div">
|
<div class="top_div">
|
<el-form :inline="true" :model="params" label-position="left">
|
<el-form-item prop="material" label="样品名称：">
|
<el-select v-model="params.material" size="small" placeholder="请选择样品名称" @change="selectProductModelTable()">
|
<el-option v-for="item in productModelSelectmater" :value="item" :key="item.index" :label="item"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item prop="father" label="项目分组：" width="200">
|
<el-input size="small" v-model="params.father" placeholder="请输入项目分组"></el-input>
|
</el-form-item>
|
<el-form-item prop="name" label="项目名称：" width="200" >
|
<el-input size="small" v-model="params.name" placeholder="请输入项目名称"></el-input>
|
</el-form-item>
|
<el-form-item label="">
|
<el-button type="primary" class="top_div_button" size="small" @click="selectProductModelTable">查询</el-button>
|
<el-button class="top_div_button" size="small" @click="clean">重置</el-button>
|
</el-form-item>
|
<el-form-item style="margin-left: 25%;">
|
<el-button class="top_div_button" type="primary" size="small" icon="el-icon-plus"
|
@click="centerDialogVisible = true">新增</el-button>
|
<el-button class="top_div_button" icon="el-icon-delete-solid" size="small" style="color: #00a5ff"
|
@click="deleteListClick">删除</el-button>
|
</el-form-item>
|
</el-form>
|
<el-dialog :visible.sync="centerDialogVisible" width="45%" right :before-close="handleClose"
|
:title="isUpdate ? '更新' : '新增'" :hide-required-asterisk="false">
|
<el-form style="width: 100%;" label-width="100px" :model="form" :rules="rules" ref="ruleForm" class="addForm" label-position="left">
|
<el-form-item label="样品名称：" prop="material" required>
|
<el-autocomplete class="inline-input" v-model="form.material" :fetch-suggestions="querySearch1"
|
placeholder="请输入样品名称" style="width: calc(100% - 70px);"></el-autocomplete>
|
</el-form-item>
|
<el-form-item label="项目分组：">
|
<el-autocomplete class="inline-input" v-model="form.father" :fetch-suggestions="querySearch2"
|
placeholder="请输入项目分组" style="width: calc(100% - 70px);"></el-autocomplete>
|
</el-form-item>
|
<el-row :gutter="24">
|
<el-col :span="12"><el-form-item label="项目名称：" prop="name" required>
|
<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 label="单位" prop="unit">
|
<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 ">{{
|
isUpdate ? "更 新" : "保 存"
|
}}</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
<div class="table_div">
|
<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="操作">
|
<template slot-scope="scope">
|
<div v-if="scope.row.code == '[2]' || scope.row.edit == true">
|
<el-button type="text" size="mini" @click="childrenClick(scope)">编辑</el-button>
|
<el-button type="text" size="mini" @click="deleteTreeChildren(scope)">删除</el-button>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
addStandardProjectGroupApi,
|
productModelSelectmaterApi,
|
addproductModelApi,
|
selectproductModelApi,
|
deleteProductModelApi,
|
selectproductModelByIdApi,
|
updateProductModelApi,
|
deleteListApi,
|
} from "@/api/basicData/index";
|
export default {
|
name: "BasicDataMessage",
|
data() {
|
return {
|
isAllSelect: false,
|
projectGroupingOptions: [],
|
productModelSelectmater: [],
|
value: "",
|
isUpdate: false,
|
projectName: "",
|
tableData: [],
|
centerDialogVisible: false,
|
deleteList: [],
|
form: {
|
material: "", // 样品名称
|
father: "", // 项目分组
|
name: "", // 项目名称
|
unit: "", // 单位
|
},
|
params: {
|
material: "",
|
father: "",
|
name: "",
|
},
|
rules: {
|
material: [{
|
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",
|
},
|
],
|
},
|
};
|
},
|
methods: {
|
submitAdd() {
|
if (!this.isUpdate) {
|
this.$refs.ruleForm.validate((valid) => {
|
if (valid) {
|
addproductModelApi(this.form).then((res) => {
|
this.centerDialogVisible = false;
|
this.$message({
|
message: res.message,
|
type: "success",
|
});
|
this.selectProductMaster();
|
this.selectProductModelTable();
|
});
|
}
|
});
|
} else {
|
this.$refs.ruleForm.validate((valid) => {
|
if (valid) {
|
updateProductModelApi(this.form).then((res) => {
|
this.centerDialogVisible = false;
|
this.$message({
|
message: res.message,
|
type: "success",
|
});
|
this.selectProductModelTable();
|
});
|
}
|
});
|
}
|
},
|
async selectProductMaster() {
|
await productModelSelectmaterApi().then((res) => {
|
this.productModelSelectmater = res.data;
|
});
|
},
|
handleClose(done) {
|
this.centerDialogVisible = false;
|
done();
|
},
|
selectProductModelTable() {
|
selectproductModelApi(this.params).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.edit = true;
|
delete i.children;
|
}
|
});
|
this.tableData = res.data;
|
this.selectDataList();
|
});
|
},
|
childrenClick(scope) {
|
this.isUpdate = true;
|
let father = "";
|
this.form = {
|
material: "", // 样品名称
|
father: "", // 项目分组
|
name: "", // 项目名称
|
unit: "", // 单位
|
id: ""
|
}
|
selectproductModelByIdApi(scope.row.id).then((res) => {
|
let result = res.data;
|
this.form.name = result.name;
|
this.form.material = result.material;
|
this.form.father = result.father;
|
this.form.unit = result.unit;
|
this.form.id = scope.row.id;
|
this.centerDialogVisible = true;
|
});
|
},
|
selectDataList() {
|
this.tableData.forEach((a) => {
|
a.code = "[1]";
|
if (a.children != undefined) {
|
a.children.forEach((b) => {
|
b.code = "[2]";
|
});
|
}
|
});
|
},
|
deleteTreeChildren(scope) {
|
deleteProductModelApi(scope.row.id).then((res) => {
|
this.$message({
|
message: res.message,
|
type: "success",
|
});
|
this.selectProductModelTable();
|
});
|
},
|
// 表格树全部选中配置
|
// 全选/取消选操作
|
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);
|
}
|
});
|
console.log(`output->this.deleteList`, this.deleteList);
|
},
|
// 表格树全部选中配置 结束
|
deleteListClick() {
|
deleteListApi(this.deleteList).then((res) => {
|
this.$message({
|
message: res.message,
|
type: "success",
|
});
|
this.selectProductModelTable();
|
});
|
},
|
querySearch1(queryString, cb) {
|
var restaurants = []
|
this.productModelSelectmater.forEach(a => {
|
restaurants.push({
|
value: a
|
})
|
})
|
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
// 调用 callback 返回建议列表的数据
|
cb(results);
|
},
|
querySearch2(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);
|
};
|
},
|
clean() {
|
this.params = {
|
material: this.params.material,
|
father: null,
|
name: null
|
}
|
this.selectProductModelTable()
|
},
|
selectList(){
|
this.selectProductMaster().then((res) => {
|
this.params.material = this.productModelSelectmater[0];
|
this.selectProductModelTable();
|
})
|
}
|
},
|
mounted() {
|
this.selectList()
|
},
|
watch: {
|
centerDialogVisible: {
|
handler(newVal, oldVal) {
|
if (newVal == true) {
|
addStandardProjectGroupApi().then((res) => {
|
this.projectGroupingOptions = res.data;
|
});
|
} else {
|
// 请求成功清除数据
|
this.form = {};
|
// 提交成功清除检验
|
this.$refs.ruleForm.resetFields();
|
this.isUpdate = false;
|
}
|
},
|
},
|
},
|
};
|
</script>
|
|
<style>
|
.el-tag.el-tag {
|
border-color: transparent;
|
background-color: transparent;
|
}
|
|
.el-tag.el-tag:hover {
|
border-color: transparent;
|
background-color: transparent;
|
}
|
|
.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;
|
}
|
|
.main_div {
|
width: 100%;
|
position: relative;
|
padding: 0 10px 10px 10px;
|
}
|
|
.el-dialog__close {
|
padding: 8px 0;
|
color: #ffffff !important;
|
}
|
|
.addForm {
|
padding: 20px 20px 0 20px;
|
}
|
|
.addForm .el-form-item__error {
|
left: 66px;
|
}
|
|
.el-dialog {
|
border-radius: 10px;
|
}
|
|
.el-dialog__body {
|
padding: 30px 20px 0 20px;
|
}
|
|
.table_div {
|
margin-top: 10px;
|
width: 100%;
|
height: calc(100vh - 230px);
|
background-color: #ffffff;
|
padding: 10px;
|
}
|
|
.top_div {
|
height: 90px;
|
width: 100%;
|
padding: 30px 40px;
|
background-color: #ffffff;
|
}
|
|
.top_div_span {
|
margin-left: 50px;
|
}
|
|
.top_div_button {
|
margin-left: 20px;
|
}
|
</style>
|
