123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232 |
- <template>
- <div class='add-legend'>
- <el-dialog :title='title' :visible.sync='dialogVisible'>
- <add-form
- ref='add'
- :InfosList='InfosList'
- :InfoTypeIdList='InfoTypeIdList'
- :ruleForm='info'
- @addSuccess='addSuccess'
- @updateSuccess='updateSuccess'
- :title='title'
- ></add-form>
- <span slot='footer' class='dialog-footer'>
- <el-button @click='dialogVisible = false,cancal()' size='small'>取 消</el-button>
- <el-button type='primary' @click='save' size='small'>确 定</el-button>
- </span>
- </el-dialog>
- <!-- <Modal :show='dialogVisible' :title='title' mode='middle' @close='dialogVisible=false'>
- <template #content>
- <add-form
- ref='add'
- :InfosList='InfosList'
- :InfoTypeIdList='InfoTypeIdList'
- :ruleForm='info'
- @addSuccess='addSuccess'
- @updateSuccess='updateSuccess'
- :title='title'
- />
- </template>
- <template #handle>
- <Button @click='dialogVisible = false,cancal()' type='default'>取 消</Button>
- <Button @click='save' type='primary'>确 定</Button>
- </template>
- </Modal>-->
- <TransferSelectModal
- defaultExpandAll
- default-expand-all
- v-if='treeData.length'
- :modalShow='modalShow4'
- placeholder='搜索'
- :linkage='false'
- :lastStage='true'
- :data='treeData'
- @cancel='treeCancel'
- @confirm='treeConfirm'
- :key='new Date().getTime()'
- />
- </div>
- </template>
- <script>
- import addForm from './addForm'
- import addList from '../legendRules/addList'
- import { groupByCategory, updateRelation } from '@/api/legendLibrary.js'
- export default {
- data() {
- return {
- dialogVisible: false,
- InfoTypeIdList: [],
- InfosList: [],
- info: {
- Name: '',
- Type: 'None',
- Unit: '',
- FillColor: '#ffffff',
- Color: '#ffffff',
- Url: '',
- LineWidth: '',
- LineDash: '',
- InfoTypeId: [], //铺位可视化typeid
- InfoLocal: [], //工程信息化位置与设备分类
- InfoSystem: [] //工程信息化专业/系统
- },
- title: '',
- GraphCategoryId: 'DTXT',
- modalShow4: false,
- treeData: []
- }
- },
- components: { addForm, addList },
- methods: {
- open(row, title, GraphCategoryId) {
- this.title = title
- this.GraphCategoryId = GraphCategoryId
- //console.log(title)
- if (GraphCategoryId) {
- groupByCategory({}).then(res => {
- this.treeData = []
- this.treeData = res.Data.map(i => this.getTree(i))
- })
- //treeSelect
- this.modalShow4 = true
- this.info = {
- Name: '',
- Type: 'None',
- Unit: '',
- FillColor: '#ffffff',
- Color: '#ffffff',
- Url: '',
- InfoTypeId: [], //铺位可视化typeid
- InfoLocal: [], //工程信息化位置与设备分类
- InfoSystem: [] //工程信息化专业/系统
- }
- } else if (title == '添加图例库') {
- this.dialogVisible = true
- this.InfoTypeIdList = []
- this.InfosList = []
- this.info = {
- Name: '',
- Type: 'None',
- Unit: '',
- FillColor: '#ffffff',
- Color: '#ffffff',
- Url: '',
- InfoTypeId: [], //铺位可视化typeid
- InfoLocal: [], //工程信息化位置与设备分类
- InfoSystem: [] //工程信息化专业/系统
- }
- } else if (title == '修改图例库') {
- this.dialogVisible = true
- this.info = row
- this.InfosList = []
- this.InfoTypeIdList = []
- // this.InfosList = [...row.InfoLocal.map(({ id }) => id), ...row.InfoSystem]
- this.InfosList = [...row.InfoLocal.map(({ id }) => id)]
- this.InfoTypeIdList = row.InfoTypeId
- console.log(this.InfosList, this.InfoTypeIdList)
- console.log(this.info)
- // 图例库规则中的transform
- } else if (title == '' && this.$refs.searchList) {
- this.$refs.searchList.queryAll()
- }
- },
- getTree(data) {
- return {
- id: data.Id,
- name: data.Name,
- children: data.Children && data.Children.length > 0 ? data.Children.map(i => this.getTree(i)) : []
- }
- },
- cancal() {
- this.info = {
- Name: '',
- Type: 'None',
- Unit: '',
- FillColor: '#ffffff',
- Color: '#ffffff',
- Url: '',
- InfoTypeId: [], //铺位可视化typeid
- InfoLocal: [], //工程信息化位置与设备分类
- InfoSystem: [] //工程信息化专业/系统
- }
- this.InfoTypeIdList = []
- this.InfosList = []
- this.$refs.add.fileList = []
- },
- mesg() {
- this.$emit('mesg')
- },
- updateSuccess() {
- this.$emit('updateSuccess')
- },
- addSuccess() {
- this.$emit('addSuccess')
- this.cancal()
- },
- save() {
- // FillColor,Color,Name
- if (this.info.Name == '') {
- this.$message.info('请填写图例名称')
- return false
- } else {
- if (this.info.Type != 'Image' && this.info.Type != 'None') {
- this.$refs.add.saveImg()
- } else {
- if (this.title == '添加图例库') {
- this.$refs.add.create()
- this.$emit('addSuccess')
- } else if (this.title == '修改图例库') {
- this.$refs.add.update()
- this.$emit('updateSuccess')
- }
- }
- this.dialogVisible = false
- // if (!this.title || this.info.Type == 'None') {
- // this.$refs.add.create()
- // }
- }
- },
- treeConfirm(ids, dataObj) {
- let postParams = {
- GraphCategoryId: this.GraphCategoryId.join(' '),
- GraphElementIds: ids
- }
- updateRelation({ postParams }).then(res => {
- if (res.Result == 'success') {
- this.$message.success('添加成功!')
- this.$emit('mesg')
- }
- })
- },
- treeCancel() {
- this.modalShow4 = false
- }
- }
- }
- </script>
- <style lang='less' scoped>
- .add-legend {
- /deep/ .el-dialog {
- width: 840px;
- height: 509px;
- border-radius: 8px;
- .el-dialog__header {
- border-bottom: 1px solid #e4e5e7;
- }
- .el-dialog__title {
- font-size: 16px;
- }
- }
- /deep/ .el-dialog__footer {
- position: absolute;
- bottom: 20px;
- right: 20px;
- }
- }
- </style>
|