feat(src/views/reagent/client): 完成柜体新增修改，锁定解锁功能

src/api/reagent/client.js

@@ -8,3 +8,21 @@ export function get_list(data) {
     data
   })
 }
+
+// /api/client/add_or_update
+export function add_or_update(data) {
+  return request({
+    url: '/api/client/add_or_update',
+    method: 'post',
+    data
+  })
+}
+
+//  /api/client/update_status
+export function update_status(data) {
+  return request({
+    url: '/api/client/update_status',
+    method: 'post',
+    data
+  })
+}

src/views/reagent/client/index.vue

@@ -4,11 +4,15 @@
     <div class="header">
       <el-input v-model="name" placeholder="请输入试剂名称" />
       <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
-      <el-button type="primary" plain icon="el-icon-plus">新增自定义柜体</el-button>
+      <el-button type="primary" plain icon="el-icon-plus" @click="handleFormOpen('add')">新增自定义柜体</el-button>
-      <el-button icon="el-icon-unlock">柜体锁定/解锁</el-button>
+      <el-button icon="el-icon-unlock" @click="handleLock">柜体锁定/解锁</el-button>
       <el-button><svg-icon icon-class="分配权限" /> 分配抽屉权限</el-button>
       <el-button><svg-icon icon-class="分配禁用用户" /> 分配禁用用户</el-button>
       <el-button type="danger" plain icon="el-icon-close">清空数据</el-button>
+      <div class="right">
+        <el-button icon="el-icon-delete" circle @click="handleDel" />
+        <el-button icon="el-icon-refresh" circle @click="getList" />
+      </div>
     </div>
     <el-table
       v-loading="loading"
@@ -72,6 +76,14 @@
         label="说明"
         align="center"
       />
+      <el-table-column
+        label="操作"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <el-button @click="handleFormEdit(scope.row)">编辑</el-button>
+        </template>
+      </el-table-column>
     </el-table>
     <div style="text-align: center">
       <el-pagination
@@ -85,12 +97,96 @@
         @current-change="pageChange"
       />
     </div>
