Browse Source

图例库下拉框

zhulizhen1111 4 years ago
parent
commit
52f8829406

+ 4 - 0
src/api/legendLibrary.js

@@ -39,3 +39,7 @@ export function uploadImg({ postParams }) {
 export function getTransfer({ getParams }) {
     return httputils.getJson(`/serve/graphElement/search`, getParams)
 }
+//图例库typeId
+export function queryTypeId({ postParams }) {
+    return httputils.postJson(`/serve/graphElement/type/query`, postParams)
+}

+ 21 - 27
src/views/legendLibrary/addForm.vue

@@ -3,7 +3,7 @@
         <div class='form1'>
             <span class='span1'>图例编码</span>
             <span class='span2'>图例名称</span>
-            <span class='span3' v-if='ruleForm.Type==1 || ruleForm.Type==3'>展示预览</span>
+            <span class='span3' v-if='ruleForm.Type=="Zone" || ruleForm.Type=="Icon"'>展示预览</span>
         </div>
         <div class='form2'>
             <div class='input-left'>
@@ -16,22 +16,22 @@
                     <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
                 </el-select>
             </div>
-            <div class='input-right' v-if='ruleForm.Type==1 || ruleForm.Type==3'>
+            <div class='input-right' v-if='ruleForm.Type=="Zone" || ruleForm.Type=="Icon"'>
                 <div
                     class='model'
                     :style='`background:${ruleForm.color};border-width:${ruleForm.borderLine}px;border-style:${ruleForm.borderColor}; border-color:${ruleForm.borderColor};`'
                 ></div>
             </div>
         </div>
-        <div v-if='ruleForm.Type==1 || ruleForm.Type==4' class='form3'>
+        <div v-if='ruleForm.Type=="Zone" || ruleForm.Type=="Line"' class='form3'>
             <div class='form3-top'>
-                <span class='form3-span1' v-if='ruleForm.Type==1'>填充色以及透明度</span>
+                <span class='form3-span1' v-if='ruleForm.Type=="Zone"'>填充色以及透明度</span>
                 <span class='form3-span3'>边框颜色</span>
                 <span class='form3-span4'>边框线型</span>
                 <span class='form3-span5'>边框粗细</span>
             </div>
             <div class='form3-bottom'>
-                <el-color-picker v-if='ruleForm.Type==1' v-model='ruleForm.color' show-alpha style='margin:0 172px 0 10px'></el-color-picker>
+                <el-color-picker v-if='ruleForm.Type=="Zone"' v-model='ruleForm.color' show-alpha style='margin:0 172px 0 10px'></el-color-picker>
                 <el-color-picker v-model='ruleForm.borderColor' show-alpha style='margin:0 90px 0 10px'></el-color-picker>
 
                 <el-select
@@ -53,7 +53,7 @@
                 </el-select>
             </div>
         </div>
-        <div v-if='ruleForm.Type==3' class='form5'>
+        <div v-if='ruleForm.Type=="Icon"' class='form5'>
             <div class='form5-top'>上传新图标</div>
             <div>
                 <el-upload class='upload-demo' action='https://jsonplaceholder.typicode.com/posts/' :http-request='getFile' :file-list='fileList'>
@@ -61,7 +61,7 @@
                 </el-upload>
             </div>
         </div>
-        <div v-if='ruleForm.Type!=2' class='form4'>
+        <div v-if='ruleForm.Type!="None"' class='form4'>
             <div class='form4-top'>
                 <span class='form4-span1'>对应工程信息化中的位置/设备分类</span>
                 <span class='form4-span2'>工程信息化的专业</span>
@@ -69,13 +69,13 @@
             </div>
             <div class='form3-bottom'>
                 <el-select v-model='value' placeholder='请选择' size='small' style='width:200px;margin-right:48px;'>
-                    <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
+                    <el-option v-for='item in options1' :key='item.value' :label='item.label' :value='item.value'></el-option>
                 </el-select>
                 <el-select v-model='value' placeholder='请选择' size='small' style='width:200px;margin-right:48px'>
-                    <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
+                    <el-option v-for='item in options2' :key='item.value' :label='item.label' :value='item.value'></el-option>
                 </el-select>
                 <el-select v-model='value' placeholder='请选择' size='small' style='width:200px;'>
-                    <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
+                    <el-option v-for='item in options3' :key='item.value' :label='item.label' :value='item.value'></el-option>
                 </el-select>
             </div>
         </div>
@@ -87,34 +87,27 @@ import { createLegend, updateLegend, uploadImg } from '@/api/legendLibrary.js'
 export default {
     data() {
         return {
-            // ruleForm: {
-            //     color: 'rgba(19, 206, 102, 0.8)',
-            //     borderColor: 'rgba(19, 206, 102, 0.8)',
-            //     borderLine: '',
-            //     linepx: '',
-            //     Code: '',
-            //     Name: '',
-            //     Type: '2',
-            //     unit: ''
-            // },
             options: [
                 {
-                    value: '2',
+                    value: 'None',
                     label: '非图例'
                 },
                 {
-                    value: '1',
+                    value: 'Zone',
                     label: '区域'
                 },
                 {
-                    value: '3',
+                    value: 'Icon',
                     label: '图标'
                 },
                 {
-                    value: 4,
+                    value: 'Line',
                     label: '线条'
                 }
             ],
+            options1: [],
+            options2: [],
+            options3: [],
             borderLineOption: [
                 {
                     id: 'solid',
@@ -182,13 +175,13 @@ export default {
             //新增
             let postParams = {
                 Name: this.ruleForm.Name,
-                Theme: '111',
-                Type: '111',
-                Id: '77'
+                Type: this.ruleForm.Type,
+                Unit: this.ruleForm.Unit
             }
             createLegend({ postParams }).then(res => {
                 if (res.Result == 'success') {
                     this.$message.success('添加图例成功!')
+                    this.$emit('addSuccess')
                 }
             })
         },
@@ -198,6 +191,7 @@ export default {
             updateLegend({ postParams }).then(res => {
                 if (res.Result == 'success') {
                     this.$message.success('图例修改成功!')
+                    this.$emit('updateSuccess')
                 }
             })
         }

+ 32 - 7
src/views/legendLibrary/addLegend.vue

@@ -1,8 +1,8 @@
 <template>
     <div class='add-legend'>
         <el-dialog :title='title' :visible.sync='dialogVisible'>
-            <add-list v-if='title==""' ref='searchList' :GraphCategoryId='GraphCategoryId'></add-list>
-            <add-form v-else ref='add' :ruleForm='info'></add-form>
+            <add-list v-if='title==""' ref='searchList' :GraphCategoryId='GraphCategoryId' @mesg='mesg'></add-list>
+            <add-form v-else ref='add' :ruleForm='info' @addSuccess='addSuccess' @updateSuccess='updateSuccess'></add-form>
             <span slot='footer' class='dialog-footer'>
                 <el-button @click='dialogVisible = false' size='small'>取 消</el-button>
                 <el-button type='primary' @click='save' size='small'>确 定</el-button>
@@ -18,7 +18,11 @@ export default {
     data() {
         return {
             dialogVisible: false,
-            info: {},
+            info: {
+                Name: '',
+                Type: 'None',
+                Unit: ''
+            },
             title: '',
             GraphCategoryId: ''
         }
@@ -28,11 +32,29 @@ export default {
         open(row, title, GraphCategoryId) {
             this.dialogVisible = true
             this.title = title
-            this.info = row
             this.GraphCategoryId = GraphCategoryId
-            // if (!title) {
-            //     this.$refs.searchList.query()
-            // }
+            if (title == '新增图例库') {
+                this.info = {
+                    Name: '',
+                    Type: '',
+                    Unit: ''
+                }
+            }
+            if (title == '修改图例库') {
+                this.info = row
+            }
+            if (!title && this.$refs.searchList) {
+                this.$refs.searchList.queryAll()
+            }
+        },
+        mesg() {
+            this.$emit('mesg')
+        },
+        updateSuccess() {
+            this.$emit('updateSuccess')
+        },
+        addSuccess() {
+            this.$emit('addSuccess')
         },
         save() {
             this.dialogVisible = false
@@ -42,6 +64,9 @@ export default {
             if (this.title == '修改图例库') {
                 this.$refs.add.update()
             }
+            if (!this.title) {
+                this.$refs.searchList.save()
+            }
         }
     }
 }

+ 74 - 22
src/views/legendLibrary/index.vue

@@ -9,7 +9,15 @@
         </div>
         <div class='legend-library-bottom'>
             <div class='select-box'>
-                <Select width='180' tipPlace='top' caption='所属分类:' v-model='styleValue' :selectdata='typeOptions' :placeholder='"请选择"'></Select>
+                <Select
+                    width='180'
+                    tipPlace='top'
+                    caption='所属分类:'
+                    v-model='Type'
+                    :selectdata='typeOptions'
+                    :placeholder='"请选择"'
+                    @change='getTableList'
+                ></Select>
                 <Select
                     width='180'
                     tipPlace='top'
@@ -18,10 +26,27 @@
                     :selectdata='positionSelect'
                     :placeholder='"请选择"'
                     style='margin:0 12px'
+                    @change='getTableList'
+                ></Select>
+                <Select width='180' tipPlace='top' caption='位置/设备分类:' :selectdata='dataSelect2' @change='getTableList' :placeholder='"请选择"'></Select>
+                <Select
+                    width='180'
+                    tipPlace='top'
+                    caption='专业:'
+                    :selectdata='dataSelect2'
+                    :placeholder='"请选择"'
+                    @change='getTableList'
+                    style='margin:0 12px'
+                ></Select>
+                <Select
+                    width='180'
+                    tipPlace='top'
+                    v-model='TypeId'
+                    caption='铺位可视化:'
+                    :selectdata='typeIdSelect'
+                    :placeholder='"请选择"'
+                    @change='getTableList'
                 ></Select>
-                <Select width='180' tipPlace='top' caption='位置/设备分类:' :selectdata='dataSelect2' :placeholder='"请选择"'></Select>
-                <Select width='180' tipPlace='top' caption='专业/系统:' :selectdata='dataSelect2' :placeholder='"请选择"' style='margin:0 12px'></Select>
-                <Select width='180' tipPlace='top' caption='铺位可视化:' :selectdata='typeIdSelect' :placeholder='"请选择"' @change='getTableList'></Select>
                 <Select
                     width='180'
                     tipPlace='top'
@@ -32,7 +57,7 @@
                     :placeholder='"请选择"'
                     style='margin:0 12px'
                 ></Select>
-                <a-input-search placeholder style='width: 192px;height:34px' @search='onSearch' />
+                <a-input-search placeholder v-model='keyword' style='width: 192px;height:34px' @search='getTableList' />
             </div>
             <el-table :data='tableData' style='width: 100%'>
                 <el-table-column prop='Name' label='图例名称'>
@@ -81,13 +106,13 @@
                 ></el-pagination>
             </div>
         </div>
-        <add-legend ref='addLegend'></add-legend>
+        <add-legend ref='addLegend' @updateSuccess='updateSuccess' @addSuccess='addSuccess'></add-legend>
     </div>
 </template>
 <script>
 import addLegend from './addLegend'
 import Select from '@/components/Select/Select.vue'
-import { queryLegend, deleteLegend } from '@/api/legendLibrary.js'
+import { queryLegend, deleteLegend, queryTypeId } from '@/api/legendLibrary.js'
 export default {
     components: { addLegend, Select },
     data() {
@@ -103,26 +128,27 @@ export default {
                 { id: 1, name: '正常' },
                 { id: 0, name: '异常' }
             ],
-            styleValue: '', //所属分类
+            Type: '', //所属分类
             typeOptions: [
                 {
-                    value: '2',
-                    label: '非图例'
+                    id: 'None',
+                    name: '非图例'
                 },
                 {
-                    value: '1',
-                    label: '区域'
+                    id: 'Zone',
+                    name: '区域'
                 },
                 {
-                    value: '3',
-                    label: '图标'
+                    id: 'Icon',
+                    name: '图标'
                 },
                 {
-                    value: '0',
-                    label: '线条'
+                    id: 'Line',
+                    name: '线条'
                 }
             ],
-            typeIdSelect: [],
+            TypeId: '',
+            typeIdSelect: [{ id: 'Zone', name: '铺位面' }],
             size: 11,
             total: 1,
             currentPage: 1,
@@ -138,15 +164,28 @@ export default {
                 { id: '7', name: '电梯系统-楼层分布' },
                 { id: '8', name: '燃气系统-楼层分布' },
                 { id: '9', name: '土建装饰-石材铺装' }
-            ]
+            ],
+            keyword: ''
         }
     },
     methods: {
         dumpRules() {
             this.$router.push('/home/legendRules')
         },
-        handleChange() {},
-        onSearch() {},
+        getTypeId() {
+            let postParams = {}
+            queryTypeId({ postParams }).then(res => {
+                console.log(res)
+                let content = res.Content
+                content.forEach(el => {
+                    this.typeIdSelect.push({
+                        id: el.Type + '',
+                        name: el.Name
+                    })
+                })
+                console.log(this.typeIdSelect)
+            })
+        },
         add() {
             this.$refs.addLegend.open('', '添加图例库')
         },
@@ -191,7 +230,10 @@ export default {
         getTableList() {
             let postParams = {
                 PageNumber: this.currentPage,
-                PageSize: this.size
+                PageSize: this.size,
+                Keyword: this.keyword,
+                Type: this.Type,
+                TypeId: this.TypeId
             }
             if (this.state == 0) {
                 postParams.Filters = 'deleted=true'
@@ -203,9 +245,16 @@ export default {
                 this.tableData = res.Content
                 this.total = res.Total
             })
+        },
+        updateSuccess() {
+            this.getTableList()
+        },
+        addSuccess() {
+            this.getTableList()
         }
     },
     mounted() {
+        this.getTypeId()
         this.getTableList()
     }
 }
@@ -262,9 +311,12 @@ export default {
     td {
         color: #1f2429;
     }
-
     .ant-select {
         margin-right: 12px;
     }
 }
+.p-select-option-box {
+    background: #fff;
+    border: 1px solid #ccc;
+}
 </style>

+ 12 - 7
src/views/legendRules/addList.vue

@@ -3,7 +3,7 @@
         <div>
             <a-input-search v-model='keyword' placeholder style='width: 192px;margin-bottom:12px;height:32px;' @search='queryAll' />
         </div>
-        <el-transfer v-model='value' :data='data' @change='transferChange'></el-transfer>
+        <el-transfer v-model='value' :data='data' v-loading='loading' @change='transferChange'></el-transfer>
     </div>
 </template>
 
@@ -15,7 +15,8 @@ export default {
             data: [],
             value: [],
             keyword: '',
-            multipleSelection: []
+            multipleSelection: [],
+            loading: false
         }
     },
     props: ['GraphCategoryId'],
@@ -47,20 +48,24 @@ export default {
             queryRelation({ postParams }).then(res => {
                 let content = res.Content
                 content.forEach(el => {
-                    this.value.push({
-                        label: el.Name + '',
-                        key: el.Id
-                    })
+                    this.value.push(el.Id)
                 })
+                this.loading = false
             })
         },
         save() {
+            this.loading = true
             let GraphElementIds = this.value.forEach
             let postParams = {
                 GraphCategoryId: this.GraphCategoryId,
                 GraphElementIds: this.value
             }
-            updateRelation({ postParams }).then(res => {})
+            updateRelation({ postParams }).then(res => {
+                if (res.Result == 'success') {
+                    this.$message.success('添加成功!')
+                    this.$emit('mesg')
+                }
+            })
         }
     },
     mounted() {

+ 4 - 1
src/views/legendRules/index.vue

@@ -32,7 +32,7 @@
                 </el-table>
             </div>
         </div>
-        <add-legend ref='addLegend'></add-legend>
+        <add-legend ref='addLegend' @mesg='mesg'></add-legend>
     </div>
 </template>
 <script>
@@ -70,6 +70,9 @@ export default {
                 }
             })
         },
+        mesg() {
+            this.getData()
+        },
         add() {
             this.$refs.addLegend.open('', '', this.GraphCategoryId)
         },