lianmei
/
dc-ui
mirror of https://gitee.com/lmlz_0/dc-ui.git
3
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

部分设备模型功能提交

pull/1/head
ljlong_2630 1 year ago
parent
ea8c891f8b
commit
a4affd7541
5 changed files with 354 additions and 87 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/api/model/modelType.js
  2. 21
      src/assets/styles/self-defined.scss
  3. 6
      src/router/index.js
  4. 266
      src/views/model/devicemodel/addmodel.vue
  5. 147
      src/views/model/devicemodel/index.vue

1
src/api/model/modelType.js
View File

@ -2,7 +2,6 @@ import request from '@/utils/request'
// 查询设备模型类别列表 // 查询设备模型类别列表
export function listModelType(query) { export function listModelType(query) {
console.log("-------------"+query);
return request({ return request({
url: '/model/dcModelType/list', url: '/model/dcModelType/list',
method: 'get', method: 'get',

21
src/assets/styles/self-defined.scss
View File

@ -20,3 +20,24 @@
margin-left: 100px; 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;
}

6
src/router/index.js
View File

@ -167,12 +167,6 @@ export const constantRoutes = [
} }
] ]
}, },
{
path: '/devicemodel/addmodel',
component: () => import('@/views/model/devicemodel/addmodel'),
name: 'newdevicemodel',
meta: { title: '新增设备模型', icon: '' }
},
] ]
// 动态路由，基于用户权限动态去加载 // 动态路由，基于用户权限动态去加载

266
src/views/model/devicemodel/addmodel.vue
View File

