feat:新增设备关联事项弹窗

sample-form-manager-ui/admin/src/assets/css/common.css

@@ -387,3 +387,9 @@
 .el-tooltip__popper {
   max-width: 20%;
 }
+.el-drawer__header{
+  margin-bottom: 20px !important;
+}
+.el-drawer__body{
+  border-top:1px solid #ececec;
+}

sample-form-manager-ui/admin/src/pages/hardware/NumberWriteDevice.vue

@@ -124,10 +124,10 @@
               </el-switch>
             </template>
           </el-table-column>
-          <!-- <el-table-column align="center" label="操作" width="150">
+          <el-table-column align="center" label="操作" width="100">
             <template slot-scope="scope">
               <div class="flex jca">
-                <span
+                <!-- <span
                   v-if="scope.row.active !== 1"
                   class="primary pointer"
                   @click="handleActive(scope.row)"
@@ -138,16 +138,19 @@
                   style="opacity: 0"
                   class="primary"
                   >激活</span
+                > -->
+                <span class="primary pointer" @click="handleBound(scope.row)"
+                  >绑定表单</span
                 >
-                <span class="primary pointer" @click="handleEdit(scope.row)"
+                <!-- <span class="primary pointer" @click="handleEdit(scope.row)"
                   >编辑</span
                 >
                 <span class="delete pointer" @click="handleDel(scope.row.id)"
                   >删除</span
-                >
+                > -->
               </div>
             </template>
-          </el-table-column> -->
+          </el-table-column>
         </el-table>
       </div>
       <div class="pagination" v-if="total">
@@ -171,11 +174,14 @@
       :title="title"
       ref="AddDevice"
     ></AddDevice>
+    <!-- 关联事项 -->
+    <AddMatter ref="AddMatter" :matterDrawer.sync="matterDrawer"></AddMatter>
   </div>
 </template>
 
 <script>
 import TableHeader from "@/components/TableHeader.vue";
+import AddMatter from "./modal/AddMatter.vue";
 import AddDevice from "./modal/AddDevice.vue";
 import { getDeviceList } from "@/api/device";
 import local from "@/utils/local";
