Fixiaobai
2023-09-06 e09b848b65d7fda7264e9e536e37ad8e45f65e9c
src/views/standardLibrary/index.vue
@@ -2,8 +2,15 @@
   <div class="standard-library-main">
      <div class="content-main">
         <div class="library-bom" style="width: 300px">
            <el-input clearable v-model="filterText" placeholder="输入关键字进行过滤"></el-input>
            <el-button type="text">全部</el-button>
            <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" />
@@ -12,13 +19,13 @@
            <div class="table-header">
               <div class="serve-btn">
                  <span class="tipMsg">{{ msg !== "" ? msg : "" }}</span>
                  <el-select v-model="versionValue" @change="changeSelect" placeholder="请选择版本号">
                  <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 type="primary" @click="addVersionFun">新增版本号</el-button>
                  <el-button type="primary" icon="el-icon-plus" @click="addTreeFormVisible = true">新增</el-button>
                  <el-button class="top_div_button" icon="el-icon-delete-solid" style="color: #00a5ff"
                  <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>
@@ -83,6 +90,33 @@
            <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="'单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位:'"></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>
@@ -97,17 +131,32 @@
      blurUpdateApi,
      getVersion,
      addVersion,
      addProduct
   } from "@/api/standardLibrary";
   import {
      selectproductModelApi
      addStandardProjectGroupApi,
   } from "@/api/basicData/index";
   import {
      Tree
   } from "element-ui";
   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: "",
@@ -132,19 +181,59 @@
            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() {},
      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=[];
@@ -153,9 +242,6 @@
            this.addTreeForm.standardName=''
         },
         changeSample(){
            // console.log(this.standardTree);
            // console.log(this.addTreeForm);
            // console.log(this.addTreeForm.addTypeArr.length);
            let selectType=this.standardTree.filter(item=>{
               return item.id===this.addTreeForm.addTypeArr[0]
            })[0];
@@ -200,6 +286,22 @@
         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({
@@ -345,26 +447,10 @@
         }) {
            // 判断是否是父节点或文件夹
            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 >
            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() {
@@ -416,21 +502,6 @@
         },
         changeCascader(data) {
            this.addTreeForm.addTypeArr = data;
         },
         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();
            });
         },
         selectDataList() {
            let i=0