From 865bde0577c156842f75dbc6ffacdc3b414504e5 Mon Sep 17 00:00:00 2001
From: fuguobin <fgbin2008@163.com>
Date: Thu, 21 Mar 2024 10:06:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=B5=84=E4=BA=A7=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E6=96=B0=E5=A2=9E=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/model/asset/addParams.vue | 291 ++++++++++++++++++++++++++++
 src/views/model/asset/params.vue    | 200 +++++++++++++------
 2 files changed, 436 insertions(+), 55 deletions(-)
 create mode 100644 src/views/model/asset/addParams.vue

diff --git a/src/views/model/asset/addParams.vue b/src/views/model/asset/addParams.vue
new file mode 100644
index 0000000..cec031b
--- /dev/null
+++ b/src/views/model/asset/addParams.vue
@@ -0,0 +1,291 @@
+<template>
+  <div class="app-container">
+    <el-collapse class="paramsCollapse" v-model="activeNames">
+      <el-collapse-item title="基本信息" name="1">
+        <el-form :inline="true" :model="addForm" class="demo-form-inline">
+          <el-form-item label="资产编号">
+            <el-input
+              v-model="addForm.num"
+              placeholder="资产编号"
+              clearable
+              readonly
+            />
+          </el-form-item>
+          <el-form-item label="资产名称">
+            <el-input v-model="addForm.name" placeholder="资产名称" clearable />
+          </el-form-item>
+          <el-form-item label="组成设备">
+            <el-select
+              v-model="addForm.device"
+              multiple
+              filterable
+              allow-create
+              default-first-option
+              :reserve-keyword="false"
+              placeholder="组成设备"
+              style="width: 240px"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="success" @click="selectParams">选择参数</el-button>
+          </el-form-item>
+        </el-form>
+      </el-collapse-item>
+      <el-collapse-item title="参数列表" name="2">
+        <vxe-table
+          class="tableCollapse"
+          border
+          ref="tableRef"
+          max-height="400"
+          :row-config="{ isHover: true }"
+          :loading="loading"
+          :data="tableListData"
+        >
+          <vxe-column type="checkbox" width="60"></vxe-column>
+          <vxe-column field="role" title="参数编码"></vxe-column>
+          <vxe-column
+            field="address"
+            title="参数名称"
+            :filters="addressOptions"
+            :filter-method="filterAddressMethod"
+            :filter-recover-method="filterAddressRecoverMethod"
+          >
+            <template #filter="{ $panel, column }">
+              <vxe-input
+                class="filterInput"
+                v-for="(option, index) in column.filters"
+                :key="index"
+                v-model="option.data"
+                @input="$panel.changeOption($event, !!option.data, option)"
+                @keyup.enter="$panel.confirmFilter()"
+                placeholder="参数名称"
+                size="mini"
+              ></vxe-input>
+            </template>
+          </vxe-column>
+          <vxe-column field="youxiao" title="是否有效">
+            <template #default="{ row }">
+              <vxe-checkbox v-model="row.youxiao"></vxe-checkbox>
+            </template>
+          </vxe-column>
+          <vxe-column field="kekong" title="是否可控">
+            <template #default="{ row }">
+              <vxe-checkbox v-model="row.kekong"></vxe-checkbox>
+            </template>
+          </vxe-column>
+        </vxe-table>
+      </el-collapse-item>
+    </el-collapse>
+    <el-dialog
+      class="addDialog"
+      v-model="dialogTableVisible"
+      title="选择参数"
+      width="900"
+    >
+      <vxe-table
+        class="tableDialog"
+        border
+        ref="tableRef"
+        max-height="400"
+        :row-config="{ isHover: true }"
+        :loading="loading"
+        :data="tableData"
+      >
+        <vxe-column type="checkbox" width="60"></vxe-column>
+        <vxe-column field="id" title="设备编码" sortable></vxe-column>
+        <vxe-column field="name" title="设备名称"></vxe-column>
+        <vxe-column field="role" title="参数编码"></vxe-column>
+        <vxe-column
+          field="age"
+          title="参数模版名称"
+          :filters="ageOptions"
+          :filter-method="filterAgeMethod"
+          :filter-recover-method="filterAgeRecoverMethod"
+        >
+          <template #filter="{ $panel, column }">
+            <vxe-input
+              class="filterInput"
+              v-for="(option, index) in column.filters"
+              :key="index"
+              v-model="option.data"
+              @input="$panel.changeOption($event, !!option.data, option)"
+              @keyup.enter="$panel.confirmFilter()"
+              placeholder="参数模版名称"
+              size="mini"
+            ></vxe-input>
+          </template>
+        </vxe-column>
+        <vxe-column
+          field="address"
+          title="参数名称"
+          :filters="addressOptions"
+          :filter-method="filterAddressMethod"
+          :filter-recover-method="filterAddressRecoverMethod"
+        >
+          <template #filter="{ $panel, column }">
+            <vxe-input
+              class="filterInput"
+              v-for="(option, index) in column.filters"
+              :key="index"
+              v-model="option.data"
+              @input="$panel.changeOption($event, !!option.data, option)"
+              @keyup.enter="$panel.confirmFilter()"
+              placeholder="参数名称"
+              size="mini"
+            ></vxe-input>
+          </template>
+        </vxe-column>
+        <vxe-column
+          field="sex"
+          title="分区"
+          :filter-multiple="false"
+          :filters="sexOptions"
+        ></vxe-column>
+      </vxe-table>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogTableVisible = false">取消</el-button>
+          <el-button type="primary" @click="dialogTableVisible = false">
+            确认
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { useRoute } from "vue-router";
+const activeNames = ref(["1", "2"]);
+const route = useRoute();
+const dialogTableVisible = ref(false);
+const addForm = reactive({
+  num: route.query.assetCode,
+  name: "",
+  device: [],
+});
+const options = [
+  {
+    value: "HTML",
+    label: "HTML",
+  },
+  {
+    value: "CSS",
+    label: "CSS",
+  },
+  {
+    value: "JavaScript",
+    label: "JavaScript",
+  },
+];
+const tableRef = ref();
+const loading = ref(false);
+const tableData = ref([
+  {
+    id: 10001,
+    name: "Test1",
+    role: "Develop",
+    sex: "Man",
+    age: 28,
+    address: "test",
+  },
+  {
+    id: 10002,
+    name: "Test2",
+    role: "admin",
+    sex: "Man",
+    age: 29,
+    address: "asd",
+  },
+  {
+    id: 10003,
+    name: "Test3",
+    role: "useer",
+    sex: "Man",
+    age: 22,
+    address: "qsx",
+  },
+]);
+const tableListData = ref([
+  {
+    id: 10001,
+    name: "Test1",
+    role: "Develop",
+    sex: "Man",
+    age: 28,
+    address: "test",
+    youxiao: true,
+    kekong: false,
+  },
+  {
+    id: 10002,
+    name: "Test2",
+    role: "admin",
+    sex: "Man",
+    age: 29,
+    address: "asd",
+    youxiao: false,
+    kekong: true,
+  },
+  {
+    id: 10003,
+    name: "Test3",
+    role: "useer",
+    sex: "Man",
+    age: 22,
+    address: "qsx",
+    youxiao: false,
+    kekong: false,
+  },
+]);
+const sexOptions = ref([
+  { label: "高", value: "Man" },
+  { label: "中", value: "Women" },
+]);
+const ageOptions = ref([{ data: "" }]);
+const addressOptions = ref([{ data: "" }]);
+const filterAgeMethod = ({ option, row }) => {
+  return row.age === Number(option.data);
+};
+const filterAgeRecoverMethod = ({ option }) => {
+  // 如果是自定义筛选模板，当为点击确认时，该选项将被恢复为默认值
+  option.data = "";
+};
+const filterAddressMethod = ({ option, row }) => {
+  return row.address === option.data;
+};
+const filterAddressRecoverMethod = ({ option }) => {
+  // 如果是自定义筛选模板，当为点击确认时，该选项将被恢复为默认值
+  option.data = "";
+};
+onMounted(() => {});
+function selectParams() {
+  //选择参数
+  dialogTableVisible.value = true;
+}
+</script>
+<style scoped>
+.paramsCollapse {
+  .tableCollapse {
+    .filterInput {
+      width: 120px;
+      margin: 10px;
+    }
+  }
+}
+:deep(.addDialog) {
+  .tableDialog {
+    .filterInput {
+      width: 120px;
+      margin: 10px;
+    }
+  }
+}
+</style>
diff --git a/src/views/model/asset/params.vue b/src/views/model/asset/params.vue
index 2ea1cde..10ec9d7 100644
--- a/src/views/model/asset/params.vue
+++ b/src/views/model/asset/params.vue
@@ -1,44 +1,95 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
+    <el-form
+      :model="queryParams"
+      ref="queryRef"
+      :inline="true"
+      v-show="showSearch"
+      label-width="100px"
+    >
       <el-form-item label="资产编号" prop="assetCode">
