refactor:[资源库管理][钥匙关管理]前端模块化重构

src/App.vue

@@ -13,8 +13,15 @@ export default {
   components: { ThemePicker }
 }
 </script>
-<style scoped>
+<style rel="stylesheet/scss" lang="scss">
 #app .theme-picker {
   display: none;
 }
+
+/*搜索区域样式 */
+.search-area {
+  input{
+    width: 150px;
+  }
+}
 </style>

src/lang/en.js

@@ -9,6 +9,7 @@ export default {
     search: 'search',
     reset: 'reset',
     add: 'add',
+    edit: 'edit',
     export: 'export',
     saveConfirm: 'confirm',
     confirm: 'confirm',
@@ -16,7 +17,9 @@ export default {
     operate: 'operate',
     placeholderInput: 'Please Enter',
     placeholderSelect: 'Please Select',
-    confirmDelete: 'confirm delete？'
+    confirmDelete: 'confirm delete？',
+    startDate:'start date',
+    endDate:'end date',
   },
   menu: {
     PersonalCenter: 'Personal Center',
@@ -167,7 +170,7 @@ export default {
           djy: '待借阅',
           jyz: '借阅中'
         },
-        zjzt: {
+        jlzt: {
           wsd: '未锁定',
           ysd: '已锁定',
           dgd: '待归档',
@@ -204,6 +207,39 @@ export default {
           lqr2mm:'钥匙2领取人密码',
           ffr:'发放人',
           ffrmm:'发放人密码',
+        },
+         mjy:{
+          mc:'名称',
+          bh:'编号',
+          jyzt:'借阅状态',
+          zjzt:'制剂状态',
+          sxrq:'失效日期',
+          nd:'浓度',
+          kcl:'库存量',
+          zcgMc:'暂存柜',
+          cctj:'存储条件',
+          ccwz:'存储位置',
+
+          plff:'批量发放',
+          plczyj:'批量处置药剂',
+          plczrq:'批量处置容器',
+          ysff:'钥匙发放',
+          plsd:'批量锁定',
+          plgd:'批量归档',
+
+          ff:'发放',
+          gh:'归还',
+          czrq:'处置容器',
+          czyj:'处置药剂',
+          xgkc:'修改库存',
+          shxgkc:'审核修改库存',
+          shbj:'审核编辑',
+          sd:'锁定',
+          js:'解锁',
+          gd:'归档',
+          jd:'解档',
+          jy:'借阅',
+          gh:'归还',
         }
       }
     }

src/lang/zh.js

@@ -9,6 +9,7 @@ export default {
     search: '查询',
     reset: '重置',
     add: '新增',
+    edit: '编辑',
     export: '导出',
     saveConfirm: '确定',
     confirm: '确认',
@@ -16,7 +17,9 @@ export default {
     operate: '操作',
     placeholderInput: '请输入',
     placeholderSelect: '请选择',
-    confirmDelete: '确认删除？'
+    confirmDelete: '确认删除？',
+    startDate:'开始日期',
+    endDate:'结束日期',
   },
   menu: {
     PersonalCenter: '个人中心',
@@ -167,7 +170,7 @@ export default {
           djy: '待借阅',
           jyz: '借阅中'
         },
-        zjzt: {
+        jlzt: {
           wsd: '未锁定',
           ysd: '已锁定',
           dgd: '待归档',
@@ -204,6 +207,40 @@ export default {
           lqr2mm:'钥匙2领取人密码',
           ffr:'发放人',
           ffrmm:'发放人密码',
+        },
+        mjy:{
+          mc:'名称',
+          bh:'编号',
+          jyzt:'借阅状态',
+          zjzt:'制剂状态',
+          sxrq:'失效日期',
+          nd:'浓度',
+          kcl:'库存量',
+          zcgMc:'暂存柜',
+          cctj:'存储条件',
+          ccwz:'存储位置',
+
+          plff:'批量发放',
+          plczyj:'批量处置药剂',
+          plczrq:'批量处置容器',
+          ysff:'钥匙发放',
+          plsd:'批量锁定',
+          plgd:'批量归档',
+
+          ff:'发放',
+          gh:'归还',
+          czrq:'处置容器',
+          czyj:'处置药剂',
+          xgkc:'修改库存',
+          shxgkc:'审核修改库存',
+          shbj:'审核编辑',
+          sd:'锁定',
+          js:'解锁',
+          gd:'归档',
+          jd:'解档',
+          jy:'借阅',
+          gh:'归还',
+          xq:'详情',
         }
       }
     }

src/views/business/resource/zcg/list.vue

@@ -1,12 +1,16 @@
 <template>
-  <div class="app-container zcg">
+  <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
+      <!-- 暂存柜 -->
       <el-form-item :label="$t('page.business.zykgl.zcg.zcg') + '：'">
-        <el-input v-model="queryParams.mc"  clearable @change="handleQuery" :placeholder="$t('form.placeholderInput')"/>
+        <el-input v-model="queryParams.mc" clearable @change="handleQuery" :placeholder="$t('form.placeholderInput')" />
       </el-form-item>
+      <!-- 借阅人 -->
       <el-form-item :label="$t('page.business.zykgl.zcg.jyr') + '：'">
-        <el-input v-model="queryParams.jyrId"  clearable @change="handleQuery" :placeholder="$t('form.placeholderInput')"/>
+        <el-input v-model="queryParams.jyrId" clearable @change="handleQuery"
+          :placeholder="$t('form.placeholderInput')" />
       </el-form-item>
+      <!-- 状态 -->
       <el-form-item :label="$t('page.business.zykgl.zcg.zt') + '：'">
         <el-select v-model="queryParams.zt" :placeholder="$t('form.placeholderSelect')" clearable @change="handleQuery">
           <el-option key="5" :label="$t('page.business.zykgl.zcg.jyz')" value="5" />
@@ -21,6 +25,7 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
+        <!-- 批量归还 -->
         <el-button type="primary" :disabled="multiple" @click="handlePlgh"
           v-hasPermi="['business:resource:zcg:ysgh']">{{
             $t('page.business.zykgl.zcg.plgh') }}</el-button>
@@ -29,7 +34,8 @@
 
     <el-table v-loading="loading" :data="ZcgList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" :selectable="checkSelectable" />
-      <el-table-column :label="$t('page.business.zykgl.zcg.zcg')" align="left" prop="mc" width="250px" />
+      <el-table-column :label="$t('page.business.zykgl.zcg.zcg')" align="left" prop="mc"
+        :show-overflow-tooltip="true" />
       <el-table-column :label="$t('page.business.zykgl.zcg.ys1jyr')" align="center" prop="lqr1Mc" width="150px" />
       <el-table-column :label="$t('page.business.zykgl.zcg.ys2jyr')" align="center" prop="lqr2Mc" width="150px" />
       <el-table-column :label="$t('page.business.zykgl.zcg.zt')" align="center" width="150px">
@@ -38,12 +44,16 @@
           <span v-if="scope.row.zt == 5">{{ $t('page.business.zykgl.zcg.jyz') }}</span>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('page.business.zykgl.zcg.glyj')" align="center" prop="glyj" />
-      <el-table-column :label="$t('form.operate')" align="center" class-name="small-padding fixed-width" width="150px">
+      <el-table-column :label="$t('page.business.zykgl.zcg.glyj')" align="center" prop="glyj"
+        :show-overflow-tooltip="true" />
+      <el-table-column :label="$t('form.operate')" align="center" fixed="right" class-name="small-padding fixed-width"
+        width="150px">
         <template slot-scope="scope">
+          <!-- 钥匙发放 -->
           <el-button size="mini" type="text" v-if="scope.row.zt == 1" @click="handleffys(scope.row)"
             v-hasPermi="['business:resource:zcg:ysff']">{{
               $t('page.business.zykgl.zcg.ysff') }}</el-button>
+          <!-- 钥匙归还 -->
           <el-button size="mini" type="text" v-if="scope.row.zt == 5" @click="handleghys(scope.row)"
             v-hasPermi="['business:resource:zcg:ysgh']">{{
               $t('page.business.zykgl.zcg.gh') }}</el-button>
@@ -53,181 +63,33 @@
 
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
       @pagination="getList" />
-
-    <el-dialog :title="$t('page.business.zykgl.zcg.ysgh')" :visible.sync="openYsgh" width="1000px" append-to-body
-      :close-on-click-modal="false">
-      <el-form ref="formYsgh" :model="formYsgh" :rules="rulesYsgh" label-width="130px">
-        <template v-if="plYsgh">
-          <el-alert :title="$t('page.business.zykgl.zcg.ysghts') + '：'" type="error" :closable="false">
-          </el-alert>
-          <el-row style="margin:10px 0px;">
-            <el-col :span="24">
-              <el-table :data="selectList" border>
-                <el-table-column :label="$t('page.business.zykgl.zcg.zcg')" align="left" prop="mc" width="200px" />
-                <el-table-column :label="$t('page.business.zykgl.zcg.ys1jyr')" align="center" prop="lqr1Mc"
-                  width="150px" />
-                <el-table-column :label="$t('page.business.zykgl.zcg.ys2jyr')" align="center" prop="lqr2Mc"
-                  width="150px" />
-                <el-table-column :label="$t('page.business.zykgl.zcg.glyj')" align="center" prop="glyj" />
-              </el-table>
-            </el-col>
-          </el-row>
-        </template>
-        <template v-else>
-          <el-row>
-            <el-col :span="12">
-              <el-form-item :label="$t('page.business.zykgl.zcg.zcg')" prop="mc">
-                <el-input type="text" v-model="formYsgh.mc" maxlength="50" disabled :placeholder="$t('form.placeholderInput')"/>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item :label="$t('page.business.zykgl.zcg.glyj')" prop="glyj">
-                <el-input type="text" v-model="formYsgh.glyj" maxlength="50" disabled :placeholder="$t('form.placeholderInput')"/>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </template>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item :label="$t('page.business.zykgl.zcg.ghr1Id')" prop="ghr1Id">
-              <el-input type="text" v-model="formYsgh.ghr1Id" maxlength="50" :placeholder="$t('form.placeholderSelect')"/>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item :label="$t('page.business.zykgl.zcg.ghr1mm')" prop="ghr1mm">
-              <el-input type="text" v-model="formYsgh.ghr1mm" maxlength="20" :placeholder="$t('form.placeholderInput')"/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item :label="$t('page.business.zykgl.zcg.ghr2Id')" prop="ghr2Id">
-              <el-input type="text" v-model="formYsgh.ghr2Id" maxlength="50" :placeholder="$t('form.placeholderSelect')"/>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item :label="$t('page.business.zykgl.zcg.ghr2mm')" prop="ghr2mm">
-              <el-input type="text" v-model="formYsgh.ghr2mm" maxlength="20" :placeholder="$t('form.placeholderInput')"/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item :label="$t('page.business.zykgl.zcg.jsr')">
-              <el-input type="text" v-model="nickName" maxlength="50" disabled :placeholder="$t('form.placeholderInput')"/>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item :label="$t('page.business.zykgl.zcg.jsrmm')" prop="jsrmm">
-              <el-input type="text" v-model="formYsgh.jsrmm" maxlength="20" :placeholder="$t('form.placeholderInput')"/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item :label="$t('page.business.zykgl.zcg.qmyy')" prop="qmyy">
-              <el-input type="text" :value="$t('page.business.zykgl.zcg.ysgh')" maxlength="50" disabled :placeholder="$t('form.placeholderInput')"/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="saveYsgh">{{ $t('form.confirm') }}</el-button>
-        <el-button @click="cancelYsgh">{{ $t('form.cancel') }}</el-button>
-      </div>
-    </el-dialog>
-
-    <el-dialog :title="$t('page.business.zykgl.zcg.ysff')" :visible.sync="openYsff" width="800px" append-to-body
-      :close-on-click-modal="false">
-      <el-form ref="formYsff" :model="formYsff" :rules="rulesYsff" label-width="130px">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item :label="$t('page.business.zykgl.zcg.zcg')" prop="mc">
-              <el-input type="text" v-model="formYsff.mc" maxlength="50" disabled :placeholder="$t('form.placeholderInput')"/>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item :label="$t('page.business.zykgl.zcg.glyj')" prop="glyj">
-              <el-input type="text" v-model="formYsff.glyj" maxlength="500" :placeholder="$t('form.placeholderInput')"/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item :label="$t('page.business.zykgl.zcg.qmyy')" prop="qmyy">
-              <el-input type="text" :value="$t('page.business.zykgl.zcg.ysff')" maxlength="50" disabled :placeholder="$t('form.placeholderInput')"/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item :label="$t('page.business.zykgl.zcg.remark')" prop="remark">
-              <el-input type="textarea" v-model="formYsff.remark" :rows="2" maxlength="500" :placeholder="$t('form.placeholderInput')">
-              </el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item :label="$t('page.business.zykgl.zcg.lqr1Id')" prop="lqr1Id">
-              <el-input type="text" v-model="formYsff.lqr1Id" maxlength="50" :placeholder="$t('form.placeholderSelect')"/>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item :label="$t('page.business.zykgl.zcg.lqr1mm')" prop="lqr1mm">
-              <el-input type="text" v-model="formYsff.lqr1mm" maxlength="20" :placeholder="$t('form.placeholderInput')"/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item :label="$t('page.business.zykgl.zcg.lqr2Id')" prop="lqr2Id">
-              <el-input type="text" v-model="formYsff.lqr2Id" maxlength="50" :placeholder="$t('form.placeholderSelect')"/>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item :label="$t('page.business.zykgl.zcg.lqr2mm')" prop="lqr2mm">
-              <el-input type="text" v-model="formYsff.lqr2mm" maxlength="20" :placeholder="$t('form.placeholderInput')"/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item :label="$t('page.business.zykgl.zcg.ffr')">
-              <el-input type="text" v-model="nickName" maxlength="50" disabled :placeholder="$t('form.placeholderInput')"/>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item :label="$t('page.business.zykgl.zcg.ffrmm')" prop="ffrmm">
-              <el-input type="text" v-model="formYsff.ffrmm" maxlength="20" :placeholder="$t('form.placeholderInput')"/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="saveYsff">{{ $t('form.confirm') }}</el-button>
-        <el-button @click="cancelYsff">{{ $t('form.cancel') }}</el-button>
-      </div>
-    </el-dialog>
-
+     <!-- 钥匙发放 -->
+    <Ysff ref="Ysff" @callback="handleQuery"/>
+     <!-- 钥匙归还 -->
+    <Ysgh  ref="Ysgh" @callback="handleQuery" />
   </div>
 </template>
 
 <script>
-import { zcg_list, zcg_info, zcg_yygh, zcg_yyff, zcg_ysghBatch } from "@/api/business/zcg/zcg"
-import { mapGetters } from 'vuex'
+import { zcg_list } from "@/api/business/zcg/zcg"
+import Ysff from "./comps/Ysff";
+import Ysgh from "./comps/Ysgh";
 
 export default {
   name: "Zcg",
+  components: {
+    Ysff, Ysgh
+  },
   data() {
     return {
       loading: true,
-      ids: [],
       single: true,
       multiple: true,
       total: 0,
       ZcgList: [],
+      //勾选列表
       selectList: [],
+      //查询条件
       queryParams: {
         pageNum: 1,
         pageSize: 10,
@@ -235,93 +97,21 @@ export default {
         jyrId: null,
         zt: null,
       },
-      openYsff: false,
-      formYsff: {
-
-      },
-      rulesYsff: {
-        glyj: [{
-          required: true,
-          message: ' ',
-          trigger: 'blur'
-        }],
-        lqr1Id: [{
-          required: true,
-          message: ' ',
-          trigger: 'blur'
-        }],
-        lqr2Id: [{
-          required: true,
-          message: ' ',
-          trigger: 'blur'
-        }],
-        lqr1mm: [{
-          required: true,
-          message: ' ',
-          trigger: 'blur'
-        }],
-        lqr2mm: [{
-          required: true,
-          message: ' ',
-          trigger: 'blur'
-        }],
-        ffrmm: [{
-          required: true,
-          message: ' ',
-          trigger: 'blur'
-        }],
-      },
-      openYsgh: false,
-      plYsgh: false,
-      formYsgh: {},
-      rulesYsgh: {
-        ghr1Id: [{
-          required: true,
-          message: ' ',
-          trigger: 'blur'
-        }],
-        ghr2Id: [{
-          required: true,
-          message: ' ',
-          trigger: 'blur'
-        }],
-        ghr1mm: [{
-          required: true,
-          message: ' ',
-          trigger: 'blur'
-        }],
-        ghr2mm: [{
-          required: true,
-          message: ' ',
-          trigger: 'blur'
-        }],
-        jsrmm: [{
-          required: true,
-          message: ' ',
-          trigger: 'blur'
-        }],
-      }
     }
   },
-  computed: {
-    ...mapGetters([
-      'nickName'
-    ]),
-  },
   created() {
     this.getList()
   },
   methods: {
-    // 控制哪些行可选
-    checkSelectable(row, index) {
-      return row.zt === 5
+    //勾选
+    checkSelectable(row) {
+      return row.zt === 5 //只能是借用中的才能勾选
     },
+    //批量归还
     handlePlgh() {
-      this.plYsgh = true
-      this.resetYsgh()
-      this.formYsgh.ids = this.selectList.map(item => item.id).join(',')
-      this.openYsgh = true
+      this.$refs.Ysgh.showBatch(this.selectList)
     },
+    //获取列表
     getList() {
       this.loading = true
       zcg_list(this.queryParams).then(response => {
@@ -330,110 +120,30 @@ export default {
         this.loading = false
       })
     },
-    cancelYsff() {
-      this.openYsff = false
-      this.resetYsff()
-    },
-    cancelYsgh() {
-      this.openYsgh = false
-      this.resetYsgh()
-    },
-    resetYsff() {
-      this.formYsff = {
-        id: null,
-        mc: null,
-        glyj: null,
-        qmyy: '钥匙发放',
-        remark: null,
-        lqr1Id: null,
-        lqr2Id: null,
-        lqr1mm: null,
-        lqr2mm: null,
-        ffrmm: null
-      }
-      this.resetForm("resetYsff")
-    },
-    resetYsgh() {
-      this.formYsgh = {
-        id: null,
-        ids: null,
-        mc: null,
-        qmyy: '钥匙归还',
-        ghr1Id: null,
-        ghr2Id: null,
-        ghr1mm: null,
-        ghr2mm: null,
-        jsrId: null,
-        jsrmm: null
-      }
-      this.resetForm("resetYsgh")
-    },
+    //查询
     handleQuery() {
       this.queryParams.pageNum = 1
       this.getList()
     },
+    //重置
     resetQuery() {
       this.resetForm("queryForm")
       this.handleQuery()
     },
+    //勾选回调
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
       this.single = selection.length !== 1
       this.multiple = !selection.length
       this.selectList = selection
     },
+    //钥匙发放
     handleffys(row) {
-      this.resetYsff()
-      this.formYsff.id = row.id
-      this.formYsff.mc = row.mc
-      this.openYsff = true
+      this.$refs.Ysff.show(row)
     },
+    //钥匙归还
     handleghys(row) {
-      this.plYsgh = false
-      this.resetYsgh()
-      zcg_info({ id: row.id }).then(response => {
-        this.formYsgh.id = response.data.id
-        this.formYsgh.mc = response.data.mc
-        this.formYsgh.glyj = response.data.glyj
-        this.openYsgh = true
-      })
-    },
-    saveYsgh() {
-      this.$refs["formYsgh"].validate(valid => {
-        if (valid) {
-          if (this.plYsgh) {
-            zcg_ysghBatch(this.formYsgh).then(response => {
-              this.openYsgh = false
-              this.getList()
-            })
-          } else {
-            zcg_yygh(this.formYsgh).then(response => {
-              this.openYsgh = false
-              this.getList()
-            })
-          }
-
-        }
-      })
-    },
-    saveYsff() {
-      this.$refs["formYsff"].validate(valid => {
-        if (valid) {
-          zcg_yyff(this.formYsff).then(response => {
-            this.openYsff = false
-            this.getList()
-          })
-        }
-      })
+      this.$refs.Ysgh.show(row)
     }
   }
 }
-</script>
-
-<style rel="stylesheet/scss" lang="scss">
-.zcg {
-  .select-list {
-    margin: 10px 0px;
-  }
-}
-</style>
+</script>