zc

src/views/medicUniversity-3_1/chemicalManagement/chemicalProcurement/purchaseRequisition/addPage.vue

@@ -0,0 +1,346 @@
+<!--草稿箱-->
+<template>
+  <div class="addPage">
+    <div class="title-box">
+      <p>化学品申购</p>
+      <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
+    </div>
+    <div class="page-max-box scrollbar-box">
+      <el-form :model="formData" ref="form" :inline="true" :rules="rules">
+        <el-form-item label="申购原因：" prop="ded1" label-width="100px">
+          <el-input
+            type="textarea"
+            resize="none"
+            maxLength="50"
+            :rows="4"
+            style="width:1200px;"
+            v-model="formData.chemicalName"
+            placeholder="请输入申购原因"
+            clearable/>
+        </el-form-item>
+        <div class="two-form-flex">
+          <div class="two-form-left">
+            <el-form-item label="实验室：" prop="ded2" label-width="100px">
+              <el-select
+                style="width:360px;"
+                v-model="formData.subjectId"
+                filterable
+                remote
+                clearable
+                @focus="selectFocus"
+                reserve-keyword
+                @clear="clearClick"
+                placeholder="请选择实验室"
+                :remote-method="getSelectList"
+                :loading="loading">
+                <el-option
+                  v-for="item in selectList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+          <p class="two-form-right add-button-one-90">更换化学品</p>
+        </div>
+        <div class="form-list-max-box">
+          <div class="form-list-title-box">
+            <p>化学品名称</p>
+            <p>化学品柜</p>
+            <p>剩余可存放量</p>
+            <p>本次申购量</p>
+          </div>
+          <div class="form-list-data-box" v-for="(item,index) in formData.list" :key="index">
+            <div class="form-list-data-title">
+              <p>{{item.name}}</p>
+            </div>
+            <div class="form-list-data-for-max-box">
+              <div class="form-list-data-for" v-for="(minItem,minIndex) in item.list" :key="minIndex">
+                <div class="form-list-one-box">
+                  <el-form-item label="" :prop="'list.'+ index +'.list.'+ minIndex +'.id'"
+                                :rules="rules.id">
+                    <el-select v-model="minItem.id" clearable placeholder="请选择化学品柜">
+                      <el-option label="1号柜" value="1"></el-option>
+                      <el-option label="2号柜" value="2"></el-option>
+                      <el-option label="3号柜" value="3"></el-option>
+                      <el-option label="4号柜" value="4"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </div>
+                <p class="form-list-text-p">
+                  10g
+                </p>
+                <div class="form-list-two-box">
+                  <el-form-item label="" :prop="'list.'+ index +'.list.'+ minIndex +'.num'"
+                                :rules="rules.num">
+                    <el-input
+                      maxLength="30"
+                      v-model="minItem.num"
+                      placeholder="请输入本次申购量"
+                      clearable
+                      style="width: 220px"
+                    ><i slot="append">g</i></el-input>
+                  </el-form-item>
+                  <p class="el-icon-delete button-icon-p" style="margin-left:80px;" @click="delObj(index,minIndex)"></p>
+                  <p class="el-icon-circle-plus-outline button-icon-p" v-if="minIndex ==formData.list[index].list.length-1" @click="addObj(index)"></p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bottom-button-box">
+          <p class="add-button-one-90 right-button" @click="upData">保存草稿</p>
+          <p class="inquire-button-one right-button" @click="upData">提交</p>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "addPage",
+    props:{
+      addPagePropsData:{},
+    },
+    data(){
+      return{
+        loading:false,
+        formData:{
+          list:[
+            {
+              name:"甲醇",
+              list:[
+                {
+                  id:"1",
+                  maxNum:10,
+                  num:"",
+                },
+                {
+                  id:"",
+                  maxNum:10,
+                  num:"",
+                },
+              ]
+            },
+            {
+              name:"乙醇",
+              list:[
+                {
+                  id:"2",
+                  maxNum:10,
+                  num:"",
+                }
+              ]
+            },
+          ],
+        },
+        rules:{
+          ded1:[
+            { required: true, message: '请输入申购原因', trigger: 'blur' },
+            { required: true, message: "请输入申购原因", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          ded2:[
+            { required: true, message: '请选择实验室', trigger: 'blur' },
+            { required: true, message: "请选择实验室", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          id:[
+            { required: true, message: '请选择化学品柜', trigger: 'blur' },
+            { required: true, message: "请选择化学品柜", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          num:[
+            { required: true, message: '请输入本次申购量', trigger: 'blur' },
+            { required: true, message: "请输入本次申购量", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+        },
+        //实验室列表
+        selectList:[],
+
+      }
+    },
+    created() {
+
+    },
+    mounted(){
+
+    },
+    methods: {
+      //删除子项
+      delObj(index,minIndex){
+        this.formData.list[index].list.splice(minIndex,1)
+      },
+      //增加子项
+      addObj(index){
+        let obj = {
+          id:"",
+          maxNum:10,
+          num:"",
+        }
+        this.formData.list[index].list.push(obj);
+      },
+      //提交
+      upData(){
+        this.$refs["form"].validate((valid) => {
+          if (valid) {
+
+          }
+        })
+      },
+      //返回
+      backPage(){
+        this.$parent.goPage(1);
+      },
+      selectFocus(){
+        if(!this.selectList[0]){
+          //查询院系下实验室
+          getSubList(idText).then(response => {
+            //当前列表
+            this.selectList = JSON.parse(JSON.stringify(response.data));
+            //原始列表数据
+            this.selectListData = JSON.parse(JSON.stringify(response.data));
+          });
+        }
+      },
+
+      /** 实验室-本地懒加载 */
+      getSelectList(val) {
+        let self = this;
+        let list = [];
+        for(let i=0;i<self.selectListData.length;i++){
+          if(self.selectListData[i].name.indexOf(val) != -1){
+            list.push(self.selectListData[i]);
+          }
+        }
+        this.selectList = JSON.parse(JSON.stringify(list))
+      },
+      //实验室选中清除
+      clearClick(){
+        this.selectList = JSON.parse(JSON.stringify(this.selectListData))
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .addPage{
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    p{
+      margin:0;
+      padding:0;
+    }
+    .title-box{
+      display: flex;
+      height:90px;
+      border-bottom: 1px solid #D8D8D8;
+      p:nth-child(1){
+        flex:1;
+        font-size:16px;
+        line-height:90px;
+        margin-left:18px;
+        color:#0045AF;
+      }
+      p:nth-child(2){
+        margin:25px 25px 0 0;
+      }
+    }
+    .page-max-box{
+      flex:1;
+      display: flex;
+      flex-direction: column;
+      padding:20px 80px;
+      .two-form-flex{
+        display: flex;
+        .two-form-left{
+          flex:1;
+        }
+        .two-form-right{
+          width:130px;
+        }
+      }
+      .form-list-max-box{
+        .form-list-title-box{
+          display: flex;
+          background: #F5F5F5;
+          border-bottom:1px solid #e0e0e0;
+          p{
+            line-height:60px;
+            font-size:16px;
+            color:#333;
+          }
+          p:nth-child(1){
+            padding-left:58px;
+            width:255px;
+          }
+          p:nth-child(2){
+            width:469px;
+          }
+          p:nth-child(3){
+            width:252px;
+          }
+          p:nth-child(4){
+            flex:1;
+          }
+        }
+        .form-list-data-box{
+          display: flex;
+          border:1px solid #e0e0e0;
+          border-top:none;
+          padding-top:20px;
+          .form-list-data-title{
+            vertical-align:middle;
+            width:255px;
+            display: flex;
+            p{
+              height:40px;
+              line-height:40px;
+              align-self: center;
+              margin-top:-20px;
+              margin-left:58px;
+            }
+          }
+          .form-list-data-for-max-box{
+            .form-list-data-for{
+              display: flex;
+              .form-list-one-box{
+                width:469px;
+              }
+              .form-list-text-p{
+                width:252px;
+                line-height:40px;
+                font-size:14px;
+              }
+              .form-list-two-box{
+                flex:1;
+                .button-icon-p{
+                  color:#A2A2A2;
+                  width:40px;
+                  height:40px;
+                  line-height:40px;
+                  text-align: center;
+                  cursor: pointer;
+                  margin-left:20px;
+                }
+              }
+            }
+          }
+        }
+      }
+      .bottom-button-box{
+        display: flex;
+        width:260px;
+        margin:55px auto;
+        p:nth-child(1){
+          width:120px;
+          margin-right:20px;
+        }
+        p:nth-child(2){
+          width:120px;
+        }
+      }
+    }
+  }
+</style>

src/views/medicUniversity-3_1/chemicalManagement/chemicalProcurement/purchaseRequisition/draftPage.vue

@@ -0,0 +1,164 @@
+<!--草稿箱-->
+<template>
+  <div class="draftPage">
+    <div class="draftPage-min">
+      <el-form :model="queryParamsData" class="form-box" ref="queryForm" :inline="true">
+        <el-form-item label="关键字" prop="searchValue">
+          <el-input
+            style="width:210px;"
+            maxLength="30"
+            v-model="queryParamsData.searchValue"
+            placeholder="编号/化学品名/实验室"
+            clearable
+            size="small"
+          />
+        </el-form-item>
+        <el-form-item label="创建时间" prop="terminalStatus">
+          <el-date-picker
+            :clearable="false"
+            v-model="dateRange"
+            size="small"
+            style="width: 220px"
+            value-format="yyyy-MM-dd"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
+          <p class="reset-button-one" @click="resetQuery">重置</p>
+        </el-form-item>
+        <el-form-item style="float: right;">
+          <el-col :span="1.5">
+            <p class="reset-button-one"
+               @click="backPage"
+            >返回</p>
+          </el-col>
+        </el-form-item>
+      </el-form>
+      <el-table  border :data="tableList"ref="multipleTable">
+        <el-table-column label="申购编号" align="center" prop="joinNum" show-overflow-tooltip/>
+        <el-table-column label="实验室" align="center" prop="chemicalName" width="180" show-overflow-tooltip/>
+        <el-table-column label="申购信息" align="center" prop="casNum" show-overflow-tooltip>
+          <template slot-scope="scope">
+
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" align="center" prop="classifyName" width="181" show-overflow-tooltip/>
+        <el-table-column label="操作" align="center" prop="operator" width="140">
+          <template slot-scope="scope">
+            <div class="button-box">
+              <p class="table-min-button"
+                 style="margin:0!important;"
+                 @click="goPageInfo(2,scope.row)"
+              >编辑</p>
+              <p class="table-min-button"
+                 style="margin:0!important;"
+                 @click="goPageInfo(2,scope.row)"
+              >详情</p>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page-sizes="[20, 30, 40, 50]"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "draftPage",
+    props:{
+      draftPagePropsData:{},
+    },
+    data(){
+      return{
+        // 遮罩层
+        loading:false,
+        //页面状态
+        pageType:1,
+        // 创建时间
+        dateRange:[],
+        // 搜索数据
+        queryParamsData:{
+          pageNum:1,
+          pageSize:20,
+        },
+        // 搜索实际发送数据
+        queryParams:{
+          pageNum:1,
+          pageSize:20,
+        },
+        //数据数量
+        total:0,
+        //数据数组
+        tableList:[{}],
+      }
+    },
+    created() {
+
+    },
+    mounted(){
+
+    },
+    methods: {
+      //获取数据列表
+      getList(){
+        this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
+        // listHardware(this.queryParamsData).then(response => {
+        //   this.total = response.total;
+        //   this.tableList = response.rows;
+        // });
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParamsData.pageNum = 1;
+        this.queryParamsData.pageSize = 20;
+        this.queryParams = JSON.parse(JSON.stringify(this.queryParamsData));
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.$set(this,'queryParamsData',{});
+        this.$set(this,'queryParams',{});
+        this.handleQuery();
+      },
+      //返回
+      backPage(){
+        this.$parent.pageToggle(1);
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .draftPage{
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    p{
+      margin:0;
+      padding:0;
+    }
+    .draftPage-min{
+      flex:1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      padding:20px;
+      .button-box{
+        display: flex;
+      }
+    }
+  }
+</style>

src/views/medicUniversity-3_1/chemicalManagement/chemicalProcurement/purchaseRequisition/index.vue

@@ -1,18 +1,179 @@
 <!--采购申请-->
 <template>
   <div class="app-container purchaseRequisition">
-    <div class="purchaseRequisition-page">
+    <div class="purchaseRequisition-page" v-if="pageType == 1">
+      <el-form :model="queryParamsData" class="form-box" ref="queryForm" :inline="true">
+        <el-form-item label="关键字" prop="searchValue">
+          <el-input
+            maxLength="30"
+            v-model="queryParamsData.searchValue"
+            placeholder="编号/姓名/化学品名/实验室"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="状态" prop="deptId">
+          <el-select v-model="queryParamsData.deptId" clearable placeholder="请选择状态" style="width: 140px">
+            <el-option label="审批中" value="0"></el-option>
+            <el-option label="已通过" value="1"></el-option>
+            <el-option label="已拒绝" value="2"></el-option>
+            <el-option label="已撤销" value="3"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="申请时间" prop="terminalStatus">
+          <el-date-picker
+            :clearable="false"
+            v-model="dateRangeOne"
+            size="small"
+            style="width: 220px"
+            value-format="yyyy-MM-dd"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="完成时间" prop="terminalStatus">
+          <el-date-picker
+            :clearable="false"
+            v-model="dateRangeTwo"
+            size="small"
+            style="width: 220px"
+            value-format="yyyy-MM-dd"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
+          <p class="reset-button-one" @click="resetQuery">重置</p>
+        </el-form-item>
+        <el-form-item style="float: right;">
+          <el-col :span="1.5">
+            <p class="inquire-button-one"
+               style="width:100px;"
+               @click="pageToggle(3)"
+            >申购</p>
+          </el-col>
+        </el-form-item>
+        <el-form-item style="float: right;">
+          <el-col :span="1.5">
+            <p class="add-button-one-90"
+               style="width:100px;"
+               @click="pageToggle(2)"
+            >草稿箱</p>
+          </el-col>
+        </el-form-item>
+        <el-form-item style="float: right;">
+          <el-dropdown @command="exportButton">
+            <div class="form-dropdown-box">
+              <img src="@/assets/ZDimages/personnelManagement/icon_jzgxx_sc.png">
+              <p>导出</p>
+              <img src="@/assets/ZDimages/personnelManagement/icon_jzggl_xljt.png">
+            </div>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;color:#333;" :command="{command:1}">导出全部数据</el-dropdown-item>
+              <el-dropdown-item style="margin:0 10px;color:#666;" :command="{command:2}">导出选中数据</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-form-item>
+      </el-form>
+      <el-table  border :data="tableList" ref="multipleTable" @selection-change="handleSelectionChange" :row-key="getRowKeys">
+        <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
+        <el-table-column label="申购编号" align="center" prop="hardwareNum"/>
+        <el-table-column label="申购人" align="center" prop="deptName" width="250"/>
+        <el-table-column label="实验室" align="center" prop="posi" width="250" show-overflow-tooltip/>
+        <el-table-column label="申购信息" align="center" prop="status" width="100">
+          <template slot-scope="scope">
 
+          </template>
+        </el-table-column>
+        <el-table-column label="申请时间" align="center" prop="createTime" width="250"/>
+        <el-table-column label="完成时间" align="center" prop="createBy" width="150"/>
+        <el-table-column label="状态" align="center" prop="createBy" width="150"/>
+        <el-table-column label="审批人" align="center" prop="status" width="100">
+          <template slot-scope="scope">
+
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="440" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <div class="button-box">
+              <p class="table-min-button" style="margin-right:10px;">编辑</p>
+              <p class="table-min-button" style="margin-right:10px;">编辑</p>
+              <p class="table-min-button" style="margin-right:10px;">撤销</p>
+              <p class="table-min-button" style="margin-right:10px;">审批</p>
+              <p class="table-min-button" style="margin-right:10px;">审批单</p>
+              <p class="table-min-button">删除</p>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="display: flex;height:32px;margin-top:15px;">
+        <!--<p style="flex:4;"></p>-->
+        <p style="text-align: left;margin:0;line-height:32px;margin-right:20px;font-size:14px;color:#999;">
+          <i class="el-icon-warning" style="color:#0183FA;"></i>
+          已选择 {{selectedNum}} 项
+        </p>
+        <div style="flex:5;">
+          <pagination :page-sizes="[20, 30, 40, 50]"
+            v-show="total>0"
+            :total="total"
+            style="margin:0;"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getList"
+          />
+        </div>
+      </div>
     </div>
+    <draft-Page :draftPagePropsData="draftPagePropsData" v-if="pageType == 2"></draft-Page>
+    <list-Page :listPagePropsData="listPagePropsData" v-if="pageType == 3"></list-Page>
   </div>
 </template>
 
 <script>
+  import draftPage from "./draftPage.vue"
+  import listPage from "./listPage.vue"
   export default {
     name: "index",
+    components: {
+      draftPage,
+      listPage,
+    },
     data(){
       return{
-
+        // 传参数据
+        draftPagePropsData:{},
+        listPagePropsData:{},
+        //页面状态
+        pageType:1,
+        // 申请时间
+        dateRangeOne:[],
+        // 完成时间
+        dateRangeTwo:[],
+        // 搜索数据
+        queryParamsData:{
+          pageNum:1,
+          pageSize:20,
+        },
+        // 搜索实际发送数据
+        queryParams:{
+          pageNum:1,
+          pageSize:20,
+        },
+        //数据数量
+        total:0,
+        //数据数组
+        tableList:[{}],
+        // 选中用户组
+        userIds: [],
+        // 非多个禁用
+        multiple: true,
+        //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
+        selectedNum:0,
       }
     },
     created() {
@@ -22,7 +183,94 @@
 
     },
     methods: {
-
+      pageToggle(type){
+        if(type == 1){
+          this.pageType = 1;
+        }else if(type == 2){
+          this.pageType = 2
+        }else if(type == 3){
+          this.pageType = 3
+        }
+      },
+      //获取数据列表
+      getList(){
+        this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
+        // listHardware(this.queryParamsData).then(response => {
+        //   this.total = response.total;
+        //   this.tableList = response.rows;
+        // });
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParamsData.pageNum = 1;
+        this.queryParamsData.pageSize = 20;
+        this.queryParams = JSON.parse(JSON.stringify(this.queryParamsData));
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.$set(this,'queryParamsData',{});
+        this.$set(this,'queryParams',{});
+        this.handleQuery();
+      },
+      /** 当前时间 */
+      getCurrentTime () {
+        const yy = new Date().getFullYear()
+        const mm = new Date().getMonth() + 1
+        const dd = new Date().getDate()
+        const hh = new Date().getHours()
+        const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
+        const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
+        return yy + '-' + mm + '-' + dd
+      },
+      /** 导出按钮操作 */
+      exportButton(item) {
+        let self = this;
+        let currentDate = this.getCurrentTime()
+        if(item.command == 1){
+          self.$confirm(`确认导出全部数据?`, "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(async () => {
+            self.download('/chemical/hxpChemical/export/', {...self.queryParamsData}, '化学品信息-'+currentDate+'.xlsx')
+          }).catch(() => {})
+        }else if(item.command == 2){
+          if(self.ids.length>0) {
+            self.$confirm(`确认导出选中数据?`, "提示", {
+              confirmButtonText: "确定",
+              cancelButtonText: "取消",
+              type: "warning"
+            }).then(async () => {
+              let ids = self.ids.join(',');
+              let obj = {
+                ids :ids
+              }
+              console.log("obj",obj)
+              self.download(`/chemical/hxpChemical/export/`,obj, '化学品信息-'+currentDate+'.xlsx')
+            }).catch(() => {})
+          }else {
+            this.msgError('请选择要导出的数据')
+          }
+        }
+      },
+      /*下载失败列表*/
+      failureExcel(){
+        this.download('/chemical/hxpChemical/importErrorData', {}, `失败报表.xlsx`)
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.selectedNum = selection.length;
+        this.userIds = selection.map(item => item.userId)
+        this.multiple = !selection.length
+      },
+      /*===记录勾选数据===
+        需要再el-table 添加  :row-key="getRowKeys"
+        需要在selection 添加 :reserve-selection="true"
+      */
+      getRowKeys(row) {
+        return row.id
+      },
     }
   }
 </script>
@@ -44,6 +292,35 @@
       flex-direction: column;
       overflow: hidden;
       padding:20px;
+      .form-box{
+        .form-dropdown-box{
+          display: flex;
+          margin:0;
+          padding:0 10px;
+          cursor: pointer;
+          height:40px;
+          img:nth-child(1){
+            width:16px;
+            height:16px;
+            margin-top:12px;
+          }
+          p{
+            width:47px;
+            text-align: center;
+            font-size:14px;
+            margin:0;
+            line-height:40px;
+          }
+          img:nth-child(3){
+            width:10px;
+            height:6px;
+            margin-top:17px;
+          }
+        }
+      }
+      .button-box{
+        display: flex;
+      }
     }
   }
 </style>

src/views/medicUniversity-3_1/chemicalManagement/chemicalProcurement/purchaseRequisition/listPage.vue

@@ -0,0 +1,187 @@
+<!--申购-->
+<template>
+  <div class="listPage">
+    <div class="listPage-min" v-if="pageType == 1">
+      <el-form :model="queryParamsData" class="form-box" ref="queryForm" :inline="true">
+        <el-form-item label="关键字" prop="searchValue">
+          <el-input
+            style="width:210px;"
+            maxLength="30"
+            v-model="queryParamsData.searchValue"
+            placeholder="化学品名/别名/CAS号"
+            clearable
+            size="small"
+          />
+        </el-form-item>
+        <el-form-item label="分类" prop="deptId">
+          <el-select v-model="queryParamsData.deptId" clearable placeholder="请选择分类" style="width: 140px">
+            <el-option label="普通化学品" value="0"></el-option>
+            <el-option label="危险化学品" value="1"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="属性" prop="deptId">
+          <el-select v-model="queryParamsData.deptId" clearable placeholder="请选择属性" style="width: 140px">
+            <el-option label="有毒品" value="0"></el-option>
+            <el-option label="爆炸品" value="1"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
+          <p class="reset-button-one" @click="resetQuery">重置</p>
+        </el-form-item>
+        <el-form-item style="float: right;">
+          <el-col :span="1.5">
+            <p class="inquire-button-one"
+               @click="goPage(2)"
+            >确定</p>
+          </el-col>
+        </el-form-item>
+        <el-form-item style="float: right;">
+          <el-col :span="1.5">
+            <p class="reset-button-one"
+               @click="backPage"
+            >返回</p>
+          </el-col>
+        </el-form-item>
+      </el-form>
+      <el-table  border :data="tableList" ref="multipleTable" @selection-change="handleSelectionChange" :row-key="getRowKeys">
+        <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
+        <el-table-column label="ID" align="center" prop="joinNum" show-overflow-tooltip/>
+        <el-table-column label="化学品名" align="center" prop="chemicalName" show-overflow-tooltip/>
+        <el-table-column label="CAS号" align="center" prop="chemicalName" show-overflow-tooltip/>
+        <el-table-column label="分类" align="center" prop="chemicalName" show-overflow-tooltip/>
+        <el-table-column label="属性" align="center" prop="chemicalName" show-overflow-tooltip/>
+        <el-table-column label="形态" align="center" prop="chemicalName" show-overflow-tooltip/>
+        <el-table-column label="纯度" align="center" prop="chemicalName" show-overflow-tooltip/>
+      </el-table>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page-sizes="[20, 30, 40, 50]"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+    <add-page v-if="pageType == 2"></add-page>
+  </div>
+</template>
+
+<script>
+  import addPage from "./addPage.vue"
+  export default {
+    name: "listPage",
+    components: {
+      addPage,
+    },
+    props:{
+      listPagePropsData:{},
+    },
+    data(){
+      return{
+        // 遮罩层
+        loading:false,
+        //页面状态
+        pageType:1,
+        // 创建时间
+        dateRange:[{}],
+        // 搜索数据
+        queryParamsData:{
+          pageNum:1,
+          pageSize:20,
+        },
+        // 搜索实际发送数据
+        queryParams:{
+          pageNum:1,
+          pageSize:20,
+        },
+        //数据数量
+        total:0,
+        //数据数组
+        tableList:[{},{}],
+        // 选中用户组
+        userIds: [],
+        // 非多个禁用
+        multiple: true,
+        //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
+        selectedNum:0,
+      }
+    },
+    created() {
+
+    },
+    mounted(){
+
+    },
+    methods: {
+      goPage(type){
+        if(type==1){
+          this.pageType = 1;
+        }else if(type == 2){
+          this.pageType = 2;
+        }
+      },
+      //获取数据列表
+      getList(){
+        this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
+        // listHardware(this.queryParamsData).then(response => {
+        //   this.total = response.total;
+        //   this.tableList = response.rows;
+        // });
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParamsData.pageNum = 1;
+        this.queryParamsData.pageSize = 20;
+        this.queryParams = JSON.parse(JSON.stringify(this.queryParamsData));
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.$set(this,'queryParamsData',{});
+        this.$set(this,'queryParams',{});
+        this.handleQuery();
+      },
+      //返回
+      backPage(){
+        this.$parent.pageToggle(1);
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.selectedNum = selection.length;
+        this.userIds = selection.map(item => item.userId)
+        this.multiple = !selection.length
+      },
+      /*===记录勾选数据===
+        需要再el-table 添加  :row-key="getRowKeys"
+        需要在selection 添加 :reserve-selection="true"
+      */
+      getRowKeys(row) {
+        return row.id
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .listPage{
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    p{
+      margin:0;
+      padding:0;
+    }
+    .listPage-min{
+      flex:1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      padding:20px;
+      .button-box{
+        display: flex;
+      }
+    }
+  }
+</style>