@@ -183,6 +189,7 @@ export default {
   components: {
     TableHeader,
     AddDevice,
+    AddMatter,
   },
   data() {
     return {
@@ -198,6 +205,7 @@ export default {
       dialogVisible: false,
       title: "新增数字样表设备",
       loading: false,
+      matterDrawer: false,
     };
   },
   created() {
@@ -291,6 +299,13 @@ export default {
     handleChange(row) {
       console.log(row);
     },
+    // 绑定表单
+    handleBound(row) {
+      this.matterDrawer = true;
+      this.$nextTick(() => {
+        this.$refs.AddMatter.getDevInfo(row);
+      });
+    },
   },
 };
 </script>

sample-form-manager-ui/admin/src/pages/hardware/modal/AddMatter.vue

+<template>
+  <div>
+    <el-drawer size="70%" title="我是标题" :visible.sync="drawer">
+      <span slot="title"
+        >绑定样表（设备名称：{{ devInfo.deviceName || "--" }}）</span
+      >
+      <div class="main flex1 flex aic">
+        <div class="left">
+          <div class="header mb20">
+            已选择事项<span class="header-count primary"
+              >（已选择：事项3个 | 材料12个）</span
+            >
+          </div>
+          <!-- 列表 -->
+          <div class="matter-list">
+            <div class="matter-item flex flexc jcc" v-for="v in 20" :key="v">
+              <div class="matter-item-title">
+                机动车登记证、行驶证核发机动车登记证、行驶证核发机动车登记证、行驶证核发机动车登记证、行驶证核发
+              </div>
+              <div class="matter-item-count">材料数量：6</div>
+            </div>
+          </div>
+        </div>
+        <div class="right">
+          <div class="title mb20">选择事项</div>
+          <TableHeader>
+            <div slot="left">
+              <el-button
+                size="small"
+                plain
+                type="primary"
+                @click="handleJoinAll"
+                >批量加入</el-button
+              >
+            </div>
+            <div slot="right" class="flex">
+              <el-select
+                v-model="department"
+                size="small"
+                placeholder="选择部门"
+                class="autoWidth"
+                filterable
+              >
+                <template slot="prefix">
+                  {{
+                    (deptList.find((s) => s.deptNumber === department) || {})
+                      .name
+                  }}
+                </template>
+                <el-option
+                  v-for="item in deptList"
+                  :key="item.deptNumber"
+                  :label="item.name"
+                  :value="item.deptNumber"
+                >
+                </el-option>
+              </el-select>
+              <el-input
+                size="small"
+                v-model="searchVal"
+                style="width: 200px"
+                class="ml10 mr10"
+                placeholder="请输入事项全称搜索"
+                @keyup.native.enter="handleSearch"
+              ></el-input>
+              <el-button size="small" type="primary" @click="handleSearch"
+                >搜索</el-button
+              >
+              <el-button size="small" @click="handleReset">重置</el-button>
+            </div>
+          </TableHeader>
+          <!-- 表格 -->
+          <div class="table-content">
+            <div @click.stop>
+              <el-table
+                ref="curTable"
+                v-loading="loading"
+                :data="tableData"
+                size="small"
+                tooltip-effect="dark"
+                style="width: 100%"
+                max-height="650px"
+                border
+                :row-key="(row) => row.id"
+              >
+                <el-table-column
+                  type="selection"
+                  reserve-selection
+                  width="40"
+                  align="center"
+                >
+                </el-table-column>
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="50"
+                  align="center"
+                  :index="(index) => (current - 1) * size + index + 1"
+                >
+                </el-table-column>
+                <el-table-column
+                  prop="name"
+                  show-overflow-tooltip
+                  label="事项名称"
+                >
+                  <template slot-scope="scope">
+                    <p class="short">{{ scope.row.matterName }}</p>
+                    <p class="full-name">
+                      事项全称：{{ scope.row.matterFullName }}
+                    </p>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="部门"
+                  align="center"
+                  width="180"
+                  prop="deptName"
+                >
+                </el-table-column>
+                <el-table-column
+                  prop="datumCount"
+                  label="材料数量"
+                  align="center"
+                  width="80"
+                >
+                </el-table-column>
+                <el-table-column align="center" label="操作" width="80">
+                  <template>
+                    <span class="primary pointer">选择</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </div>
+          <div class="pagination" v-if="total">
+            <el-pagination
+              background
+              layout="total,sizes,prev,pager,next,jumper"
+              :pager-count="5"
+              :total="total"
+              :current-page="current"
+              :page-size="size"
+              :page-sizes="pageSizes"
+              @current-change="changePagination"
+              @size-change="changeSize"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <el-button size="small" @click="handleClose">取 消</el-button>
+        <el-button type="primary" size="small" @click="handleClose"
+          >确 定</el-button
+        >
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import TableHeader from "@/components/TableHeader.vue";
+import { getWriteMatterList } from "@/api/matter";
+import local from "@/utils/local";
+export default {
+  components: {
+    TableHeader,
+  },
+  props: {
+    matterDrawer: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      siteId: local.getLocal("writeSiteId")
+        ? local.getLocal("writeSiteId")
+        : "",
+      department: "",
+      searchVal: "",
+      current: 1,
+      size: 10,
+      total: 0,
+      tableData: [],
+      pageSizes: [10, 20, 30, 40, 50, 100, 200],
+      selectionKeys: [],
+      devInfo: {},
+    };
+  },
+  computed: {
+    drawer: {
+      get() {
+        return this.matterDrawer;
+      },
+      set(val) {
+        this.$emit("update:matterDrawer", val);
+      },
+    },
+    ...mapGetters(["deptList"]),
+  },
+  created() {},
+  methods: {
+    getDevInfo(row) {
+      this.devInfo = row;
+      this.getWriteMatterList();
+    },
+    // 获取填单系统事项列表
+    async getWriteMatterList() {
+      this.loading = true;
+      let res = await getWriteMatterList({
+        page: this.current,
+        size: this.size,
+        matterFullName: `%${this.searchVal}%`,
+        deptCode: this.department,
+        siteId: this.siteId,
+      });
+      this.loading = false;
+      if (res.data.code === 1) {
+        let { data, total } = res.data.data;
+        this.tableData = data;
+        this.total = total;
+        this.$refs.curTable.bodyWrapper.scrollTop = 0;
+      }
+    },
+    // 搜索
+    handleSearch() {
+      this.current = 1;
+      this.getWriteMatterList();
+    },
+    // 重置
+    handleReset() {
+      this.department = "";
+      this.searchVal = "";
+      this.current = 1;
+      this.getWriteMatterList();
+    },
+    // 翻页
+    changePagination(cur) {
+      this.current = cur;
+      this.getWriteMatterList();
+    },
+    // 改变每页显示数量
+    changeSize(size) {
+      this.size = size;
+      this.getWriteMatterList();
+    },
+    // 表格批量选中
+    handleSelectionChange(select) {
+      this.selectionKeys = select.map((v) => v.id);
+      console.log(select);
+    },
+    // 批量加入
+    handleJoinAll() {
+      if (!this.selectionKeys.length) {
+        this.$message.warning("请先勾选数据");
+        return;
+      }
+    },
+    // 关闭弹窗
+    handleClose() {
+      this.$refs.curTable.clearSelection();
+      this.department = "";
+      this.searchVal = "";
+      this.current = 1;
+      this.size = 10;
+      this.drawer = false;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+:deep(.el-drawer__body) {
+  display: flex;
+  flex-direction: column;
+}
+.main {
+  width: 100%;
+  overflow-y: auto;
+}
+.left {
+  height: 100%;
+  width: 35%;
+  padding: 20px;
+  border-right: 1px solid #ececec;
+  overflow-y: auto;
+  .matter-item {
+    height: 60px;
+    margin-bottom: 20px;
+    padding: 0px 20px;
+    border-left: 4px solid #06a16b;
+    border-radius: 4px;
+    font-size: 14px;
+    background-color: #f0f9f6;
+    .matter-item-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .matter-item-count {
+      margin-top: 4px;
+      color: #06a16b;
+    }
+  }
+}
+.right {
+  height: 100%;
+  width: 65%;
+  padding: 20px;
+  overflow-y: auto;
+}
+.footer {
+  height: 50px;
+  padding: 0px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  border-top: 1px solid #ececec;
+}
+.short {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.full-name {
+  color: rgb(172, 170, 170);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
\ No newline at end of file