-        <el-input v-model="queryParams.assetCode" placeholder="请输入资产编号" disabled = false clearable @keyup.enter="handleQuery" />
+        <el-input
+          v-model="queryParams.assetCode"
+          placeholder="请输入资产编号"
+          disabled="false"
+          clearable
+          @keyup.enter="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="设备uuid" prop="deviceUuid">
-        <el-input v-model="queryParams.deviceUuid" placeholder="请输入设备uuid" clearable @keyup.enter="handleQuery" />
+        <el-input
+          v-model="queryParams.deviceUuid"
+          placeholder="请输入设备uuid"
+          clearable
+          @keyup.enter="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="设备参数编码" prop="paramCode">
-        <el-input v-model="queryParams.paramCode" placeholder="请输入设备参数编码" clearable @keyup.enter="handleQuery" />
+        <el-input
+          v-model="queryParams.paramCode"
+          placeholder="请输入设备参数编码"
+          clearable
+          @keyup.enter="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="参数模版" prop="paramClassName">
-        <el-input v-model="queryParams.paramClassName" placeholder="请输入参数模版" clearable @keyup.enter="handleQuery" />
+        <el-input
+          v-model="queryParams.paramClassName"
+          placeholder="请输入参数模版"
+          clearable
+          @keyup.enter="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="名称" prop="name">
-        <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter="handleQuery" />
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button type="info" plain icon="Refresh" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button type="info" plain icon="Refresh" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="success" icon="Plus" @click="handleAdd">新增</el-button>
+        <el-button type="success" icon="Plus" @click="handleAdd"
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
-        <el-button type="success" icon="Edit" @click="handleUpdate">修改</el-button>
+        <el-button type="success" icon="Edit" @click="handleUpdate"
+          >修改</el-button
+        >
       </el-col>
       <el-col :span="1.5">
