From a4affd7541c8a853a2bd246b5332dde8f69444b5 Mon Sep 17 00:00:00 2001
From: ljlong_2630 <ljlong_2630@yeah.net>
Date: Mon, 7 Aug 2023 13:44:05 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E5=88=86=E8=AE=BE=E5=A4=87=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E5=8A=9F=E8=83=BD=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/model/modelType.js               |   1 -
 src/assets/styles/self-defined.scss      |  21 ++
 src/router/index.js                      |   6 -
 src/views/model/devicemodel/addmodel.vue | 266 ++++++++++++++++++-----
 src/views/model/devicemodel/index.vue    | 147 ++++++++++---
 5 files changed, 354 insertions(+), 87 deletions(-)

diff --git a/src/api/model/modelType.js b/src/api/model/modelType.js
index c6b9550..96f0c5b 100644
--- a/src/api/model/modelType.js
+++ b/src/api/model/modelType.js
@@ -2,7 +2,6 @@ import request from '@/utils/request'
 
 // 查询设备模型类别列表
 export function listModelType(query) {
-  console.log("-------------"+query);
   return request({
     url: '/model/dcModelType/list',
     method: 'get',
diff --git a/src/assets/styles/self-defined.scss b/src/assets/styles/self-defined.scss
index 351c2e3..64edb28 100644
--- a/src/assets/styles/self-defined.scss
+++ b/src/assets/styles/self-defined.scss
@@ -20,3 +20,24 @@
     margin-left: 100px;
 }
 
+.marginbottom50px{
+    margin-bottom: 50px;
+}
+
+.textaligncenter{
+    text-align:center;
+}
+.textalignleft{
+    text-align:left;
+}
+.widthhalfinlineblock{
+    width: 50%;
+    display: inline-block;
+}
+.textalignright{
+    text-align:right;
+}
+
+.marginbottom20{
+    margin-bottom: 5px;
+}
diff --git a/src/router/index.js b/src/router/index.js
index c7cb3d1..f6da8b3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -167,12 +167,6 @@ export const constantRoutes = [
       }
     ]
   },
-  {
-    path: '/devicemodel/addmodel',
-    component: () => import('@/views/model/devicemodel/addmodel'),
-    name: 'newdevicemodel',
-    meta: { title: '新增设备模型', icon: '' }
-  },
 ]
 
 // 动态路由，基于用户权限动态去加载
diff --git a/src/views/model/devicemodel/addmodel.vue b/src/views/model/devicemodel/addmodel.vue
index 731cf1c..605bcd5 100644
--- a/src/views/model/devicemodel/addmodel.vue
+++ b/src/views/model/devicemodel/addmodel.vue
@@ -1,63 +1,149 @@
 <template>
-    <div class="app-container">
+    <div class="app-container" 
+      v-loading="loading">
       <!-- 添加或修改设备模型信息对话框 -->
-      <template>
-        <el-steps :space="200" :active="1" simple>
-            <el-step title="Step 1" :icon="Edit" />
-            <el-step title="Step 2" :icon="UploadFilled" />
-            <el-step title="Step 3" :icon="Picture" />
+      <div class="marginbottom50px">
+        <el-steps :active="currentStep">
+            <el-step title="模型信息" description="名称、编号、序号、备注等" />
+            <el-step title="参数类别配置" description="模型的参数类别" />
+            <el-step title="调控策略" description="模型的调控策略" />
         </el-steps>
