bug

value

2023-08-28 495decf53f8574f618ac70454dbdd581431b96de

bug

 src/views/basicData/index.vue

@@ -1,493 +1,414 @@
<template>
  <div class="main_div">
    <div class="top_div">
      <span>样品名称：</span>
      <el-select
        v-model="params.material"
        size="small"
        placeholder="请选择样品名称"
      >
        <el-option
          v-for="item in productModelSelectmater"
          :value="item"
          :key="item.index"
          :label="item"
        ></el-option>
      </el-select>
      <span class="top_div_span">项目分组：</span>
      <el-input
        v-model="params.father"
        placeholder="请输入项目分组"
        style="width: 10%"
        size="small "
      ></el-input>
      <span class="top_div_span">项目名称：</span>
      <el-input
        v-model="params.name"
        placeholder="请输入项目名称"
        style="width: 10%"
        size="small "
      ></el-input>
      <el-button
        type="primary"
        class="top_div_button"
        size="small"
        @click="selectProductModelTable"
        >查询</el-button
      >
      <el-button class="top_div_button" size="small" @click="params = {}"
        >重置</el-button
      >
      <div style="float: right">
        <el-button
          class="top_div_button"
          type="primary"
          size="small"
          icon="el-icon-folder-add"
          @click="centerDialogVisible = true"
          >新增</el-button
        >
        <el-dialog
          :visible.sync="centerDialogVisible"
          width="30%"
          right
          :before-close="handleClose"
          :title="isUpdate ? '更新' : '新增'"
        >
          <el-form :model="form" :rules="rules" ref="ruleForm" class="addForm">
            <el-form-item prop="material" required>
              <span>样品名称：</span>
              <el-select
                v-model="form.material"
                style="width: 85%"
                placeholder="请选择样品名称"
              >
                <el-option
                  v-for="(item, index) in productModelSelectmater"
                  :key="index"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <span>项目分组：</span>
              <el-select
                v-model="form.father"
                style="width: 85%"
                placeholder="请选择项目分组"
              >
                <el-option
                  v-for="(item, index) in projectGroupingOptions"
                  :key="index"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-row :gutter="24">
              <el-col :span="12"
                ><el-form-item prop="name" required
                  ><span>项目名称：</span>
                  <el-input
                    style="width: 70%"
                    v-model="form.name"
                    placeholder="请输入项目名称"
                  ></el-input></el-form-item
              ></el-col>
              <el-col :span="12">
                <el-form-item prop="unit">
                  <span
                    v-html="'单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：'"
                  ></span>
                  <el-input
                    style="width: 70%"
                    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 ">{{
    <div class="main_div">
        <div class="top_div">
            <span>样品名称：</span>
            <el-select v-model="params.material" size="small" placeholder="请选择样品名称">
                <el-option v-for="item in productModelSelectmater" :value="item" :key="item.index" :label="item"></el-option>
            </el-select>
            <span class="top_div_span">项目分组：</span>
            <el-input v-model="params.father" placeholder="请输入项目分组" style="width: 10%" size="small "></el-input>
            <span class="top_div_span">项目名称：</span>
            <el-input v-model="params.name" placeholder="请输入项目名称" style="width: 10%" size="small "></el-input>
            <el-button type="primary" class="top_div_button" size="small" @click="selectProductModelTable">查询</el-button>
            <el-button class="top_div_button" size="small" @click="params = {}">重置</el-button>
            <div style="float: right">
                <el-button class="top_div_button" type="primary" size="small" icon="el-icon-folder-add"
                    @click="centerDialogVisible = true">新增</el-button>
                <el-dialog :visible.sync="centerDialogVisible" width="30%" right :before-close="handleClose"
                    :title="isUpdate ? '更新' : '新增'" :hide-required-asterisk="false">
                    <el-form :model="form" :rules="rules" ref="ruleForm" class="addForm">
                        <el-form-item prop="material" required>
                            <span>样品名称：</span>
                            <el-autocomplete class="inline-input" v-model="form.material" :fetch-suggestions="querySearch"
                                placeholder="请输入样品名称"></el-autocomplete>
                        </el-form-item>
                        <el-form-item>
                            <span>项目分组：</span>
                            <el-input v-model="form.father" style="width: 85%" placeholder="请输入样品分组"></el-input>
                        </el-form-item>
                        <el-row :gutter="24">
                            <el-col :span="12"><el-form-item prop="name" required><span>项目名称：</span>
                                    <el-input style="width: 70%" v-model="form.name"
                                        placeholder="请输入项目名称"></el-input></el-form-item></el-col>
                            <el-col :span="12">
                                <el-form-item prop="unit">
                                    <span v-html="'单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：'"></span>
                                    <el-input style="width: 70%" 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>
        <el-button
          class="top_div_button"
          icon="el-icon-delete-solid"
          size="small"
          style="color: #00a5ff"
          @click="deleteListClick"
          >删除</el-button
        >
      </div>
    </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: ${
                    </span>
                </el-dialog>
                <el-button class="top_div_button" icon="el-icon-delete-solid" size="small" style="color: #00a5ff"
                    @click="deleteListClick">删除</el-button>
            </div>
        </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>
                }`">
                                {{ 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: "change" },
        ],
        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.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.$confirm("确认关闭？")
        .then((_) => {
          this.centerDialogVisible = false;
          done();
        })
        .catch((_) => {});
    },
    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 = "";
      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();
      });
    },
    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.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.$confirm("确认关闭？")
                    .then((_) => {
                        this.centerDialogVisible = false;
                        done();
                    })
                    .catch((_) => {});
            },
            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 = "";
                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();
      });
    },
  },
  mounted() {
    this.selectProductMaster().then((res) => {
      this.params.material = this.productModelSelectmater[0];
      this.selectProductModelTable();
    });
  },
  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;
        }
      },
    },
  },
};
            // 表格树全部选中配置
            // 全选/取消选操作
            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();
                });
            },
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            }
        },
        mounted() {
            this.selectProductMaster().then((res) => {
                this.params.material = this.productModelSelectmater[0];
                this.selectProductModelTable();
            });
        },
        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;
}
    .el-tag.el-tag {
        border-color: transparent;
        background-color: transparent;
    }

.top_div {
  height: 120px;
  width: 100%;
  padding: 30px 40px;
  background-color: #ffffff;
}
.top_div_span {
  margin-left: 50px;
}
.top_div_button {
  margin-left: 20px;
}
</style>
    .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: 120px;
        width: 100%;
        padding: 30px 40px;
        background-color: #ffffff;
    }

    .top_div_span {
        margin-left: 50px;
    }

    .top_div_button {
        margin-left: 20px;
    }
</style>