1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<template>
  <el-container>
 
    <el-aside>
      <basic-container>
        <div ref="TreeBox" style="height: calc(100vh - 144px);!important;">
          <div class="headerCon">
            <el-button icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">创建
            </el-button>
            <el-button icon="el-icon-edit" plain size="small" type="primary" @click="editClickHandler">修改
            </el-button>
            <el-button icon="el-icon-delete" plain size="small" type="danger" @click="delClickHandler">删除
            </el-button>
            <el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出
            </el-button>
            <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="uploadClickHandler">导入
            </el-button>
            <el-button class="smallBtn" plain size="small" type="primary"
                       @click="checkViewClickHandler">查看使用范围
            </el-button>
          </div>
          <!-- 左侧树         -->
          <div style="height:  calc(100vh - 280px);">
            <avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick">
          <span slot-scope="{ node, data }" class="el-tree-node__label">
           <span style="font-size: 15px">
              <i class="el-icon-s-promotion"></i>
                {{ (node || {}).label }}
            </span>
          </span>
            </avue-tree>
          </div>
        </div>
      </basic-container>
    </el-aside>
 
    <el-main>
      <basic-container>
      </basic-container>
    </el-main>
 
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      form: {},
      data: [
        {
          name: "张三",
          sex: "男",
          showType:'Ludc'
        },
      ],
      option: {
        column: [
          {
            label: "姓名",
            prop: "name",
          },
          {
            label: "性别",
            prop: "sex",
            type: "select",
            dicData: [
              {
                label: "男",
                value: 0,
              },
              {
                label: "女",
                value: 1,
              },
            ],
          },
          {
            label: '源对象',
            prop: 'showType',
            type: 'select',
            cascader: ['linkType', 'templateId', 'SubUILayout', 'searchObjType', 'queryTemplateName'],
            placeholder: "请输入内容",
            dicUrl: '/api/uiManagerController/getBtmDatasByPage?page=1&limit=-1',
            filterable: true,
            props: {
              label: 'name',
              value: 'name',
              desc: 'label'
            },
            rules: [
              {
                required: true,
                message: '请选择内容',
                trigger: 'change'
              }
            ],
          },
        ],
      },
    };
  },
  methods: {
    beforeOpen(done, type) {
      this.$alert(`我是${type}`, {
        confirmButtonText: "确定",
        callback: (action) => {
          if (["view", "edit"].includes(type)) {
            // 查看和编辑逻辑
            this.form.showType = 'Ludc';
          } else {
            //新增逻辑
            this.form.name = "初始化赋值";
            this.form.sex = 0;
            this.form.showType = 'Ludc';
          }
          done();
        },
      });
    },
  },
};
</script>