|
@@ -1,26 +1,286 @@
|
|
|
<template>
|
|
|
- <div></div>
|
|
|
+ <div class="admin-apply">
|
|
|
+ <el-form :inline="true">
|
|
|
+ <el-form-item>
|
|
|
+ <el-input v-model="queryParams.name" size="small" placeholder="请输入"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="" size="small" @click="getList">查询</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="handleAdd(0)">新增</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-table
|
|
|
+ :row-key="getRowKeys"
|
|
|
+ v-loading="loading"
|
|
|
+ :data="tableData"
|
|
|
+ header-row-class-name="custom-table-header"
|
|
|
+
|
|
|
+ :expand-row-keys="expands"
|
|
|
+ @expand-change="expandChange"
|
|
|
+ :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
|
|
+ >
|
|
|
+ <el-table-column type="expand">
|
|
|
+ <template slot-scope="scope" style="width:80%">
|
|
|
+ <function-list :applyId="scope.row.id"></function-list>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="应用名称" align="" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span class="details">{{scope.row.name}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="describe" label="应用描述" align="center" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="createUserName" label="创建人" align="center" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-dropdown split-button type="primary" size="small" @click="handleEdit(scope.row)">
|
|
|
+ 编辑
|
|
|
+ <el-dropdown-menu slot="dropdown" class="text-align_center">
|
|
|
+
|
|
|
+ <el-dropdown-item @click.native="handleDetails(scope.row)">详情</el-dropdown-item>
|
|
|
+ <el-dropdown-item class="color-red" @click.native="handleDelete(scope.row)" divided>删除</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
|
|
|
+ </div>
|
|
|
+ <el-dialog :title="title" :visible.sync="visible" width="500px" :before-close="close">
|
|
|
+ <el-form v-if="visible" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" label-position="left">
|
|
|
+
|
|
|
+ <el-form-item label="应用名称" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name" placeholder="请输入应用名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="应用描述" prop="describe">
|
|
|
+ <el-input v-model="ruleForm.describe" placeholder="请输入" type="textarea" maxlength="100" show-word-limit></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="close">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :title="title" :visible.sync="showvisible" width="700px" class="my-dialog-name" contentStyle="width:400px;" :before-close="close" v-if="ruleForm.apply!=null">
|
|
|
+ <el-form label-position="left" class="demo-table-expand" label-width="80px">
|
|
|
+ <el-form-item label="应用名称 :">
|
|
|
+ <span>{{ruleForm.apply.name}}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="应用描述 :">
|
|
|
+ <span>{{ruleForm.apply.describe}}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="创建人 :">
|
|
|
+ <span>{{ruleForm.apply.createUserName}}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="租户列表" class="list">
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ <el-table :data="ruleForm.tenantVOList" header-row-class-name="custom-table-header" max-height="250" border>
|
|
|
+ <!-- <el-table-column type="index" label="#" width="55" align="center"></el-table-column> -->
|
|
|
+ <el-table-column prop="name" label="租户名称" align="center" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="contacts" label="联系人" align="center" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="address" label="联系人地址" align="center" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="type" label="类型" align="center" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column label="是否启用" align="center" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.state==0">否</span>
|
|
|
+ <span v-if="scope.row.state==1">是</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import Treeselect from '@riophae/vue-treeselect'
|
|
|
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
|
|
+import FunctionList from '../function/index.vue'
|
|
|
export default {
|
|
|
- components: {},
|
|
|
- props: {},
|
|
|
+ components: {
|
|
|
+ Treeselect,
|
|
|
+ FunctionList
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- };
|
|
|
+ getRowKeys(row){
|
|
|
+ return row.id
|
|
|
+ },
|
|
|
+ visible: false,
|
|
|
+ showvisible:false,
|
|
|
+ loading: false,
|
|
|
+ btnLoading: false,
|
|
|
+ total: 0,
|
|
|
+ tableData: [],
|
|
|
+ title: '',
|
|
|
+ expands:[],
|
|
|
+ queryParams: {
|
|
|
+ size: 10,
|
|
|
+ current: 1,
|
|
|
+ name: ''
|
|
|
+ },
|
|
|
+ ruleForm: {},
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: '请输入应用名称', trigger: 'blur' },],
|
|
|
+ describe: [{ required: true, message: '请输入描述', trigger: 'blur' },],
|
|
|
+ },
|
|
|
+ }
|
|
|
},
|
|
|
- watch: {},
|
|
|
- computed: {},
|
|
|
- created() {},
|
|
|
- mounted() {
|
|
|
- console.log(2)
|
|
|
+ computed: {
|
|
|
+ userinfo() {
|
|
|
+ return this.$store.state.admin.userinfo
|
|
|
+ }
|
|
|
},
|
|
|
- activated(){
|
|
|
- console.log(3)
|
|
|
+ mounted() {
|
|
|
+ this.getList()
|
|
|
+
|
|
|
},
|
|
|
- methods: {},
|
|
|
-};
|
|
|
+ methods: {
|
|
|
+ expandChange(row,expandedRows) {
|
|
|
+ let that=this
|
|
|
+ console.log(expandedRows);
|
|
|
+ if (expandedRows.length) {
|
|
|
+ that.expands = []
|
|
|
+ if (row) {
|
|
|
+ that.expands.push(row.id)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ that.expands = []
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ normalizer(node) {
|
|
|
+ return {
|
|
|
+ id: node.id,
|
|
|
+ label: node.name,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleAdd(parentId) {
|
|
|
+ this.title = '新增应用'
|
|
|
+ this.visible = true
|
|
|
+ this.ruleForm = {
|
|
|
+ // sort: 0,
|
|
|
+ // parentId: parentId
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleEdit(row) {
|
|
|
+ this.title = '编辑应用'
|
|
|
+ this.visible = true
|
|
|
+ this.ruleForm = { ...row }
|
|
|
+ },
|
|
|
+ handleDetails(row){
|
|
|
+ this.title = '应用详情'
|
|
|
+ this.showvisible = true
|
|
|
+ this.$api.getAllTenantByApplicationId({id:row.id}).then(response=>{
|
|
|
+ console.log(response)
|
|
|
+
|
|
|
+ this.ruleForm = response.data
|
|
|
+ this.ruleForm.apply={...row}
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.queryParams.current = val;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.visible = false
|
|
|
+ this.showvisible = false
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ this.loading = true
|
|
|
+ this.$api.queryApplication(this.queryParams).then(response => {
|
|
|
+
|
|
|
+ this.tableData = response.data
|
|
|
+ this.total = response.pageColumn.total
|
|
|
+ this.loading = false
|
|
|
+ }).catch(error => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ this.$refs.ruleForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.btnLoading = true
|
|
|
+ if (this.ruleForm.id) {
|
|
|
+ this.$api.editApply(this.ruleForm).then(response => {
|
|
|
+ this.$message.success('编辑成功')
|
|
|
+ this.btnLoading = false
|
|
|
+ this.getList()
|
|
|
+ this.close()
|
|
|
+ }).catch(error => {
|
|
|
+ this.btnLoading = false
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.ruleForm.tenant=this.userinfo.tenantId
|
|
|
+ this.$api.addApply(this.ruleForm).then(response => {
|
|
|
+ console.log(2,response)
|
|
|
+ this.$message.success('新增成功')
|
|
|
+ this.btnLoading = false
|
|
|
+ this.getList()
|
|
|
+ this.close()
|
|
|
+ }).catch(error => {
|
|
|
+ this.btnLoading = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleDelete(row) {
|
|
|
+ this.$confirm('确认删除本条数据吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.loading = true
|
|
|
+ this.$api.deleteApply({ id: row.id }).then(response => {
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ this.loading = false
|
|
|
+ this.getList()
|
|
|
+ }).catch(error => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
+<style lang="scss">
|
|
|
+.my-dialog-name{
|
|
|
+ .el-dialog__body{
|
|
|
+ padding-top:0
|
|
|
+}
|
|
|
+}
|
|
|
+.list .el-form-item__label{
|
|
|
+ font-weight: 900;
|
|
|
+}
|
|
|
+</style>
|
|
|
<style lang="scss" scoped>
|
|
|
+.admin-apply {
|
|
|
+
|
|
|
+}
|
|
|
+.details:hover{
|
|
|
+ border-bottom: 1px solid black;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+ .demo-table-expand {
|
|
|
+ font-size: 0;
|
|
|
+ }
|
|
|
+ .demo-table-expand label {
|
|
|
+ width: 90px;
|
|
|
+ color: #99a9bf;
|
|
|
+ }
|
|
|
+ .demo-table-expand .el-form-item {
|
|
|
+ margin-right: 0;
|
|
|
+ margin-bottom: 0;
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
</style>
|