<template>
|
<div>
|
<el-tabs v-model="areaType" type="card" @tab-click="handleClick">
|
<el-tab-pane v-if="uiDefineData.plIsShowNavigator" label="导航区" name="1"></el-tab-pane>
|
<el-tab-pane v-if="uiDefineData.plIsShowForm" label="控制区" name="2"></el-tab-pane>
|
<el-tab-pane v-if="uiDefineData.plIsShowTab" label="操作区" name="3"></el-tab-pane>
|
</el-tabs>
|
<avue-crud
|
ref="crud"
|
:data="data"
|
:option="option"
|
:table-loading="tableLoading"
|
@selection-change="selectChangeHandler"
|
@row-click="rowClickHandler">
|
<template slot="menuLeft">
|
<el-button icon="el-icon-plus" size="small" type="primary" @click="addHandler">创建</el-button>
|
<!--<el-button icon="el-icon-edit" plain size="small" type="primary" @click="editHandler">修改</el-button>
|
<el-button icon="el-icon-delete" plain size="small" type="danger" @click="delHandler">删除</el-button>-->
|
</template>
|
<template slot="menu" slot-scope="scope">
|
<el-button icon="el-icon-edit" size="small" type="text" @click="rowEditBtnClick(scope.row)">编辑
|
</el-button>
|
<el-button icon="el-icon-delete" size="small" type="text" @click="rowDeleteHandler(scope.row)">删除
|
</el-button>
|
</template>
|
<template slot="plIsOpen" slot-scope="{row}">
|
<el-tag v-if="row.plIsOpen === 1" type="success">启用</el-tag>
|
<el-tag v-else type="danger">未启用</el-tag>
|
</template>
|
</avue-crud>
|
<bottom-table :sourceData="selectList[0]" :height="'280px'" style="margin-top: 15px;"></bottom-table>
|
<!-- 创建编辑自定义对话框 -->
|
<el-dialog
|
v-dialogDrag
|
v-loading="dialogLoading"
|
:title="dialogType === 'add' ? ' 创建 页签' : '编辑 页签'"
|
:visible.sync="dialogVisible"
|
append-to-body="true"
|
class="avue-dialog"
|
:close-on-click-modal="false"
|
width="800px"
|
@close="dialogClose"
|
>
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px" size="small">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="页面编码：" prop="plCode">
|
<el-input v-model="form.plCode"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="名称：" prop="plName">
|
<el-input v-model="form.plName"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="序号：" prop="plSeq">
|
<el-input v-model="form.plSeq"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="是否启用" prop="plIsOpen">
|
<el-switch v-model="form.plIsOpen" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="显示表达式：" prop="plOpenExpression">
|
<el-input type="textarea" :rows="3" v-model="form.plOpenExpression"></el-input>
|
</el-form-item>
|
<el-form-item label="国际化标准：" prop="plLabel">
|
<el-input type="textarea" :rows="1" v-model="form.plLabel"></el-input>
|
</el-form-item>
|
<el-form-item label="描述：" prop="plDesc">
|
<el-input type="textarea" :rows="1" v-model="form.plDesc"></el-input>
|
</el-form-item>
|
<el-form-item label="UI解析类：" prop="plUIParser">
|
<el-input type="textarea" :rows="2" v-model="form.plUIParser"></el-input>
|
</el-form-item>
|
<div class="tip">
|
<div style="color: #D40000">示例：java_cs:xxx;java_bs:xxx;net_cs:xxx;net_bs:xxx;mobile_cs:xxx;mobile_bs:xxx;</div>
|
<div>1、用英文半角分号;分隔各组值。</div>
|
<div>2、每组用英文半角冒号:分隔单一拓展属性名称及属性值。</div>
|
<div>3、其中的xxx是各种解析类的完整类型名称（完全限定名）。</div>
|
<div>4、输入时，不要敲回车换行。</div>
|
</div>
|
<el-form-item label="拓展属性：" prop="plExtAttr">
|
<el-input type="textarea" :rows="2" v-model="form.plExtAttr"></el-input>
|
</el-form-item>
|
<div class="tip">
|
<div style="color: #D40000">示例：ext1:xx;ext2:xx;ext3:xxx;ext4:xxx;extn:xxx</div>
|
<div>1、用英文半角分号;分隔各组值。</div>
|
<div>2、每组用英文半角冒号:分隔单一拓展属性名称及属性值。</div>
|
<div>3、可以定义任意组，但总字符长度不得超过4000。</div>
|
<div>4、输入时，不要敲回车换行。</div>
|
</div>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogClose">取 消</el-button>
|
<el-button type="primary" @click="saveHandler">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import basicOption from "@/util/basic-option";
|
import {
|
getTabByContextIdAndType,
|
addTabData,
|
updateTabData,
|
deleteTabData,
|
} from "@/api/UI/uiDefine";
|
import func from "@/util/func";
|
import bottomTable from "./bottomTable/index";
|
|
export default {
|
name: "plShow",
|
props: {
|
uiDefineData: {
|
type: Object,
|
default: {}
|
},
|
},
|
components:{bottomTable},
|
data() {
|
return {
|
uiDefineOid:'',
|
areaType: '',
|
tableLoading: false,
|
selectList: [],
|
option: {
|
...basicOption,
|
height:'300px',
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
index:false,
|
menuWidth:160,
|
align:'left',
|
column: [{
|
label: '序号',
|
prop: 'plSeq',
|
width:50
|
}, {
|
label: '编码',
|
prop: 'plCode',
|
width:180
|
}, {
|
label: '名称',
|
prop: 'plName',
|
width:200
|
}, {
|
label: '是否启用',
|
prop: 'plIsOpen',
|
align:'center',
|
width: 90
|
}, {
|
label: '显示表达式',
|
prop: 'plOpenExpression',
|
overHidden:true,
|
width:300
|
}, {
|
label: 'UI解析类',
|
prop: 'plUIParser'
|
}, {
|
label: '拓展属性',
|
prop: 'plExtAttr'
|
}, {
|
label: '描述',
|
prop: 'plDesc'
|
}]
|
},
|
data: [],
|
dialogLoading: false,
|
dialogVisible: false,
|
dialogType: '',
|
form: {
|
plSeq: '',
|
plCode: '',
|
plName: '',
|
plIsOpen:0,
|
plOpenExpression:'',
|
plLabel:'',
|
plUIParser:'',
|
plExtAttr:'',
|
plDesc:''
|
},
|
rules: {
|
plName: [{
|
required: true,
|
message: '请输入名称',
|
trigger: 'blur'
|
}],
|
plCode: [{
|
required: true,
|
message: '请输入编码',
|
trigger: 'blur'
|
}],
|
plSeq: [{
|
required: true,
|
message: '请输入序号',
|
trigger: 'blur'
|
}]
|
},
|
}
|
},
|
watch: {
|
uiDefineData:{
|
handler(val) {
|
if(val && val.plOId) {
|
if (val.plIsShowNavigator) {
|
this.areaType = '1';
|
}else if(val.plIsShowForm){
|
this.areaType = '2'
|
}else{
|
this.areaType = '3'
|
}
|
this.getTableList()
|
}
|
},
|
immediate: true,
|
deep:true
|
}
|
},
|
created() {
|
this.uiDefineOid=this.$route.params.uiDefineOid;
|
},
|
methods: {
|
handleClick(tab, event) {
|
this.getTableList()
|
},
|
getTableList(){
|
const params = {
|
contextId:this.uiDefineData.plOId,
|
areaType:this.areaType
|
}
|
getTabByContextIdAndType( params).then(res => {
|
this.data = res.data.data;
|
this.selectList=[];
|
this.$refs.crud.clearSelection();
|
this.tableLoading = false;
|
})
|
},
|
selectChangeHandler(row) {
|
this.selectList = row;
|
},
|
// 行点击
|
rowClickHandler(row) {
|
func.rowClickHandler(
|
row,
|
this.$refs.crud,
|
this.lastIndex,
|
(newIndex) => {
|
this.lastIndex = newIndex;
|
},
|
() => {
|
this.selectList = [];
|
}
|
);
|
},
|
//创建
|
addHandler(){
|
this.form={
|
plSeq: '',
|
plCode: '',
|
plName: '',
|
plIsOpen:0,
|
plOpenExpression:'',
|
plLabel:'',
|
plUIParser:'',
|
plExtAttr:'',
|
plDesc:''
|
};
|
this.dialogType = 'add';
|
this.dialogVisible = true;
|
},
|
editHandler(){
|
if(this.selectList.length!=0){
|
this.rowEditBtnClick(this.selectList[0]);
|
}else {
|
this.$message.error('请选择一条数据进行编辑');
|
}
|
},
|
delHandler(){
|
if (this.selectList.length <= 0) {
|
this.$message.error('请至少选择一条数据');
|
return;
|
}
|
const params = {
|
oids: this.selectList.map(item => item.plOId).join(',')
|
}
|
this.$confirm('您确定要删除所选择的数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deleteTabData(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success('删除成功');
|
this.getTableList();
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
// 编辑按钮
|
rowEditBtnClick(row) {
|
this.form=row;
|
this.dialogType = 'edit';
|
this.dialogVisible = true;
|
},
|
// 删除按钮
|
rowDeleteHandler(row) {
|
this.$confirm('您确定要删除所选择的数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deleteTabData({oids: row.plOId}).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success('删除成功');
|
this.getTableList();
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
// 关闭对话框
|
dialogClose() {
|
this.dialogVisible = false;
|
this.$refs.form.clearValidate();
|
this.form = {
|
plName: '',
|
plCode: '',
|
plDesc:'',
|
plIsShow: [],
|
}
|
},
|
// 保存页签
|
saveHandler() {
|
this.$refs.form.validate((valid,done) => {
|
if (valid) {
|
const params = {
|
plAreaType:parseInt(this.areaType),
|
plContextOId:this.uiDefineData.plOId,
|
...this.form
|
}
|
if (this.dialogType === 'add') {
|
addTabData(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success('添加成功');
|
this.dialogClose();
|
this.getTableList();
|
}
|
})
|
} else if (this.dialogType === 'edit') {
|
updateTabData(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success('修改成功');
|
this.dialogClose()
|
this.getTableList();
|
}
|
})
|
}
|
} else {
|
return false;
|
}
|
});
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
.tip{
|
font-size: 12px;
|
color: #909399;
|
margin: -13px 0 10px 100px;
|
}
|
</style>
|