-
-        <el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
-            <el-step title="Step 1" />
-            <el-step title="Step 2" />
-            <el-step title="Step 3" />
-        </el-steps>
-      </template>
-
-
-      <el-form ref="devicemodelRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="模型名称" prop="modelName">
-        <el-input v-model="form.modelName" placeholder="请输入模型名称" />
-        </el-form-item>
-        <el-form-item label="模型编码" prop="modelCode">
-        <el-input v-model="form.modelCode" placeholder="请输入模型编码" />
-        </el-form-item>
-        <el-form-item label="排序;排序" prop="sort">
-        <el-input v-model="form.sort" placeholder="请输入排序;排序" />
-        </el-form-item>
-        <el-form-item label="上级id;上级id" prop="pid">
-        <el-tree-select
-            v-model="form.pid"
-            :data="devicemodelOptions"
-            :props="{ value: 'id', label: 'modelName', children: 'children' }"
-            value-key="id"
-            placeholder="请选择上级id;上级id"
-            check-strictly
-        />
-        </el-form-item>
-        <el-form-item label="备注" prop="note">
-        <el-input v-model="form.note" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item>
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-        </el-form-item>
-      </el-form>  
+      </div>
+      <div>
+        <el-form ref="devicemodelRef" :model="form" :rules="rules" label-width="100px">
+          <el-carousel ref="carousel" :autoplay="false" :arrow="never" pause-on-hover="false" class="customCarousel" >
+            <el-carousel-item :key="1"  name="1" class="textaligncenter">
+              <div  class="widthhalfinlineblock">
+                <el-form-item label="模型名称" prop="modelName">
+                    <el-input v-model="form.modelName" placeholder="请输入模型名称" />
+                </el-form-item>
+                <el-form-item label="模型编码" prop="modelCode">
+                    <el-input v-model="form.modelCode" placeholder="请输入模型编码" />
+                </el-form-item>
+                <el-form-item label="排序" prop="sort">
+                    <el-input-number v-model="form.sort" :min="1" :max="100" placeholder="请输入排序"/>
+                </el-form-item>
+                <el-form-item label="上级" prop="pid">
+                <el-tree-select
+                    v-model="form.pid"
+                    :data="devicemodelOptions"
+                    :props="{ value: 'id', label: 'modelName', children: 'children' }"
+                    value-key="id"
+                    placeholder="请选择上级"
+                    check-strictly
+                    :default-expand-all="true" 
+                    :default-checked-keys="defaultCheckedKeys"
+                />
+                </el-form-item>
+                <el-form-item label="模型类别" prop="modelTypeId">
+                    <el-select v-model="form.modelTypeId" placeholder="请选择模型类别" clearable>
+                        <el-option v-for="dict in modeltypeList" :key="dict.id" :label="dict.modelTypeName" :value="dict.id" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="是否是叶节点">
+                  <el-switch
+                    v-model="form.dc_is_leaf"
+                    @change="switch_isLeaf"
+                    class="ml-2i"
+                    style="--el-switch-on-color: #13ce66"
+                  />
+                </el-form-item>
+                <el-form-item label="是否可用">
+                  <el-switch
+                    v-model="form.dc_available"
+                    class="ml-2i"
+                    style="--el-switch-on-color: #13ce66"
+                  />
+                </el-form-item>
+                <el-form-item label="备注" prop="note">
+                  <el-input v-model="form.note" type="textarea" placeholder="请输入内容" />
+                </el-form-item>
+            </div>
+            </el-carousel-item>
+            <el-carousel-item :key="2" name="2" class="textaligncenter">
+                <div class="widthhalfinlineblock">
+                  <div class="textalignright marginbottom5">
+                    <el-button type="primary" style="display: inline-block !important" @click="addParamModel">添加参数模版</el-button>
+                  </div>
+                  <el-table :data="tableData" style="width: 100%" max-height="250">
+                    <el-table-column fixed label="序号" width="80">
+                      <template slot-scope="scope">
+                        {{ scope.$index + 1 }}
+                      </template>
+                    </el-table-column>
+                    <el-table-column prop="name" label="Name" width="120" />
+                    <el-table-column prop="state" label="State" width="120" />
+                    <el-table-column prop="city" label="City" width="120" />
+                    <el-table-column prop="address" label="Address" width="600" />
+                    <el-table-column prop="zip" label="Zip" width="120" />
+                    <el-table-column fixed="right" label="Operations" width="120">
+                      <template #default="scope">
+                        <el-button
+                          link
+                          type="primary"
+                          size="small"
+                          @click.prevent="deleteRow(scope.$index)"
+                        >
+                          Remove
+                        </el-button>
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </div>
+            </el-carousel-item>
+          </el-carousel>  
+          <div  class="textaligncenter">
+            <el-form-item  class="widthhalfinlineblock">
+              <el-button type="primary" v-if="prevStepButtonShow" @click="prevStep" >上一步</el-button>
+              <el-button type="primary" v-if="submitButtonShow" @click="submitForm" >提交</el-button>
+              <el-button type="primary" v-if="nextStepButtonShow" @click="nextStep" >下一步</el-button>
+              <el-button @click="cancel">取 消</el-button>
+            </el-form-item>
+          </div>
+        </el-form> 
+      </div>
     </div>
   </template>
