8-21基础数据完成

XiaoRuby

2023-08-22 a94874c773b96378ce3aaeee38c2175508d43360

8-21基础数据完成

 src/api/basicData/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,75 @@
import request from '@/utils/request'

const Api = {
    addStandardProjectGroup: "/productModel/selectfather", // æ·»åŠ æ ‡å‡†-->选择项目分组
    productModelSelectmater: "/productModel/selectmater", // é€‰æ‹©æ ·å“åç§°
    addproductModel: "/productModel/addproductModel", // æ·»åŠ æ ‡å‡†
    selectproductModel: "/productModel/selectproductModel", // æŸ¥è¯¢æ ‡å‡†æ¨¡ç‰ˆåˆ—表
    deleteProductModel: "/productModel/delproductModel", // åˆ é™¤æ ‡å‡†æ¨¡ç‰ˆ
    selectproductModelById: "/productModel/selectproductModelById", // æ ¹æ®id查询
    updateProductModel: "/productModel/writeproductModel", // æ›´æ–°æ ‡å‡† -->编辑
    deleteList: "/productModel/delAllproductModel", // æ‰¹é‡åˆ é™¤

}

export function addStandardProjectGroupApi() {
    return request({
        url: Api.addStandardProjectGroup,
        method: 'get'
    })
}

export function productModelSelectmaterApi() {
    return request({
        url: Api.productModelSelectmater,
        method: "get"
    })
}

export function addproductModelApi(formData) {
    return request({
        url: Api.addproductModel,
        method: 'post',
        data: formData
    })
}

export function updateProductModelApi(formData) {
    return request({
        url: Api.updateProductModel + '?id=' + formData.id,
        method: 'post',
        data:  formData
    })
}

export function selectproductModelApi(params) {
    return request({
        url: Api.selectproductModel,
        method: "get",
        params: params
    })
}

export function deleteProductModelApi(id){
    return request({
        url: Api.deleteProductModel,
        method: "post",
        params: {id: id}
    })
}

export function selectproductModelByIdApi(id){
    return request({
        url: Api.selectproductModelById,
        method: "get",
        params: {id: id}
    })
}

export function deleteListApi(id){
    return request({
        url: Api.deleteList,
        method: "post",
        params:{ids: id.toString()}
    })
}

 src/views/basicData/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,551 @@
<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"
        >
          <template slot="title">
            <div class="addTop">
              <span>{{ isUpdate ? "更新" : "新增" }}基础数据</span>
            </div>
          </template>
          <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 ">{{
              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="name"
        border
        height="calc(100vh - 250px)"
        default-expand-all
        ref="multipleTable"
        @select="selectTr"
        @select-all="selectAll"
        :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: "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();
      });
    },

    // è¡¨æ ¼æ ‘全部选中配置
    // å…¨é€‰/取消选操作
    selectAll(val) {
      this.isAllSelect = !this.isAllSelect;
      let data = this.tableData;
      this.toggleSelect(data, this.isAllSelect, "all");
      // è‡ªå®šä¹‰
      if (this.isAllSelect) {
        val.forEach((i) => {
          let isExist = false;
          this.deleteList.findIndex((c) => {
            if (c === i.id) {
              isExist = true;
            }
          });
          if (!isExist && i.id !== undefined) {
            this.deleteList.push(i.id);
          }
        });
      } else {
        this.deleteList.splice(0, this.deleteList.length);
      }
      // è‡ªå®šä¹‰ç»“束
    },
    //选择某行
    selectTr(selection, row) {
      this.$set(row, "isChecked", !row.isChecked);
      this.$nextTick(() => {
        this.isAllSelect = row.isChecked;
        this.toggleSelect(row, row.isChecked, "tr");
      });

      if (row.isChecked === true) {
        if (row.children !== undefined) {
          row.children.forEach((i) => {
            this.deleteList.push(i.id);
          });
        } else {
          this.deleteList.push(row.id);
        }
      } else if (row.isChecked === false) {
        if (row.children !== undefined) {
          row.children.forEach((i) => {
            this.deleteList.findIndex((c, index) => {
              if (c === i.id) {
                this.deleteList.splice(index, 1);
                return;
              }
            });
          });
        }
        this.deleteList.findIndex((c, index) => {
          if (c === row.id) {
            this.deleteList.splice(index, 1);
            return;
          }
        });
      }
    },
    //递归子级
    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();
        }
      });
    },
    // è¡¨æ ¼æ ‘全部选中配置  ç»“束
    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;
        }
      },
    },
  },
};
</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__header {
  padding: 0;
}
.el-dialog__headerbtn {
  top: 0;
}
.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;
}
.addTop {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #00a5ff;
  color: #ffffff;
  padding: 8px 20px;
  float: left;
  height: 30px;
  width: 100%;
}
.addTop span {
  font-size: 16px;
  font-weight: 700;
}
.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>

 src/views/standardLibrary/index.vue

@@ -523,9 +523,26 @@
        this.isAllSelect = row.isChecked;
        this.toggleSelect(row, row.isChecked, "tr");
      });

      if (row.isChecked === true) {
        this.deleteList.push(row.id);
        if (row.children !== undefined) {
          row.children.forEach((i) => {
            this.deleteList.push(i.id);
          });
        } else {
          this.deleteList.push(row.id);
        }
      } else if (row.isChecked === false) {
        if (row.children !== undefined) {
          row.children.forEach((i) => {
            this.deleteList.findIndex((c, index) => {
              if (c === i.id) {
                this.deleteList.splice(index, 1);
                return;
              }
            });
          });
        }
        this.deleteList.findIndex((c, index) => {
          if (c === row.id) {
            this.deleteList.splice(index, 1);
@@ -533,7 +550,6 @@
          }
        });
      }
      console.log(`output->this.deleteList`, this.deleteList);
    },
    //递归子级
    toggleSelect(data, flag, type) {
@@ -574,6 +590,7 @@
          message: res.message,
          type: "success",
        });
        this.selectProductModelTable();
      });
    },
  },
@@ -611,13 +628,14 @@
    .library-bom {
      // padding-right: 10px;
      width: 300px;
      // height: 100%;
      max-height: 100%;
      height: 100%;
      // max-height: 100%;
      // margin-right: 12px;
      // overflow-y: scroll;
      .el-tree {
        // margin-top:
        width: 100%;
        overflow: scroll;
        ::v-deep .el-tree-node__content {
          height: 24px !important;
          font-size: 18px;