williamet/jiace-admin
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

card上边的边距及标题文字颜色

Browse Source
This commit is contained in:
熊丽君
2021-07-16 15:32:14 +08:00
parent d261ad6408
commit 0d9c268cdf
3 changed files with 414 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
src/views/front/unscramble/index.vue
View File

@ -1,5 +1,291 @@
<template>
<div>
解读
<div class="app-container">
<el-card shadow="never">
<div>
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<div style="float:right">
<el-button type="primary" @click="handleSearchList" size="small">
查询
</el-button>
</div>
</div>
<div style="margin-top: 15px">
<el-form
size="small"
:model="queryParams"
ref="queryForm"
:inline="true"
@submit.native.prevent
>
<el-form-item label="政策标题">
<el-input v-model="queryParams.title" placeholder="请输入" />
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<el-button class="btn-add" @click="handleAdd" size="mini">
添加分类
</el-button>
</el-card>
<el-table style="width: 100%" class="table-container" :data="categoryList">
<el-table-column
label="序号"
align="center"
type="index"
></el-table-column>
<el-table-column
label="标签分类"
prop="name"
align="center"
></el-table-column>
<el-table-column label="标签" align="center">
<template slot-scope="scope">
<el-button
plain
:disabled="scope.row.name == '类型' ? true : false"
size="mini"
@click="handleAddTag(scope.row.id)"
>添加标签</el-button
>
<el-button plain size="mini" @click="handleLook(scope.row.id)"
>查看标签</el-button
>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
@click="editDialog(scope.row)"
type="text"
size="small"
:disabled="scope.row.name == '类型' ? true : false"
>编辑</el-button
>
<el-button
@click="handleDelete(scope.row.id)"
:disabled="scope.row.name == '类型' ? true : false"
type="text"
size="small"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 添加修改 -->
<el-dialog :title="str" :visible.sync="addDialog" width="500px">
<el-form :model="form" ref="form" :rules="rules" @submit.native.prevent>
<el-form-item label="名称" prop="name" label-width="80px">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addDialog = false">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
<!-- 查看可删除 -->
<el-dialog title="查看标签" :visible.sync="lookDialog" width="300px">
<div v-for="(tag, index) in tagList" :key="tag.id">
<el-input
style="margin-top:10px;"
v-if="editable[index]"
v-model="tag.name"
:ref="'editableInput' + index"
size="small"
placeholder="请输入标签信息"
@keyup.enter.native="handleEditableInputConfirm(tag, index)"
@change="handleEditableInputConfirm(tag, index)"
@blur="handleEditableInputBlur(tag, index)"
show-word-limit
></el-input>
<div v-else>
<span style="margin-right:10px">{{ index + 1 }}</span>
<el-tag
style="margin-top:10px;"
@click="showEditTagInput(index)"
closable
@close="handleClose(tag.id, index)"
>{{ tag.name }}</el-tag
>
</div>
</div>
<!-- <el-tag
v-for="(tag,index) in tagList"
:key="tag.id"
closable
@click="showEditTagInput(index)"
@close="closeTag(tag, index)"
>
{{tag.name}}
</el-tag> -->
<!-- <div slot="footer" class="dialog-footer">
<el-button @click="lookDialog = false">取 消</el-button>
<el-button type="primary" @click="handleTag">确 定</el-button>
</div> -->
</el-dialog>
</div>
</template>
<script>
import {
getCategory,
addCategory,
addLabel,
getLabel,
update,
del
} from '@/api/policy/tag';
export default {
data() {
return {
queryParams: {
pageNum: 1,
pageSize: 100
},
// total:0,
categoryList: [],
form: {
name: ''
},
addDialog: false,
lookDialog: false,
tagList: [],
// 当前行
rowId: null,
// 弹出层标题
str: '',
// 表单校验
rules: {
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
},
editable: []
};
},
methods: {
getList() {
getCategory(this.queryParams).then(({ data }) => {
this.categoryList = data.list;
// this.total = data.total
});
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.addDialog = true;
this.str = '添加标签分类';
},
handleAddTag(id) {
this.handleAdd();
this.str = '添加标签';
this.rowId = id;
},
/** 表单重置 */
reset() {
this.form = {
name: ''
};
this.resetForm('form');
},
/** 提交表单 */
submitForm() {
this.$refs['form'].validate(valid => {
if (valid) {
if (this.str === '添加标签分类') {
addCategory(this.form).then(({ message }) => {
this.msgSuccess(message);
this.addDialog = false;
this.getList();
});
} else if (this.str === '添加标签') {
addLabel(Object.assign({}, { id: this.rowId }, this.form)).then(
({ message }) => {
this.msgSuccess(message);
this.addDialog = false;
this.getList();
}
);
} else {
update(this.form).then(({ message }) => {
this.msgSuccess(message);
this.addDialog = false;
this.getList();
});
// addLabel(Object.assign({},{id:this.rowId},this.form)).then(({message}) => {
// this.msgSuccess(message);
// this.addDialog = false;
// this.getList();
// });
}
}
});
},
/** 查看标签 */
handleLook(id) {
this.lookDialog = true;
getLabel(Object.assign({}, { id }, this.queryParams)).then(({ data }) => {
this.tagList = data.list;
});
},
// 编辑 input发生改变
handleEditableInputConfirm(item, index) {
if (item.name) {
// 把当前修改的发送
update(item).then(res => {
this.$set(this.editable, index, false);
});
} else {
this.$message({ message: '请输入标签信息', type: 'info' });
}
},
//编辑 input失去焦点
handleEditableInputBlur(item, index) {
this.handleEditableInputConfirm(item, index);
},
// 编辑 input显示
showEditTagInput(index) {
this.$set(this.editable, index, true);
this.$nextTick(_ => {
let editableInput = 'editableInput' + index;
this.$refs[editableInput][0].$refs.input.focus();
});
},
handleClose(id, i) {
del({ id }).then(res => {
this.tagList.splice(i, 1);
});
// this.tagList.splice(this.tagList.indexOf(id), 1);
},
editDialog(row) {
this.form = Object.assign({}, row);
this.addDialog = true;
this.str = '修改标签分类';
},
/** 删除按钮操作 */
handleDelete(id) {
this.$confirm('确认删除该分类?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(function() {
return del({ id });
})
.then(() => {
this.getList();
this.msgSuccess('删除成功');
});
}
},
created() {
this.getList();
}
};
</script>
<style lang="scss" scoped>
// .el-tag + .el-tag {
// margin-left: 10px;
// }
</style>