-  
+  <style lang="scss">
+    @import "@/assets/styles/self-defined.scss";
+    .customCarousel {
+      div{
+        button {
+            display: none !important;
+        }
+      } 
+      ul{
+        display: none !important;
+      }
+    } 
+  </style>
   <script setup name="newdevicemodel">
-  import { addDevicemodel, updateDevicemodel } from "@/api/model/devicemodel";
-  import { Edit, Picture, UploadFilled } from '@element-plus/icons-vue'
+  import { listDevicemodel,addDevicemodel, updateDevicemodel } from "@/api/model/devicemodel";
+  import { listModelType} from "@/api/model/modelType";
+  import { onMounted, ref } from 'vue';
   const { proxy } = getCurrentInstance();
+  const { dc_available, dc_is_leaf } = proxy.useDict('dc_available', 'dc_is_leaf');
   const router = useRouter();
   const devicemodelOptions = ref([]);
   const open = ref(false);
-  const title = ref("");
-  
+  const loading = ref(false);
+  const modeltypeList = ref([]);
+  const currentStep = ref(1);
+  const nextStepButtonShow = ref(false);
+  const prevStepButtonShow = ref(false);
+  const submitButtonShow = ref(true);
+  const paramModelList = ref([]);
+  const addParamModelShow = ref(false);
+  console.log(router);
+  console.log(proxy);
+  const tempPid = router.currentRoute._value.query.pid;
   const data = reactive({
-    form: {},
+    form: {
+      sort:1,
+      dc_is_leaf:false,
+      dc_available:false,
+      // pid:tempPid,
+    },
     queryParams: {
       modelName: null,
       modelCode: null,
@@ -68,7 +154,16 @@
     },
     rules: {
       modelTypeId: [
-        { required: true, message: "模型类别Id不能为空", trigger: "change" }
+        { required: true, message: "模型类别不能为空", trigger: "change" }
+      ],
+      modelName: [
+        { required: true, message: "模型名称不能为空", trigger: "change" }
+      ],
+      modelCode: [
+        { required: true, message: "模型编码不能为空", trigger: "change" }
+      ],
+      pid: [
+        { required: true, message: "上级不能为空", trigger: "change" }
       ],
     }
   });
@@ -111,19 +206,82 @@
       if (valid) {
         if (form.value.id != null) {
           updateDevicemodel(form.value).then(response => {
-            proxy.$modal.msgSuccess("修改成功");
-            open.value = false;
             router.go(-1);
+            proxy.$modal.msgSuccess("修改成功");
           });
         } else {
           addDevicemodel(form.value).then(response => {
-            proxy.$modal.msgSuccess("新增成功");
-            open.value = false;
             router.go(-1);
+            proxy.$modal.msgSuccess("新增成功");
           });
         }
       }
     });
   }
+  /** 查询设备模型类型列表 */
+    function getModelTypeList() {
+        loading.value = true;
+        listModelType(queryParams.value).then(response => {
+            console.log(response);
+            modeltypeList.value = response.rows;
+            loading.value = false;
+        });
+    }
+    function getTreeselect() {
+      listDevicemodel().then(response => {
+      devicemodelOptions.value = [];
+      const data = { id: 0, modelName: '顶级节点', children: [] };
+      const parentData = response.data.filter(item => {
+        // 根据需要进行关键字匹配，可以使用 includes()、indexOf() 等方法
+        return !item.isLeaf;
+      });
+      data.children = proxy.handleTree(parentData, "id", "pid");
+      devicemodelOptions.value.push(data);
+    });
+  }
+    onMounted(() => {
+        console.log("-------------"+tempPid);
+    // 在组件首次加载完成后执行的逻辑
+    // 可以在这里给组件复制
+      // form.value.pid=tempPid;
+    });
+    function switch_isLeaf(){
+      if(form.value.dc_is_leaf){
+        submitButtonShow.value = false;
+        nextStepButtonShow.value = true;
+      }else{
+        submitButtonShow.value = true;
+        nextStepButtonShow.value = false;
+      }
+    }
+    function nextStep(){
+      console.log("---------------");
+      if(currentStep.value<2){
+        currentStep.value = currentStep.value + 1;
+        proxy.$refs.carousel.next(); 
+        submitButtonShow.value = true;
+        nextStepButtonShow.value = false;
+        prevStepButtonShow.value = true;
+      }
+    }
+    function prevStep(){
+        currentStep.value = currentStep.value - 1;
+        proxy.$refs.carousel.prev(); 
+        submitButtonShow.value = false;
+        nextStepButtonShow.value = true;
+        prevStepButtonShow.value = false;
+    }
+    function addParamModel(){
+      loading.value = true;
+      listParamclass(queryParams.value).then(response => {
+          console.log(response);
+          paramModelList.value = response.rows;
+          addParamModelShow.value = true;
+          loading.value = false;
+      });
+    }
+    getTreeselect();
+    getModelTypeList();
   </script>
