基础功能
# 1. 设计
1. 开发环境默认显示
2. 生产环境 / 测试环境 ：运维人员显示
设置运维人员： 表 SYS_USER_INFO 中 DEV 设置为 1
1
2
3
2
3
# 2. 布局优化：系统菜单 / 头部 head
<style lang="less">
/*
APP.vue 增加如下代码
如下样式需要加在 通用 样式后面
@import url("@core/assets/less/APP.less");
*/
:root{
// 系统菜单宽度设置
--tg-menu-width: 260px;
// 布局 head 高度设置
--tg-head-height: 80px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 3. 通用查询列表接口 ：
# （1）. 接口返回的CODE 字段都会返回对应的 NAME 字段
NAME 返回的格式为
codeName，比如 isRelist 返回的Name 字段 的 key 为isRelistName
# （2）. "导出EXCEL"功能： CODE 修改为对应的 Name
<tg-table-list>
- <template #isRelist="{scope}">
+ <template #isRelistName="{scope}">
<el-switch v-model="tableData[scope.$index].isRelist" active-value="1" inactive-value="0" />
</template>
</tg-table-list>
1
2
3
4
5
6
2
3
4
5
6
// Setting.js
{
"selectList":[
{
"labelName": "是否生成待放行",
- "columnCode": "isRelist",
+ "columnCode": "isRelistName",
}
]
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 4. 系统菜单某项 显示 / 隐藏
/*
src/tiangong_exn/utils/Menu.js
item 菜单项
返回值 true 显示 false 不显示
*/
export const menuItemShow =(item)=>{
return true
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 5.系统菜单显示数字
/*
src/tiangong_exn/utils/Menu.js
item 菜单项
返回值 false 不显示 数字 显示
*/
export const menuItemNum = (item) => {
return false
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 6. 不同的路由指向同一个 vue 页面文件
（1）权限平台返回的路由地址需要不一样；
（2）TgRouterPage 字段值为指向的 vue 页面文件；
（3）字段为权限平台：选项配置字段，返回的字段值为 options。
{
"TgRouterPage": "/appTq/tqsck/sech/tqsckSech"
}
1
2
3
2
3
# 7. TgInput autocomplete 输入框实现自动补全
（1）一定要用form的submit提交事件，才能使浏览器记住input里的值；
（2）tg-input 组件一定要写name属性
如下为 demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- import CSS -->
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
</head>
<body>
<div id="app">
<!--stop的iframe阻止submit后跳转-->
<iframe name="stop" class="none"></iframe>
<!-- stop的iframe阻止submit后跳转 end-->
<el-form
:model="ruleForm"
ref="ruleForm"
:rules="{}"
label-width="100px"
class="demo-ruleForm"
action="http://"
method="post"
target="stop"
>
<el-row>
<el-col :span="23">
<el-form-item label="姓名" prop="username">
<el-input
v-model="ruleForm.username"
auto-complete="on"
name="username2"
></el-input>
</el-form-item>
</el-col>
<el-col :span="23" class="tr">
<el-form-item class="no_m">
<el-input type="submit" @click="submitForm">提交 input</el-input>
<el-button type="submit" @click="submitForm"
>提交 button</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: "#app",
data: function () {
return {
visible: false,
ruleForm: {
pass: "",
number: "",
},
};
},
methods: {
submitForm() {
// 一定要使用form的submit方法，才能记住input的输入值，auto-complete="on"才生效
this.$refs["ruleForm"].$el.submit();
let formRef = this.$refs["ruleForm"];
console.log("~~~~~formRef~~~~", formRef);
this.$refs["ruleForm"].validate((valid) => {
if (valid) {
alert("success");
} else {
return false;
}
});
},
},
});
</script>
</html>
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
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
上次更新: 2024/5/21 09:01:50