feat(src/views/reagent/customform): 新增试剂表单自定义模块

src/api/reagent/customform.js

@@ -0,0 +1,25 @@
+import request from '@/utils/request'
+
+export function get_list(data) {
+  return request({
+    url: '/api/drug_form/getlist',
+    method: 'post',
+    data
+  })
+}
+
+export function add_update(data) {
+  return request({
+    url: '/api/drug_form/add_update',
+    method: 'post',
+    data
+  })
+}
+
+export function del(data) {
+  return request({
+    url: '/api/drug_form/del',
+    method: 'post',
+    data
+  })
+}

src/icons/svg/表单.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660288390721" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2379" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M247.0912 996.1472 100.5568 996.1472c-39.936 0-72.4992-32.5632-72.4992-72.4992L28.0576 81.92c0-39.936 32.5632-72.4992 72.4992-72.4992l766.0544 0c39.936 0 72.4992 32.5632 72.4992 72.4992l0 210.5344c0 12.3904-10.0352 22.528-22.528 22.528s-22.528-10.0352-22.528-22.528L894.0544 81.92c0-15.1552-12.288-27.5456-27.5456-27.5456L100.5568 54.3744c-15.1552 0-27.5456 12.288-27.5456 27.5456L73.0112 923.648c0 15.1552 12.288 27.5456 27.5456 27.5456l146.5344 0c12.3904 0 22.528 10.0352 22.528 22.528S259.4816 996.1472 247.0912 996.1472z" p-id="2380" fill="#1296db"></path><path d="M745.2672 192.1024 174.6944 192.1024c-12.3904 0-22.528-10.0352-22.528-22.528s10.0352-22.528 22.528-22.528l570.5728 0c12.3904 0 22.528 10.0352 22.528 22.528S757.6576 192.1024 745.2672 192.1024z" p-id="2381" fill="#1296db"></path><path d="M437.6576 429.6704 174.6944 429.6704c-12.3904 0-22.528-10.0352-22.528-22.528s10.0352-22.528 22.528-22.528l262.9632 0c12.3904 0 22.528 10.0352 22.528 22.528S450.1504 429.6704 437.6576 429.6704z" p-id="2382" fill="#1296db"></path><path d="M620.6464 310.8864 174.6944 310.8864c-12.3904 0-22.528-10.0352-22.528-22.528s10.0352-22.528 22.528-22.528l445.952 0c12.3904 0 22.528 10.0352 22.528 22.528S633.1392 310.8864 620.6464 310.8864z" p-id="2383" fill="#1296db"></path><path d="M399.6672 1009.8688c-6.2464 0-12.288-2.56-16.5888-7.2704-5.2224-5.7344-7.168-13.7216-5.12-21.2992l40.8576-146.6368c1.024-3.6864 3.072-7.168 5.7344-9.8304l408.9856-408.9856c14.1312-14.0288 36.9664-14.0288 51.0976 0l97.792 97.792c6.8608 6.8608 10.5472 15.872 10.5472 25.4976s-3.7888 18.7392-10.5472 25.4976L928.8704 618.496c-4.1984 4.1984-9.9328 6.5536-15.872 6.5536s-11.6736-2.3552-15.872-6.5536l-66.048-66.048c-8.8064-8.8064-8.8064-23.04 0-31.8464s23.04-8.8064 31.8464 0l50.176 50.176 31.4368-31.4368L859.136 454.0416 460.6976 852.48 431.104 958.6688 546.7136 936.96l231.7312-231.7312c5.0176-5.4272 50.7904-52.6336 107.2128-56.7296 12.3904-0.9216 23.1424 8.3968 24.064 20.7872 0.9216 12.3904-8.3968 23.1424-20.7872 24.064-40.3456 2.9696-77.4144 42.2912-77.824 42.7008-0.2048 0.2048-0.4096 0.512-0.7168 0.7168L573.5424 973.7216c-3.1744 3.1744-7.2704 5.3248-11.776 6.2464l-158.0032 29.5936C402.432 1009.7664 401.1008 1009.8688 399.6672 1009.8688z" p-id="2384" fill="#1296db"></path></svg>

