|
@@ -0,0 +1,290 @@
|
|
|
|
+<template>
|
|
|
|
+ <div id="label-wrap" class="label-wrap">
|
|
|
|
+ <el-card>
|
|
|
|
+ <el-input
|
|
|
|
+ v-model="queryForm.name"
|
|
|
|
+ clearable
|
|
|
|
+ size="small"
|
|
|
|
+ class="label-search-input"
|
|
|
|
+ placeholder="标签名称"
|
|
|
|
+ />
|
|
|
|
+ <el-button size="small" style="margin-left: 10px" type="primary" icon="el-icon-search" :loading="searchBtnLoading"
|
|
|
|
+ @click="search">
|
|
|
|
+ 搜索
|
|
|
|
+ </el-button>
|
|
|
|
+ <el-button
|
|
|
|
+ v-if="checkPermission(LABEL_PERMS.add)"
|
|
|
|
+ type="primary"
|
|
|
|
+ size="small"
|
|
|
|
+ @click="addLabel()"
|
|
|
|
+ >
|
|
|
|
+ 新增
|
|
|
|
+ </el-button>
|
|
|
|
+ </el-card>
|
|
|
|
+ <el-card style="margin-top: 10px;">
|
|
|
|
+ <el-table
|
|
|
|
+ v-loading="searchBtnLoading"
|
|
|
|
+ size="small"
|
|
|
|
+ :data="labelPage"
|
|
|
|
+ border
|
|
|
|
+ fit
|
|
|
|
+ highlight-current-row
|
|
|
|
+ >
|
|
|
|
+ <el-table-column label="序号" align="center" min-width="15">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ {{ scope.$index + 1 }}
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="标签名称" prop="name" align="center" min-width="100"/>
|
|
|
|
+ <el-table-column label="可选项" prop="labelItemNames" align="center" min-width="100">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <el-select v-model="scope.row.labelItem" size="small">
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="(item,index) in scope.row.labelItemNames"
|
|
|
|
+ :key="index"
|
|
|
|
+ :label="item"
|
|
|
|
+ :value="item"
|
|
|
|
+ />
|
|
|
|
+ </el-select>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="添加时间" prop="createTime" align="center" min-width="100"/>
|
|
|
|
+ <el-table-column label="添加人" prop="createName" align="center" min-width="100"/>
|
|
|
|
+ <el-table-column label="操作" align="center" min-width="100">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <el-button
|
|
|
|
+ v-if="checkPermission(LABEL_PERMS.edit)"
|
|
|
|
+ size="small"
|
|
|
|
+ type="text"
|
|
|
|
+ @click="showEdit(scope.row)"
|
|
|
|
+ >
|
|
|
|
+ 编辑
|
|
|
|
+ </el-button>
|
|
|
|
+ <el-button
|
|
|
|
+ v-if="checkPermission(LABEL_PERMS.delete)"
|
|
|
|
+ size="small"
|
|
|
|
+ type="text"
|
|
|
|
+ @click="remove(scope.row.id)"
|
|
|
|
+ >
|
|
|
|
+ 删除
|
|
|
|
+ </el-button>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ <el-pagination
|
|
|
|
+ class="pagination"
|
|
|
|
+ background
|
|
|
|
+ :current-page.sync="queryForm.pageNum"
|
|
|
|
+ layout="total, prev, pager, next"
|
|
|
|
+ :total="total"
|
|
|
|
+ @current-change="changePage"
|
|
|
|
+ />
|
|
|
|
+ </el-card>
|
|
|
|
+
|
|
|
|
+ <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="dataAddDlg.addVisible" width="30%">
|
|
|
|
+ <el-form ref="userForm" :model="label" :rules="rules" label-width="120px" class="demo-ruleForm">
|
|
|
|
+ <el-form-item label="标签名称" prop="name">
|
|
|
|
+ <el-input v-model="label.name" maxlength="45"/>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <div style="margin-bottom: 5px;">
|
|
|
|
+ <span style="color: red">*</span>
|
|
|
|
+ <span style="color: #409EFF; margin-left: 5px; margin-bottom: 5px; cursor: pointer;"
|
|
|
|
+ @click="addRow()">添加一行</span>
|
|
|
|
+ </div>
|
|
|
|
+ <el-table :data="labelItemNames" border fit highlight-current-row>
|
|
|
|
+ <el-table-column label="选项名称" align="center" min-width="100">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <el-input v-model="scope.row.name" maxlength="10"/>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="操作" align="center" min-width="100">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <el-button
|
|
|
|
+ type="text"
|
|
|
|
+ size="small"
|
|
|
|
+ @click.native.prevent="deleteRow(scope.$index, labelItemNames)"
|
|
|
|
+ >
|
|
|
|
+ 移除
|
|
|
|
+ </el-button>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ </el-form>
|
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
|
+ <el-button @click="dataAddDlg.addVisible = false">取消</el-button>
|
|
|
|
+ <el-button type="primary" :loading="dataAddDlg.saveBtnLoading" @click="saveLabel">提交</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import {LABEL_PERMS} from '@/permission/permission-label'
|
|
|
|
+import permissionMixin from '../../mixins/permission-mixin'
|
|
|
|
+import {getPage, remove, add, edit} from '@/api/label'
|
|
|
|
+
|
|
|
|
+export default {
|
|
|
|
+ name: 'UserManagement',
|
|
|
|
+ components: {},
|
|
|
|
+ mixins: [permissionMixin],
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ LABEL_PERMS,
|
|
|
|
+ title: null,
|
|
|
|
+ queryForm: {
|
|
|
|
+ name: null,
|
|
|
|
+ pageNum: 1
|
|
|
|
+ },
|
|
|
|
+ total: null,
|
|
|
|
+ searchBtnLoading: false,
|
|
|
|
+ dataAddDlg: {
|
|
|
|
+ addVisible: false,
|
|
|
|
+ saveBtnLoading: false
|
|
|
|
+ },
|
|
|
|
+ labelPage: [{
|
|
|
|
+ name: null,
|
|
|
|
+ labelItemNames: null,
|
|
|
|
+ labelItem: null,
|
|
|
|
+ createTime: null,
|
|
|
|
+ createName: null
|
|
|
|
+ }],
|
|
|
|
+ label: {
|
|
|
|
+ id: null,
|
|
|
|
+ name: '',
|
|
|
|
+ labelItemNames: ['']
|
|
|
|
+ },
|
|
|
|
+ labelItemNames: [{
|
|
|
|
+ name: ''
|
|
|
|
+ }],
|
|
|
|
+ rules: {
|
|
|
|
+ name: [
|
|
|
|
+ {required: true, message: '请输入标签名称!', trigger: 'blur'}
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ computed: {},
|
|
|
|
+ mounted() {
|
|
|
|
+ this.search()
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ search(pageNum) {
|
|
|
|
+ if (pageNum && pageNum > 0) {
|
|
|
|
+ this.queryForm.pageNum = pageNum
|
|
|
|
+ } else {
|
|
|
|
+ this.queryForm.pageNum = 1
|
|
|
|
+ }
|
|
|
|
+ this.searchBtnLoading = true
|
|
|
|
+ getPage(this.queryForm).then(res => {
|
|
|
|
+ console.log(res)
|
|
|
|
+ this.labelPage = res.result.result
|
|
|
|
+ this.labelPage.forEach(item => {
|
|
|
|
+ item.labelItem = item.labelItemNames[0]
|
|
|
|
+ })
|
|
|
|
+ this.total = Number(res.result.total)
|
|
|
|
+ this.searchBtnLoading = false
|
|
|
|
+ }, () => {
|
|
|
|
+ this.searchBtnLoading = false
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ changePage(page) {
|
|
|
|
+ this.search(page)
|
|
|
|
+ },
|
|
|
|
+ addLabel() {
|
|
|
|
+ this.title = '添加标签'
|
|
|
|
+ this.label = {
|
|
|
|
+ id: null,
|
|
|
|
+ name: '',
|
|
|
|
+ labelItemNames: ['']
|
|
|
|
+ }
|
|
|
|
+ this.labelItemNames = [{name: ''}]
|
|
|
|
+ this.dataAddDlg.addVisible = true
|
|
|
|
+ },
|
|
|
|
+ addRow() {
|
|
|
|
+ const obj = {name: ''}
|
|
|
|
+ if (this.labelItemNames.length < 8) {
|
|
|
|
+ this.labelItemNames.push(obj)
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.error('最多只能添加10个选项!')
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ saveLabel() {
|
|
|
|
+ if (this.label.name === null || this.label.name === '' || this.label.name === undefined) {
|
|
|
|
+ this.$message.error('请输入标签名称!')
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ this.label.labelItemNames = []
|
|
|
|
+ const reg = /[^\w-\_^\u4E00-\u9FA5]/
|
|
|
|
+ for (let i = 0; i < this.labelItemNames.length; i++) {
|
|
|
|
+ if (this.labelItemNames[i].name === null || this.labelItemNames[i].name === '' || this.labelItemNames[i].name === undefined) {
|
|
|
|
+ this.$message.error('请输入选项名称!')
|
|
|
|
+ return
|
|
|
|
+ } else if (reg.test(this.labelItemNames[i].name)) {
|
|
|
|
+ this.$message.error('可选项只能输入中文,字母,数字,下划线,中划线!')
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ this.label.labelItemNames.push(this.labelItemNames[i].name)
|
|
|
|
+ }
|
|
|
|
+ this.dataAddDlg.saveBtnLoading = true
|
|
|
|
+ if (this.label.id !== null) {
|
|
|
|
+ edit(this.label).then(res => {
|
|
|
|
+ this.search()
|
|
|
|
+ this.dataAddDlg.saveBtnLoading = false
|
|
|
|
+ this.dataAddDlg.addVisible = false
|
|
|
|
+ this.$message.success('修改成功!')
|
|
|
|
+ }, () => {
|
|
|
|
+ this.dataAddDlg.saveBtnLoading = false
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ add(this.label).then(res => {
|
|
|
|
+ this.search()
|
|
|
|
+ this.dataAddDlg.saveBtnLoading = false
|
|
|
|
+ this.dataAddDlg.addVisible = false
|
|
|
|
+ this.$message.success('添加成功!')
|
|
|
|
+ }, () => {
|
|
|
|
+ this.dataAddDlg.saveBtnLoading = false
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ deleteRow(index, rows, row) {
|
|
|
|
+ if (this.labelItemNames.length === 1) {
|
|
|
|
+ this.$message.error('请最少保留一条明细!')
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ rows.splice(index, 1)
|
|
|
|
+ },
|
|
|
|
+ remove(id) {
|
|
|
|
+ this.$confirm('确认删除标签?', '提示', {type: 'warning'}).then(() => {
|
|
|
|
+ remove(id).then(res => {
|
|
|
|
+ this.search()
|
|
|
|
+ this.$message.success('移除成功!')
|
|
|
|
+ }, () => {
|
|
|
|
+ })
|
|
|
|
+ }, () => {
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ showEdit(row) {
|
|
|
|
+ this.title = '编辑标签'
|
|
|
|
+ this.label.id = row.id
|
|
|
|
+ this.label.name = row.name
|
|
|
|
+ this.labelItemNames = []
|
|
|
|
+ row.labelItemNames.forEach(item => {
|
|
|
|
+ const obj = {name: item}
|
|
|
|
+ this.labelItemNames.push(obj)
|
|
|
|
+ })
|
|
|
|
+ this.dataAddDlg.addVisible = true
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+<style lang="scss" scoped="">
|
|
|
|
+.label-wrap {
|
|
|
|
+ .label-search-input {
|
|
|
|
+ width: 200px;
|
|
|
|
+ margin-left: 5px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|
|
|
|
+<style lang="scss">
|
|
|
|
+
|
|
|
|
+</style>
|