+    <el-dialog :title="dialogTitile" :visible="dialogVisible" @close="onClose">
+      <el-row :gutter="15">
+        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
+          <el-col :span="24">
+            <el-form-item label="柜体名称" prop="client_name">
+              <el-input
+                v-model="formData.client_name"
+                placeholder="请输入柜体名称"
+                clearable
+                :style="{width: '100%'}"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="柜体标题" prop="client_title">
+              <el-input
+                v-model="formData.client_title"
+                placeholder="请输入柜体标题"
+                clearable
+                :style="{width: '100%'}"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="柜体序号" prop="client_code">
+              <el-input v-model="formData.client_code" placeholder="请输入柜体序号" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="柜体类型" prop="client_type">
+              <el-input v-model="formData.client_type" placeholder="请输入柜体类型" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="柜体位置" prop="place">
+              <el-input v-model="formData.place" placeholder="请输入柜体位置" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="柜体滤芯 生产日期" prop="filter_production_date">
+              <el-date-picker
+                v-model="formData.filter_production_date"
+                style="width: 100%"
+                type="datetime"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                placeholder="请选择柜体滤芯 生产日期"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="提醒滤芯 到期提前" prop="filter_shelf_life_warning_value">
+              <el-input
+                v-model="formData.filter_shelf_life_warning_value"
+                placeholder="请输入提醒滤芯 到期提前"
+                clearable
+                :style="{width: '100%'}"
+              >
+                <template slot="append">天</template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系人" prop="contact_people_name">
+              <el-input v-model="formData.contact_people_name" placeholder="请输入联系人" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系电话" prop="contact_phone">
+              <el-input v-model="formData.contact_phone" placeholder="请输入联系电话" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="说明" prop="description">
+              <el-input v-model="formData.description" placeholder="请输入说明" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+      <div slot="footer" style="text-align: center">
+        <el-button @click="onClose">取消</el-button>
+        <el-button type="primary" @click="handelConfirm">确定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import stringify from '@/utils/stringify'
-import { get_list } from '@/api/reagent/client'
+import { get_list, add_or_update, update_status } from '@/api/reagent/client'
 
 export default {
   name: 'Client',
@@ -103,7 +199,58 @@ export default {
       loading: false,
       multipleSelection: [],
       tableData: [],
-      headerStyle: { 'background': '#E6E6E6' }
+      headerStyle: { 'background': '#E6E6E6' },
+      formData: {
+        client_id: undefined,
+        client_name: undefined,
+        client_title: undefined,
+        client_code: undefined,
+        client_type: undefined,
+        place: undefined,
+        filter_production_date: null,
+        filter_shelf_life_warning_value: undefined,
+        contact_people_name: undefined,
+        contact_phone: undefined,
+        description: undefined
+      },
+      rules: {
+        client_name: [{
+          required: true,
+          message: '请输入柜体名称',
+          trigger: 'blur'
+        }],
+        client_title: [{
+          required: true,
+          message: '请输入柜体标题',
+          trigger: 'blur'
+        }],
+        client_code: [{
+          required: true,
+          message: '请输入柜体序号',
+          trigger: 'blur'
+        }],
+        client_type: [{
+          required: true,
+          message: '请输入柜体类型',
+          trigger: 'blur'
+        }],
+        place: [],
+        filter_production_date: [{
+          required: true,
+          message: '请选择柜体滤芯 生产日期',
+          trigger: 'change'
+        }],
+        filter_shelf_life_warning_value: [{
+          required: true,
+          message: '请输入提醒滤芯 到期提前',
+          trigger: 'blur'
+        }],
+        contact_people_name: [],
+        contact_phone: [],
+        description: []
+      },
+      dialogVisible: false,
+      dialogTitile: ''
     }
   },
   created() {
@@ -115,7 +262,8 @@ export default {
       this.multipleSelection = val
     },
     pageChange(page) {
-
+      this.page = page
+      this.getList()
     },
     getList() {
       this.loading = true
@@ -128,6 +276,78 @@ export default {
         this.tableData = res.data.data_list
         this.total = res.data.total_count
       }).finally(() => { this.loading = false })
+    },
+    onClose() {
+      this.dialogVisible = false
+      this.formData = {
+        client_id: undefined,
+        client_name: undefined,
+        client_title: undefined,
+        client_code: undefined,
+        client_type: undefined,
+        place: undefined,
+        filter_production_date: null,
+        filter_shelf_life_warning_value: undefined,
+        contact_people_name: undefined,
+        contact_phone: undefined,
+        description: undefined
+      }
+      this.$refs['elForm'].resetFields()
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(valid => {
+        if (!valid) return
+        add_or_update(stringify(this.formData)).then(
+          res => {
+            this.$message.success(res.msg)
+            this.onClose()
+            this.getList()
+          }
+        )
+      })
+    },
+    handleFormOpen(t) {
+      this.dialogTitile = '新增自定义柜体'
+      this.dialogVisible = true
+    },
+    handleFormEdit(row) {
+      this.dialogTitile = '编辑柜体信息'
+      Object.keys(this.formData).forEach(item => {
+        this.formData[item] = row[item]
+      })
+      this.formData.client_id = row.client_id
+      this.dialogVisible = true
+    },
+    handleDel() {
+    },
+    handleLock() {
+      if (this.multipleSelection.length !== 1) {
+        this.$message.warning('请选择一个柜体！')
+      }
+      const { client_id, is_enabled } = this.multipleSelection[0]
+      const data = {
+        status_type: is_enabled === 0 ? 1 : 0,
+        client_id: client_id
+      }
+      const text = is_enabled === 1 ? '确定要锁定所选的柜体？' : '确定要解锁所选的柜体？'
+      this.$confirm(text, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        update_status(stringify(data)).then(res => {
+          this.$message({
+            type: 'success',
+            message: res.msg
+          })
+          this.getList()
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
     }
   }
 }
@@ -146,6 +366,9 @@ export default {
   }
   .header{
     margin: 1rem 0 1rem 0;
+    .right{
+      float: right;
+    }
     .el-input{
       width: 9.375rem;
       margin-right: 1rem;