-        <el-button type="success" icon="Delete" @click="handleDelete">删除</el-button>
+        <el-button type="success" icon="Delete" @click="handleDelete"
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
-        <el-button type="warning" icon="Download" @click="handleExport">导出</el-button>
+        <el-button type="warning" icon="Download" @click="handleExport"
+          >导出</el-button
+        >
       </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        v-model:showSearch="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="paramsList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="paramsList"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="资产编码" align="center" prop="assetCode" />
       <el-table-column label="设备uuid" align="center" prop="deviceUuid" />
@@ -48,28 +99,48 @@
       <el-table-column label="分区" align="center" prop="partion" />
       <el-table-column label="是否有效" align="center" prop="flagEnabled" />
       <el-table-column label="是否可控" align="center" prop="contrlFlag" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template #default="scope">
-          <el-button type="text" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
-          <el-button type="text" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+          <el-button type="text" icon="Edit" @click="handleUpdate(scope.row)"
+            >修改</el-button
+          >
+          <el-button type="text" icon="Delete" @click="handleDelete(scope.row)"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
-      @pagination="getList" />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
     <!-- 添加或修改资产参数对话框 -->
     <el-dialog :title="title" v-model="open" width="600px" append-to-body>
       <el-form ref="paramsRef" :model="form" :rules="rules" label-width="80px">
         <el-row>
           <el-col :span="12">
             <el-form-item label="资产编号" prop="assetCode">
-              <el-input v-model="form.assetCode" placeholder="" disabled=false />
+              <el-input
+                v-model="form.assetCode"
+                placeholder=""
+                disabled="false"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="设备uuid" prop="deviceUuid">
-              <el-input v-model="form.deviceUuid" placeholder="请输入设备uuid" />
+              <el-input
+                v-model="form.deviceUuid"
+                placeholder="请输入设备uuid"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -110,8 +181,14 @@
 </template>
 
 <script setup name="AssetParams">
-import { listParams, getParams, delParams, addParams, updateParams } from "@/api/model/asset/params";
-import { useRouter } from 'vue-router'
+import {
+  listParams,
+  getParams,
+  delParams,
+  addParams,
+  updateParams,
+} from "@/api/model/asset/params";
+import { useRouter } from "vue-router";
 const { proxy } = getCurrentInstance();
 const router = useRouter();
 const paramsList = ref([]);