11
src/views/policy/library/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="app-container">
<el-card class="operate-container" shadow="never">
<el-card shadow="never">
<div>
<i class="el-icon-search"></i>
<span>筛选搜索</span>
@ -22,7 +22,6 @@
v-model="queryParams.title"
placeholder="请输入"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="产出">
@ -102,7 +101,13 @@
}}
</template>
</el-table-column>
<el-table-column label="政策标题" align="center" prop="title" />
<el-table-column label="政策标题" align="center" prop="title">
<template slot-scope="scope">
<el-link type="primary" :underline="false">{{
scope.row.title
}}</el-link>
</template>
</el-table-column>
<el-table-column label="级别" align="center" prop="level" width="150">
<template slot-scope="scope">
<span v-if="scope.row.level == 1">省级</span>

213
src/views/policy/tag/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="app-container">
<el-card class="operate-container" shadow="never">
<el-card shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<el-button class="btn-add" @click="handleAdd" size="mini">
@ -8,28 +8,42 @@
</el-button>
</el-card>
<el-table style="width: 100%" class="table-container" :data="categoryList">
<el-table-column label="序号" align="center" type="index"></el-table-column>
<el-table-column
label="序号"
align="center"
type="index"
></el-table-column>
<el-table-column
label="标签分类"
prop="name"
align="center"
></el-table-column>
<el-table-column
label="标签"
align="center"
>
<template slot-scope="scope">
<el-button plain :disabled="scope.row.name=='类型'?true:false" size="mini" @click="handleAddTag(scope.row.id)">添加标签</el-button>
<el-button plain size="mini" @click="handleLook(scope.row.id)">查看标签</el-button>
</template>
<el-table-column label="标签" align="center">
<template slot-scope="scope">
<el-button
plain
:disabled="scope.row.name == '类型' ? true : false"
size="mini"
@click="handleAddTag(scope.row.id)"
>添加标签</el-button
>
<el-button plain size="mini" @click="handleLook(scope.row.id)"
>查看标签</el-button
>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button @click="editDialog(scope.row)" type="text" size="small" :disabled="scope.row.name=='类型'?true:false"
<el-button
@click="editDialog(scope.row)"
type="text"
size="small"
:disabled="scope.row.name == '类型' ? true : false"
>编辑</el-button
>
<el-button
@click="handleDelete(scope.row.id)" :disabled="scope.row.name=='类型'?true:false"
@click="handleDelete(scope.row.id)"
:disabled="scope.row.name == '类型' ? true : false"
type="text"
size="small"
>删除</el-button
@ -52,20 +66,20 @@
<!-- 查看可删除 -->
<el-dialog title="查看标签" :visible.sync="lookDialog" width="300px">
<div v-for="(tag, index) in tagList" :key="tag.id">
<el-input
style="margin-top:10px;"
v-if="editable[index]"
v-model="tag.name"
:ref="'editableInput' + index"
size="small"
placeholder="请输入标签信息"
@keyup.enter.native="handleEditableInputConfirm(tag, index)"
@change="handleEditableInputConfirm(tag, index)"
@blur="handleEditableInputBlur(tag, index)"
show-word-limit
></el-input>
<div v-else>
<span style="margin-right:10px">{{index+1}}</span>
<el-input
style="margin-top:10px;"
v-if="editable[index]"
v-model="tag.name"
:ref="'editableInput' + index"
size="small"
placeholder="请输入标签信息"
@keyup.enter.native="handleEditableInputConfirm(tag, index)"
@change="handleEditableInputConfirm(tag, index)"
@blur="handleEditableInputBlur(tag, index)"
show-word-limit
></el-input>
<div v-else>
<span style="margin-right:10px">{{ index + 1 }}</span>
<el-tag
style="margin-top:10px;"
@click="showEditTagInput(index)"
@ -73,8 +87,8 @@
@close="handleClose(tag.id, index)"
>{{ tag.name }}</el-tag
>
</div>
</div>
</div>
<!-- <el-tag
v-for="(tag,index) in tagList"
:key="tag.id"
@ -92,7 +106,14 @@
</div>
</template>
<script>
import { getCategory,addCategory,addLabel,getLabel,update,del } from '@/api/policy/tag';
import {
getCategory,
addCategory,
addLabel,
getLabel,
update,
del
} from '@/api/policy/tag';
export default {
data() {
return {
@ -101,30 +122,28 @@ export default {
pageSize: 100
},
// total:0,
categoryList:[],
categoryList: [],
form: {
name: '',
},
name: ''
},
addDialog: false,
lookDialog:false,
tagList:[],
lookDialog: false,
tagList: [],
// 当前行
rowId:null,
rowId: null,
// 弹出层标题
str: "",
str: '',
// 表单校验
rules: {
name: [
{ required: true, message: "名称不能为空", trigger: "blur" }
]
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
},
editable: [],
editable: []
};
},
methods:{
getList(){
getCategory(this.queryParams).then(({data}) => {
this.categoryList = data.list
methods: {
getList() {
getCategory(this.queryParams).then(({ data }) => {
this.categoryList = data.list;
// this.total = data.total
});
},
@ -132,42 +151,44 @@ export default {
handleAdd() {
this.reset();
this.addDialog = true;
this.str = "添加标签分类";
this.str = '添加标签分类';
},
handleAddTag(id){
this.handleAdd()
this.str = "添加标签";
this.rowId = id
handleAddTag(id) {
this.handleAdd();
this.str = '添加标签';
this.rowId = id;
},
/** 表单重置 */
reset() {
this.form = {
name: '',
name: ''
};
this.resetForm("form");
this.resetForm('form');
},
/** 提交表单 */
submitForm(){
this.$refs["form"].validate(valid => {
submitForm() {
this.$refs['form'].validate(valid => {
if (valid) {
if (this.str === '添加标签分类') {
addCategory(this.form).then(({message}) => {
addCategory(this.form).then(({ message }) => {
this.msgSuccess(message);
this.addDialog = false;
this.getList();
});
} else if((this.str === '添加标签')) {
addLabel(Object.assign({},{id:this.rowId},this.form)).then(({message}) => {
} else if (this.str === '添加标签') {
addLabel(Object.assign({}, { id: this.rowId }, this.form)).then(
({ message }) => {
this.msgSuccess(message);
this.addDialog = false;
this.getList();
}
);
} else {
update(this.form).then(({ message }) => {
this.msgSuccess(message);
this.addDialog = false;
this.getList();
});
}else{
update(this.form).then(({message})=>{
this.msgSuccess(message);
this.addDialog = false;
this.getList()
})
// addLabel(Object.assign({},{id:this.rowId},this.form)).then(({message}) => {
// this.msgSuccess(message);
// this.addDialog = false;
@ -178,67 +199,69 @@ export default {
});
},
/** 查看标签 */
handleLook(id){
this.lookDialog = true
getLabel(Object.assign({},{id},this.queryParams)).then(({data})=>{
this.tagList = data.list
})
handleLook(id) {
this.lookDialog = true;
getLabel(Object.assign({}, { id }, this.queryParams)).then(({ data }) => {
this.tagList = data.list;
});
},
// 编辑 input发生改变
handleEditableInputConfirm(item, index){
handleEditableInputConfirm(item, index) {
if (item.name) {
// 把当前修改的发送
update(item).then(res=>{
update(item).then(res => {
this.$set(this.editable, index, false);
})
});
} else {
this.$message({ message: "请输入标签信息", type: "info" });
this.$message({ message: '请输入标签信息', type: 'info' });
}
},
//编辑 input失去焦点
handleEditableInputBlur(item, index){
this.handleEditableInputConfirm(item, index)
handleEditableInputBlur(item, index) {
this.handleEditableInputConfirm(item, index);
},
// 编辑 input显示
showEditTagInput(index){
showEditTagInput(index) {
this.$set(this.editable, index, true);
this.$nextTick((_) => {
let editableInput = "editableInput" + index;
this.$nextTick(_ => {
let editableInput = 'editableInput' + index;
this.$refs[editableInput][0].$refs.input.focus();
});
},
handleClose(id,i){
del({id}).then(res=>{
this.tagList.splice(i,1);
})
handleClose(id, i) {
del({ id }).then(res => {
this.tagList.splice(i, 1);
});
// this.tagList.splice(this.tagList.indexOf(id), 1);
},
editDialog(row){
editDialog(row) {
this.form = Object.assign({}, row);
this.addDialog = true;
this.str = "修改标签分类";
this.str = '修改标签分类';
},
/** 删除按钮操作 */
handleDelete(id) {
this.$confirm('确认删除该分类?', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return del({id});
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
this.$confirm('确认删除该分类?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(function() {
return del({ id });
})
},
.then(() => {
this.getList();
this.msgSuccess('删除成功');
});
}
},
created() {
this.getList()
this.getList();
}
};
</script>
<style lang="scss" scoped>
// .el-tag + .el-tag {
// margin-left: 10px;
// }
// .el-tag + .el-tag {
// margin-left: 10px;
// }
</style>