|
|
@@ -0,0 +1,207 @@
|
|
|
+<template lang="html">
|
|
|
+ <div id="resources">
|
|
|
+ <el-row class="register">
|
|
|
+ <el-col :span="24" class="btn">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="20"><h3>资源管理</h3></el-col>
|
|
|
+ <!-- 批量导入按钮没加 -->
|
|
|
+ <el-col :span="4"><el-button type="success" icon="el-icon-plus" @click="dialog = true">添加资源</el-button></el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="search">
|
|
|
+ <el-col :span="5" class="searchInp"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
|
|
|
+ <el-col :span="2" class="searchBtn"><el-button icon="el-icon-search"></el-button></el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="list" style="padding:0 2rem;">
|
|
|
+ <el-collapse v-model="activeNames">
|
|
|
+ <el-collapse-item v-for="(data, index) in tableData" :key="index" :name="`${index}`" style="margin-bottom:1rem;">
|
|
|
+ <template #title>
|
|
|
+ <span style="padding-left:1.5rem;font-size:1rem;">{{ data.name }}</span>
|
|
|
+ </template>
|
|
|
+ <el-row style="padding:0.5rem;">
|
|
|
+ <el-popover v-for="(item, itemIndex) in data.children" :key="itemIndex" placement="bottom" trigger="click" @hide="form = {}">
|
|
|
+ <el-row type="flex" align="middle" justify="center">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-button size="mini" type="success" @click="handleEdit">修改</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-button size="mini" :type="`${item.state === '0' ? 'danger' : 'success'}`" @click="changeState(index, itemIndex)">
|
|
|
+ {{ item.state === '0' ? '停用' : '启用' }}
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-form :model="form">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="资源名称">
|
|
|
+ <el-input v-model="form.name" clearable></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </el-row>
|
|
|
+ <el-button
|
|
|
+ slot="reference"
|
|
|
+ size="mini"
|
|
|
+ :type="`${item.state === '0' ? 'success' : ''}`"
|
|
|
+ style="margin-right:1rem; margin-bottom:0.5rem;"
|
|
|
+ @click="openDialog(index, itemIndex)"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </el-button>
|
|
|
+ </el-popover>
|
|
|
+ </el-row>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-dialog title="资源编辑" :visible.sync="dialog">
|
|
|
+ <el-form :model="form" label-position="left" label-width="auto" style="padding: 0 5px;">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="资源类型">
|
|
|
+ <el-select v-model="form.index" placeholder="请选择资源类型" clearable>
|
|
|
+ <el-option v-for="(item, index) in tableData" :key="index" :label="item.name" :value="index"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="资源名称">
|
|
|
+ <el-input v-model="form.name" placeholder="请输入资源名称" clearable></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialog = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="handleEdit">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'resources',
|
|
|
+ props: {},
|
|
|
+ components: {},
|
|
|
+ data: () => ({
|
|
|
+ input: '',
|
|
|
+ textarea: '',
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ name: '文档',
|
|
|
+ children: [{ name: '文档1', state: '0' }, { name: '文档2', state: '1' }],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '应用',
|
|
|
+ children: [{ name: '应用1', state: '0' }, { name: '应用2', state: '0' }, { name: '应用3', state: '0' }],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '数据',
|
|
|
+ children: [{ name: '数据1', state: '0' }, { name: '数据2', state: '0' }, { name: '数据3', state: '0' }],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ personList: [],
|
|
|
+ value: '',
|
|
|
+ dialog: false,
|
|
|
+ form: {},
|
|
|
+ assignFrom: {},
|
|
|
+ activeNames: [],
|
|
|
+ }),
|
|
|
+ created() {
|
|
|
+ let list = [];
|
|
|
+ for (let i = 0; i < 10; i++) {
|
|
|
+ list.push({
|
|
|
+ key: i,
|
|
|
+ label: `人员${i}`,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.$set(this, `personList`, list);
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ handleEdit() {
|
|
|
+ let chData = this.form;
|
|
|
+ const { index, itemIndex, ...form } = chData;
|
|
|
+ console.log(index, form);
|
|
|
+ if (itemIndex !== undefined) {
|
|
|
+ console.log(this.tableData[index].children[itemIndex]);
|
|
|
+ this.$set(this.tableData[index].children, `${itemIndex}`, form);
|
|
|
+ this.$message.success('修改成功');
|
|
|
+ } else {
|
|
|
+ form['state'] = '0';
|
|
|
+ this.tableData[index].children.push(form);
|
|
|
+ this.handleCancel();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ this.form = {};
|
|
|
+ this.dialog = false;
|
|
|
+ },
|
|
|
+ openDialog(index, itemIndex) {
|
|
|
+ let data = JSON.parse(JSON.stringify(this.tableData[index].children[itemIndex]));
|
|
|
+ data[`index`] = index;
|
|
|
+ data[`itemIndex`] = itemIndex;
|
|
|
+ this.$set(this, `form`, data);
|
|
|
+ },
|
|
|
+ changeState(index, itemIndex) {
|
|
|
+ let data = this.tableData[index].children[itemIndex];
|
|
|
+ data.state = data.state === '0' ? '1' : '0';
|
|
|
+ this.$set(this.form, `state`, data.state);
|
|
|
+ this.$set(this.tableData[index].children[itemIndex], `state`, data.state);
|
|
|
+ },
|
|
|
+ handleClose(done) {
|
|
|
+ this.$confirm('确认关闭？')
|
|
|
+ .then(_ => {
|
|
|
+ done();
|
|
|
+ })
|
|
|
+ .catch(_ => {});
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+h1,
|
|
|
+h2,
|
|
|
+h3,
|
|
|
+h4,
|
|
|
+h5,
|
|
|
+h6 {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+.register {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+.btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ margin: 20px 0;
|
|
|
+}
|
|
|
+.search {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ margin: 0 0 20px 0;
|
|
|
+}
|
|
|
+.searchSel .el-select {
|
|
|
+ border-radius: 0;
|
|
|
+}
|
|
|
+/deep/.searchInp .el-input__inner {
|
|
|
+ border-radius: 0;
|
|
|
+}
|
|
|
+.searchBtn .el-button {
|
|
|
+ border-radius: 0;
|
|
|
+}
|
|
|
+.paging {
|
|
|
+ text-align: right;
|
|
|
+ margin: 10px 0;
|
|
|
+}
|
|
|
+.sizeA {
|
|
|
+ padding: 30px;
|
|
|
+}
|
|
|
+</style>
|