@ -1,63 +1,149 @@
<template> <template>
<div class="app-container"> <div class="app-container"
v-loading="loading">
<!-- 添加或修改设备模型信息对话框 --> <!-- 添加或修改设备模型信息对话框 -->
<template> <div class="marginbottom50px">
<el-steps :space="200" :active="1" simple> <el-steps :active="currentStep">
<el-step title="Step 1" :icon="Edit" /> <el-step title="模型信息" description="名称、编号、序号、备注等" />
<el-step title="Step 2" :icon="UploadFilled" /> <el-step title="参数类别配置" description="模型的参数类别" />
<el-step title="Step 3" :icon="Picture" /> <el-step title="调控策略" description="模型的调控策略" />
</el-steps> </el-steps>
</div>
<el-steps :active="1" finish-status="success" simple style="margin-top: 20px"> <div>
<el-step title="Step 1" /> <el-form ref="devicemodelRef" :model="form" :rules="rules" label-width="100px">
<el-step title="Step 2" /> <el-carousel ref="carousel" :autoplay="false" :arrow="never" pause-on-hover="false" class="customCarousel" >
<el-step title="Step 3" /> <el-carousel-item :key="1" name="1" class="textaligncenter">
</el-steps> <div class="widthhalfinlineblock">
</template> <el-form-item label="模型名称" prop="modelName">
<el-input v-model="form.modelName" placeholder="请输入模型名称" />
</el-form-item>
<el-form ref="devicemodelRef" :model="form" :rules="rules" label-width="80px"> <el-form-item label="模型编码" prop="modelCode">
<el-form-item label="模型名称" prop="modelName"> <el-input v-model="form.modelCode" placeholder="请输入模型编码" />
<el-input v-model="form.modelName" placeholder="请输入模型名称" /> </el-form-item>
</el-form-item> <el-form-item label="排序" prop="sort">
<el-form-item label="模型编码" prop="modelCode"> <el-input-number v-model="form.sort" :min="1" :max="100" placeholder="请输入排序"/>
<el-input v-model="form.modelCode" placeholder="请输入模型编码" /> </el-form-item>
</el-form-item> <el-form-item label="上级" prop="pid">
<el-form-item label="排序;排序" prop="sort"> <el-tree-select
<el-input v-model="form.sort" placeholder="请输入排序;排序" /> v-model="form.pid"
</el-form-item> :data="devicemodelOptions"
<el-form-item label="上级id;上级id" prop="pid"> :props="{ value: 'id', label: 'modelName', children: 'children' }"
<el-tree-select value-key="id"
v-model="form.pid" placeholder="请选择上级"
:data="devicemodelOptions" check-strictly
:props="{ value: 'id', label: 'modelName', children: 'children' }" :default-expand-all="true"
value-key="id" :default-checked-keys="defaultCheckedKeys"
placeholder="请选择上级id;上级id" />
check-strictly </el-form-item>
/> <el-form-item label="模型类别" prop="modelTypeId">
</el-form-item> <el-select v-model="form.modelTypeId" placeholder="请选择模型类别" clearable>
<el-form-item label="备注" prop="note"> <el-option v-for="dict in modeltypeList" :key="dict.id" :label="dict.modelTypeName" :value="dict.id" />
<el-input v-model="form.note" type="textarea" placeholder="请输入内容" /> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item label="是否是叶节点">
<el-button type="primary" @click="submitForm">确 定</el-button> <el-switch
<el-button @click="cancel">取 消</el-button> v-model="form.dc_is_leaf"
</el-form-item> @change="switch_isLeaf"
</el-form> 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> </div>
</template> </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"> <script setup name="newdevicemodel">
import { addDevicemodel, updateDevicemodel } from "@/api/model/devicemodel"; import { listDevicemodel,addDevicemodel, updateDevicemodel } from "@/api/model/devicemodel";
import { Edit, Picture, UploadFilled } from '@element-plus/icons-vue' import { listModelType} from "@/api/model/modelType";
import { onMounted, ref } from 'vue';
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const { dc_available, dc_is_leaf } = proxy.useDict('dc_available', 'dc_is_leaf');
const router = useRouter(); const router = useRouter();
const devicemodelOptions = ref([]); const devicemodelOptions = ref([]);
const open = ref(false); 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({ const data = reactive({
form: {}, form: {
sort:1,
dc_is_leaf:false,
dc_available:false,
// pid:tempPid,
},
queryParams: { queryParams: {
modelName: null, modelName: null,
modelCode: null, modelCode: null,
@ -68,7 +154,16 @@
}, },
rules: { rules: {
modelTypeId: [ 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 (valid) {
if (form.value.id != null) { if (form.value.id != null) {
updateDevicemodel(form.value).then(response => { updateDevicemodel(form.value).then(response => {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
router.go(-1); router.go(-1);
proxy.$modal.msgSuccess("修改成功");
}); });
} else { } else {
addDevicemodel(form.value).then(response => { addDevicemodel(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功");
open.value = false;
router.go(-1); 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> </script>

147
src/views/model/devicemodel/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="app-container"> <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-form-item label="模型名称" prop="modelName">
<el-input <el-input
v-model="queryParams.modelName" v-model="queryParams.modelName"
@ -17,22 +17,47 @@
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="排序;排序" prop="sort"> <el-form-item label="排序" prop="sort">
<el-input <el-input
v-model="queryParams.sort" v-model="queryParams.sort"
placeholder="请输入排序;排序" placeholder="请输入排序"
clearable clearable
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </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 <el-input
v-model="queryParams.pid" v-model="queryParams.pid"
placeholder="请输入上级id;上级id" placeholder="请输入上级id"
clearable clearable
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </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-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</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="modelName" />
<el-table-column label="模型编码" align="center" prop="modelCode" /> <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" 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="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"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope"> <template #default="scope">
<el-button <el-button
@ -107,22 +142,45 @@
<el-form-item label="模型编码" prop="modelCode"> <el-form-item label="模型编码" prop="modelCode">
<el-input v-model="form.modelCode" placeholder="请输入模型编码" /> <el-input v-model="form.modelCode" placeholder="请输入模型编码" />
</el-form-item> </el-form-item>
<el-form-item label="排序;排序" prop="sort"> <el-form-item label="排序" prop="sort">
<el-input v-model="form.sort" placeholder="请输入排序;排序" /> <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>
<el-form-item label="上级id;上级id" prop="pid"> <el-form-item label="上级id" prop="pid">
<el-tree-select <el-tree-select
v-model="form.pid" v-model="form.pid"
:data="devicemodelOptions" :data="devicemodelOptions"
:props="{ value: 'id', label: 'modelName', children: 'children' }" :props="{ value: 'id', label: 'modelName', children: 'children' }"
value-key="id" value-key="id"
placeholder="请选择上级id;上级id" placeholder="请选择上级id"
check-strictly check-strictly
/> />
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="note"> <el-form-item label="备注" prop="note">
<el-input v-model="form.note" type="textarea" placeholder="请输入内容" /> <el-input v-model="form.note" type="textarea" placeholder="请输入内容" />
</el-form-item> </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> </el-form>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
@ -138,7 +196,8 @@
import { listDevicemodel, getDevicemodel, delDevicemodel, addDevicemodel, updateDevicemodel } from "@/api/model/devicemodel"; import { listDevicemodel, getDevicemodel, delDevicemodel, addDevicemodel, updateDevicemodel } from "@/api/model/devicemodel";
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const router = useRouter(); const { available, dc_is_leaf } = proxy.useDict('available', 'dc_is_leaf');
const devicemodelList = ref([]); const devicemodelList = ref([]);
const devicemodelOptions = ref([]); const devicemodelOptions = ref([]);
const open = ref(false); const open = ref(false);
@ -147,7 +206,7 @@ const showSearch = ref(true);
const title = ref(""); const title = ref("");
const isExpandAll = ref(true); const isExpandAll = ref(true);
const refreshTable = ref(true); const refreshTable = ref(true);
const router = useRouter();
const data = reactive({ const data = reactive({
form: {}, form: {},
queryParams: { queryParams: {
@ -156,12 +215,32 @@ const data = reactive({
sort: null, sort: null,
modelTypeId: null, modelTypeId: null,
pid: null, pid: null,
note: null note: null,
isLeaf: null,
vailable: null
}, },
rules: { rules: {
modelName: [
{ required: true, message: "模型名称不能为空", trigger: "blur" }
],
modelCode: [
{ required: true, message: "模型编码不能为空", trigger: "blur" }
],
sort: [
{ required: true, message: "排序不能为空", trigger: "blur" }
],
modelTypeId: [ modelTypeId: [
{ required: true, message: "模型类别Id不能为空", trigger: "change" } { 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, sort: null,
modelTypeId: null, modelTypeId: null,
pid: null, pid: null,
note: null note: null,
isLeaf: "0",
vailable: "0"
}; };
proxy.resetForm("devicemodelRef"); proxy.resetForm("devicemodelRef");
} }
@ -229,17 +312,26 @@ function resetQuery() {
/** 新增按钮操作 */ /** 新增按钮操作 */
function handleAdd(row) { function handleAdd(row) {
const path = "/devicemodel/addmodel" const path = "/newdevicemodel";
reset(); let pid = 0;
getTreeselect(); if(row.isLeaf){
proxy.$message({
message: '请选择非叶节点行再操作',
type: 'warn'
});
return;
}
if (row != null && row.id) { if (row != null && row.id) {
form.value.pid = row.id; pid = row.id;
} else {
form.value.pid = 0;
} }
router.push(path); router.push({
// open.value = true; name:path,
// title.value = "添加设备模型信息"; query:{
pid:pid,
// devicemodelOptions:devicemodelOptions
}
});
} }
/** 展开/折叠操作 */ /** 展开/折叠操作 */
@ -273,13 +365,13 @@ function submitForm() {
updateDevicemodel(form.value).then(response => { updateDevicemodel(form.value).then(response => {
proxy.$modal.msgSuccess("修改成功"); proxy.$modal.msgSuccess("修改成功");
open.value = false; open.value = false;
router.go(-1); getList();
}); });
} else { } else {
addDevicemodel(form.value).then(response => { addDevicemodel(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功"); proxy.$modal.msgSuccess("新增成功");
open.value = false; open.value = false;
router.go(-1); getList();
}); });
} }
} }
@ -296,5 +388,8 @@ function handleDelete(row) {
}).catch(() => {}); }).catch(() => {});
} }
/** 查询设备模型信息下拉树结构 */
// getTreeselect();
getList(); getList();
</script> </script>

Write Preview
Loading…
Cancel
Save