+  
   
\ No newline at end of file
diff --git a/src/views/model/devicemodel/index.vue b/src/views/model/devicemodel/index.vue
index 32d595f..83f3011 100644
--- a/src/views/model/devicemodel/index.vue
+++ b/src/views/model/devicemodel/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
       <el-form-item label="模型名称" prop="modelName">
         <el-input
           v-model="queryParams.modelName"
@@ -17,22 +17,47 @@
           @keyup.enter="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="排序;排序" prop="sort">
+      <el-form-item label="排序" prop="sort">
         <el-input
           v-model="queryParams.sort"
-          placeholder="请输入排序;排序"
+          placeholder="请输入排序"
           clearable
           @keyup.enter="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="上级id;上级id" prop="pid">
+      <el-form-item label="模型类别Id" prop="modelTypeId">
+        <el-select v-model="queryParams.modelTypeId" placeholder="请选择模型类别Id" clearable>
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="上级id" prop="pid">
         <el-input
           v-model="queryParams.pid"
-          placeholder="请输入上级id;上级id"
+          placeholder="请输入上级id"
           clearable
           @keyup.enter="handleQuery"
         />
       </el-form-item>
+      <el-form-item label="是否是叶节点" prop="isLeaf">
+        <el-select v-model="queryParams.isLeaf" placeholder="请选择是否是叶节点" clearable>
+          <el-option
+            v-for="dict in dc_is_leaf"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否可用" prop="vailable">
+        <el-select v-model="queryParams.vailable" placeholder="请选择是否可用" clearable>
+          <el-option
+            v-for="dict in available"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
@@ -70,10 +95,20 @@
     >
       <el-table-column label="模型名称" align="center" prop="modelName" />
       <el-table-column label="模型编码" align="center" prop="modelCode" />
-      <el-table-column label="排序;排序" align="center" prop="sort" />
+      <el-table-column label="排序" align="center" prop="sort" />
       <el-table-column label="模型类别Id" align="center" prop="modelTypeId" />
-      <el-table-column label="上级id;上级id" align="center" prop="pid" />
+      <el-table-column label="上级id" align="center" prop="pid" />
       <el-table-column label="备注" align="center" prop="note" />
+      <el-table-column label="是否是叶节点" align="center" prop="isLeaf">
+        <template #default="scope">
+          <dict-tag :options="dc_is_leaf" :value="scope.row.isLeaf"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="是否可用" align="center" prop="vailable">
+        <template #default="scope">
+          <dict-tag :options="available" :value="scope.row.vailable"/>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
           <el-button
@@ -107,22 +142,45 @@
         <el-form-item label="模型编码" prop="modelCode">
           <el-input v-model="form.modelCode" placeholder="请输入模型编码" />
         </el-form-item>
-        <el-form-item label="排序;排序" prop="sort">
-          <el-input v-model="form.sort" placeholder="请输入排序;排序" />
+        <el-form-item label="排序" prop="sort">
+          <el-input v-model="form.sort" placeholder="请输入排序" />
+        </el-form-item>
+        <el-form-item label="模型类别Id" prop="modelTypeId">
+          <el-select v-model="form.modelTypeId" placeholder="请选择模型类别Id">
+            <el-option label="请选择字典生成" value="" />
+          </el-select>
         </el-form-item>
-        <el-form-item label="上级id;上级id" prop="pid">
+        <el-form-item label="上级id" prop="pid">
           <el-tree-select
             v-model="form.pid"
             :data="devicemodelOptions"
             :props="{ value: 'id', label: 'modelName', children: 'children' }"
             value-key="id"
