Fixiaobai
2023-09-07 e564beb607ed42a01513ff8482cce3b4b04378db
src/views/basicData/index.vue
@@ -1,53 +1,57 @@
<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="clean">重置</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="querySearch1"
                        placeholder="请输入样品名称" style="width: calc(100% - 70px);"></el-autocomplete>
                  </el-form-item>
                  <el-form-item>
                     <span>项目分组:</span>
                     <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 prop="name" required><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 ">{{
              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>
         <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
@@ -160,6 +164,7 @@
                           message: res.message,
                           type: "success",
                        });
                        this.selectProductMaster();
                        this.selectProductModelTable();
                     });
                  }
@@ -185,12 +190,8 @@
            });
         },
         handleClose(done) {
            this.$confirm("确认关闭?")
               .then((_) => {
                  this.centerDialogVisible = false;
                  done();
               })
               .catch((_) => {});
            this.centerDialogVisible = false;
            done();
         },
         selectProductModelTable() {
            selectproductModelApi(this.params).then((res) => {
@@ -246,7 +247,6 @@
               this.selectProductModelTable();
            });
         },
         // 表格树全部选中配置
         // 全选/取消选操作
         selectAll(val) {
@@ -347,13 +347,16 @@
               name: null
            }
            this.selectProductModelTable()
         },
         selectList(){
            this.selectProductMaster().then((res) => {
               this.params.material = this.productModelSelectmater[0];
               this.selectProductModelTable();
            })
         }
      },
      mounted() {
         this.selectProductMaster().then((res) => {
            this.params.material = this.productModelSelectmater[0];
            this.selectProductModelTable();
         });
         this.selectList()
      },
      watch: {
         centerDialogVisible: {
@@ -435,7 +438,7 @@
   }
   .top_div {
      height: 120px;
      height: 90px;
      width: 100%;
      padding: 30px 40px;
      background-color: #ffffff;