@@ -125,20 +202,20 @@ const total = ref(0);
 const title = ref("");
 const assetCode = router.currentRoute.value.query.assetCode;
 const contrlFlag = ref([
-  {label: '可控', value: true, elTagType: 'default', elTagClass: null}, 
-  {label: '不可控', value: false, elTagType: 'default', elTagClass: null}
+  { label: "可控", value: true, elTagType: "default", elTagClass: null },
+  { label: "不可控", value: false, elTagType: "default", elTagClass: null },
 ]);
 const enabled = ref([
-  {label: '有效', value: true, elTagType: 'default', elTagClass: null}, 
-  {label: '无效', value: false, elTagType: 'default', elTagClass: null}
+  { label: "有效", value: true, elTagType: "default", elTagClass: null },
+  { label: "无效", value: false, elTagType: "default", elTagClass: null },
 ]);
 const contrlFlagTable = ref([
-  {label: '可控', value: 'true', elTagType: 'default', elTagClass: null}, 
-  {label: '不可控', value: 'false', elTagType: 'default', elTagClass: null}
+  { label: "可控", value: "true", elTagType: "default", elTagClass: null },
+  { label: "不可控", value: "false", elTagType: "default", elTagClass: null },
 ]);
 const enabledTable = ref([
-  {label: '有效', value: 'true', elTagType: 'default', elTagClass: null}, 
-  {label: '无效', value: 'false', elTagType: 'default', elTagClass: null}
+  { label: "有效", value: "true", elTagType: "default", elTagClass: null },
+  { label: "无效", value: "false", elTagType: "default", elTagClass: null },
 ]);
 
 const data = reactive({
@@ -153,10 +230,9 @@ const data = reactive({
     paramClassName: null,
     name: null,
     flagEnabled: null,
-    contrlFlag: null
+    contrlFlag: null,
   },
-  rules: {
-  }
+  rules: {},
 });
 
 const { queryParams, form, rules } = toRefs(data);
@@ -165,7 +241,7 @@ const { queryParams, form, rules } = toRefs(data);
 function getList() {
   queryParams.value.assetCode = assetCode;
   loading.value = true;
-  listParams(queryParams.value).then(response => {
+  listParams(queryParams.value).then((response) => {
     paramsList.value = response.rows;
     total.value = response.total;
     loading.value = false;
@@ -198,7 +274,7 @@ function reset() {
     paramClassName: null,
     name: null,
     flagEnabled: null,
-    contrlFlag: null
+    contrlFlag: null,
   };
   proxy.resetForm("paramsRef");
 }
@@ -217,24 +293,30 @@ function resetQuery() {
 
 // 多选框选中数据
 function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.id);
+  ids.value = selection.map((item) => item.id);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
 }
 
 /** 新增按钮操作 */
 function handleAdd() {
-  reset();
-  form.value.assetCode = assetCode
-  open.value = true;
-  title.value = "添加资产参数";
+  router.push({
+    path: "AddParams",
+    query: {
+      assetCode,
+    },
+  });
+  // reset();
+  // form.value.assetCode = assetCode
+  // open.value = true;
+  // title.value = "添加资产参数";
 }
 
 /** 修改按钮操作 */
 function handleUpdate(row) {
   reset();
-  const _id = row.id || ids.value
-  getParams(_id).then(response => {
+  const _id = row.id || ids.value;
+  getParams(_id).then((response) => {
     form.value = response.data;
     open.value = true;
     title.value = "修改资产参数";
@@ -243,16 +325,16 @@ function handleUpdate(row) {
 
 /** 提交按钮 */
 function submitForm() {
-  proxy.$refs["paramsRef"].validate(valid => {
+  proxy.$refs["paramsRef"].validate((valid) => {
     if (valid) {
       if (form.value.id != null) {
-        updateParams(form.value).then(response => {
+        updateParams(form.value).then((response) => {
           proxy.$modal.msgSuccess("修改成功");
           open.value = false;
           getList();
         });
       } else {
-        addParams(form.value).then(response => {
+        addParams(form.value).then((response) => {
           proxy.$modal.msgSuccess("新增成功");
           open.value = false;
           getList();
@@ -265,19 +347,27 @@ function submitForm() {
 /** 删除按钮操作 */
 function handleDelete(row) {
   const _ids = row.id || ids.value;
-  proxy.$modal.confirm('是否确认删除资产参数编号为"' + _ids + '"的数据项？').then(function () {
-    return delParams(_ids);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => { });
+  proxy.$modal
+    .confirm('是否确认删除资产参数编号为"' + _ids + '"的数据项？')
+    .then(function () {
+      return delParams(_ids);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
 }
 
 /** 导出按钮操作 */
 function handleExport() {
-  proxy.download('asset/params/export', {
-    ...queryParams.value
-  }, `params_${new Date().getTime()}.xlsx`)
+  proxy.download(
+    "asset/params/export",
+    {
+      ...queryParams.value,
+    },
+    `params_${new Date().getTime()}.xlsx`
+  );
 }
 
 getList();