-            placeholder="请选择上级id;上级id"
+            placeholder="请选择上级id"
             check-strictly
           />
         </el-form-item>
         <el-form-item label="备注" prop="note">
           <el-input v-model="form.note" type="textarea" placeholder="请输入内容" />
         </el-form-item>
+        <el-form-item label="是否是叶节点">
+          <el-radio-group v-model="form.isLeaf">
+            <el-radio
+              v-for="dict in dc_is_leaf"
+              :key="dict.value"
+:label="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="是否可用">
+          <el-radio-group v-model="form.vailable">
+            <el-radio
+              v-for="dict in available"
+              :key="dict.value"
+:label="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -138,7 +196,8 @@
 import { listDevicemodel, getDevicemodel, delDevicemodel, addDevicemodel, updateDevicemodel } from "@/api/model/devicemodel";
 
 const { proxy } = getCurrentInstance();
-const router = useRouter();
+const { available, dc_is_leaf } = proxy.useDict('available', 'dc_is_leaf');
+
 const devicemodelList = ref([]);
 const devicemodelOptions = ref([]);
 const open = ref(false);
@@ -147,7 +206,7 @@ const showSearch = ref(true);
 const title = ref("");
 const isExpandAll = ref(true);
 const refreshTable = ref(true);
-
+const router = useRouter();
 const data = reactive({
   form: {},
   queryParams: {
@@ -156,12 +215,32 @@ const data = reactive({
     sort: null,
     modelTypeId: null,
     pid: null,
-    note: null
+    note: null,
+    isLeaf: null,
+    vailable: null
   },
   rules: {
+    modelName: [
+      { required: true, message: "模型名称不能为空", trigger: "blur" }
+    ],
+    modelCode: [
+      { required: true, message: "模型编码不能为空", trigger: "blur" }
+    ],
+    sort: [
+      { required: true, message: "排序不能为空", trigger: "blur" }
+    ],
     modelTypeId: [
       { required: true, message: "模型类别Id不能为空", trigger: "change" }
     ],
+    pid: [
+      { required: true, message: "上级id不能为空", trigger: "blur" }
+    ],
+    isLeaf: [
+      { required: true, message: "是否是叶节点不能为空", trigger: "blur" }
+    ],
+    vailable: [
+      { required: true, message: "是否可用不能为空", trigger: "blur" }
+    ]
   }
 });
 
@@ -211,7 +290,11 @@ function reset() {
     sort: null,
     modelTypeId: null,
     pid: null,
-    note: null
+    note: null,
+    isLeaf: "0",
+
+    vailable: "0"
+
   };
   proxy.resetForm("devicemodelRef");
 }
@@ -229,17 +312,26 @@ function resetQuery() {
 
 /** 新增按钮操作 */
 function handleAdd(row) {
-  const path = "/devicemodel/addmodel"
-  reset();
-  getTreeselect();
+  const path = "/newdevicemodel";
+  let pid = 0;
+  if(row.isLeaf){
+    proxy.$message({
+      message: '请选择非叶节点行再操作',
+      type: 'warn'
+    });
+    return;
+  }
   if (row != null && row.id) {
-    form.value.pid = row.id;
-  } else {
-    form.value.pid = 0;
+    pid = row.id;
   }
-  router.push(path);
-  // open.value = true;
-  // title.value = "添加设备模型信息";
+  router.push({
+    name:path,
+    query:{
+      pid:pid,
+      // devicemodelOptions:devicemodelOptions
+    }
+  });
+  
 }
 
 /** 展开/折叠操作 */
@@ -273,13 +365,13 @@ function submitForm() {
         updateDevicemodel(form.value).then(response => {
           proxy.$modal.msgSuccess("修改成功");
           open.value = false;
-          router.go(-1);
+          getList();
         });
       } else {
         addDevicemodel(form.value).then(response => {
           proxy.$modal.msgSuccess("新增成功");
           open.value = false;
-          router.go(-1);
+          getList();
         });
       }
     }
@@ -296,5 +388,8 @@ function handleDelete(row) {
   }).catch(() => {});
 }
 
+ /** 查询设备模型信息下拉树结构 */
+
+//  getTreeselect();
 getList();
 </script>