src/router/modules/reagent.js

@@ -213,6 +213,19 @@ const reagentRouter = [
       }
     ]
   },
+  {
+    path: '/reagent/form',
+    component: Layout,
+    meta: { classification: 'reagent' },
+    children: [
+      {
+        path: 'index',
+        name: 'Form',
+        component: () => import('@/views/reagent/customform/index'),
+        meta: { title: '试剂表单自定义', icon: '表单', classification: 'reagent' }
+      }
+    ]
+  },
   {
     path: '/reagent/buy',
     component: Layout,

src/views/reagent/customform/index.vue

@@ -0,0 +1,304 @@
+<template>
+  <div class="main-container-text">
+    <div class="title">自定义表单</div>
+    <div class="header">
+      <el-button type="primary" @click="handleAdd">新增</el-button>
+      <el-button type="primary" plain @click="handleEdit"><i class="el-icon-edit" />编辑</el-button>
+      <el-button plain type="danger" @click="handleDis"><svg-icon icon-class="确认禁用" /> 禁用</el-button>
+      <el-button plain type="success" @click="handleEn"><svg-icon icon-class="解除禁用" /> 启用</el-button>
+      <div class="header-right">
+        <el-button type="primary" plain @click="handleDel">删除</el-button>
+        <el-button icon="el-icon-refresh" circle @click="getList" />
+      </div>
+    </div>
+    <el-table
+      v-loading="loading"
+      stripe
+      :data="tableData"
+      :header-cell-style="headerStyle"
+      height="69vh"
+      element-loading-text="拼命加载中"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column
+        type="selection"
+        width="55"
+        align="center"
+      />
+      <el-table-column
+        align="center"
+        type="index"
+        width="50"
+        label="序号"
+      />
+      <el-table-column
+        prop="name"
+        show-overflow-tooltip
+        label="名称"
+        align="center"
+      />
+      <el-table-column
+        prop="key_lenth"
+        label="长度"
+        align="center"
+      />
+      <el-table-column
+        show-overflow-tooltip
+        prop="description"
+        label="描述"
+        align="center"
+      />
+      <el-table-column
+        label="状态"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <el-tag
+            :type="scope.row.is_use=== 0 ? 'danger' : 'success'"
+            disable-transitions
+          >{{ scope.row.is_use=== 0 ?'未启用':'启用' }}</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="my-pagination" style="text-align: center">
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :current-page.sync="page"
+        :total="total"
+        :disabled="loading"
+        :page-size.sync="page_size"
+        @current-change="pageChange"
+      />
+    </div>
+    <el-dialog :visible.sync="dialogVisible" width="30%" :title="title" @close="handleClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="50px">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入名称" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="长度" prop="key_lenth">
+          <el-input v-model.number="formData.key_lenth" placeholder="请输入长度" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="描述" prop="description">
+          <el-input v-model="formData.description" placeholder="请输入描述" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="启用" prop="is_use" required>
+          <el-switch v-model="formData.is_use" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" style="text-align: center">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handelConfirm">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { get_list, del, add_update } from '@/api/reagent/customform'
+import stringify from '@/utils/stringify'
+
+export default {
+  name: 'CustomForm',
+  data() {
+    return {
+      page: 1,
+      page_size: 15,
+      total: 100,
+      dialogVisible: false,
+      loading: true,
+      title: '',
+      tableData: [
+        {
+          id: 1,
+          name: '硫酸',
+          purity: 'AR',
+          num: 0
+        },
+        {
+          id: 2,
+          name: '硼氢化钾',
+          purity: 'AR',
+          num: 0
+        },
+        {
+          id: 3,
+          name: '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚' +
+            '基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐（AR）',
+          purity: 'AR',
+          num: 0
+        }
+      ],
+      headerStyle: { 'background': '#E6E6E6' },
+      multipleSelection: [],
+      formData: {
+        name: undefined,
+        key_lenth: undefined,
+        description: undefined,
+        is_use: true
+      },
+      rules: {
+        name: [{
+          required: true,
+          message: '请输入名称',
+          trigger: 'blur'
+        }],
+        key_lenth: [{
+          required: true,
+          message: '请输入长度',
+          trigger: 'blur'
+        }],
+        description: [],
+        is_use: []
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handelConfirm() {
+      this.$refs['elForm'].validate(valid => {
+        if (!valid) return
+        const data = JSON.parse(JSON.stringify(this.formData))
+        data.is_use = data.is_use ? 1 : 0
+        data.drug_form_id = data.id
+        add_update(stringify(data)).then(res => {
+          this.$message.success(res.msg)
+          this.dialogVisible = false
+          this.getList()
+        })
+      })
+    },
+    getList() {
+      const data = {
+        page: this.page,
+        page_size: this.page_size
+      }
+      this.loading = true
+      get_list(stringify(data)).then(res => {
+        this.tableData = res.data.data_list
+        this.total = res.data.total_count
+      }).finally(() => { this.loading = false })
+    },
+    pageChange(page) {
+      this.page = page
+      this.getList()
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    handleAdd() {
+      this.title = '新增表单项'
+      this.dialogVisible = true
+    },
+    handleEdit() {
+      if (this.multipleSelection.length !== 1) {
+        this.$message.warning('请选择一个表单项')
+        return
+      }
+      this.title = '编辑表单项'
+      this.formData = JSON.parse(JSON.stringify(this.multipleSelection[0]))
+      this.formData.is_use = this.formData.is_use === 1
+      this.dialogVisible = true
+    },
+    handleDel() {
+      if (this.multipleSelection.length !== 1) {
+        this.$message.warning('请选择一个表单项')
+        return
+      }
+      this.$confirm('此操作将永久删除该表单自定义项, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const data = {
+          drug_form_id: this.multipleSelection[0].id
+        }
+        del(stringify(data)).then(res => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          })
+          this.getList()
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    handleDis() {
+      if (this.multipleSelection.length !== 1) {
+        this.$message.warning('请选择一个表单项')
+        return
+      }
+      this.$confirm('是否禁用该表单自定义项?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const data = JSON.parse(JSON.stringify(this.multipleSelection[0]))
+        data.is_use = 0
+        data.drug_form_id = data.id
+        add_update(stringify(data)).then(res => { this.$message.success(res.msg); this.getList() })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消禁用'
+        })
+      })
+    },
+    handleEn() {
+      if (this.multipleSelection.length !== 1) {
+        this.$message.warning('请选择一个表单项')
+        return
+      }
+      const data = JSON.parse(JSON.stringify(this.multipleSelection[0]))
+      data.is_use = 1
+      data.drug_form_id = data.id
+      add_update(stringify(data)).then(res => { this.$message.success(res.msg); this.getList() })
+    },
+    handleClose() {
+      this.formData = {
+        name: undefined,
+        key_lenth: undefined,
+        description: undefined,
+        is_use: true
+      }
+      this.$refs['elForm'].resetFields()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.main-container-text{
+  min-height:calc(100vh - 110px) ;
+  padding: 1rem;
+  margin: 1rem;
+  background: white;
+  .title{
+    font-size: 20px;
+    font-weight: bold;
+    color: #000000;
+  }
+  .header{
+    margin: 1rem 0 1rem 0;
+    .el-input{
+      width: 9.375rem;
+      margin-right: 1rem;
+    }
+    .el-select {
+      margin-right: 1rem;
+    }
+    .header-right{
+      float: right;
+    }
+  }
+}
+.add-item{
+  margin-bottom: 1rem;
+}
+</style>