xcx

src/pages/system/caseManager/tagManager/add.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="subPage">
+    <form class="mainForm">
+      <ul>
+        <li class="flex-h">
+          <span>标签名称：</span>
+          <div class="flex-item">
+            <div style="width:50%">
+              <el-input
+                placeholder="请输入名称"
+                v-model="postData.TagName"
+                clearable>
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>选择案场：</span>
+          <div class="flex-item">
+            <div>
+              <el-checkbox-group v-model="checkedList" @change="handleCheckedCitiesChange">
+                <el-checkbox v-for="(item,index) in cases" :label="item.CaseId" :key="index">{{item.CaseName}}</el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </div>
+        </li>
+        <li style="text-align:center">
+          <el-button type="primary" size="mini" @click="submit">保存</el-button>
+          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
+        </li>
+      </ul>
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: '',
+  data () {
+    return {
+      postData: {
+        TagId: '', // 桌位id
+        TagName: '', // 区域id
+        caseids: '', // 案场id
+        OrgId: '', // 机构id
+      },
+      checkedList: [],
+    }
+  },
+  created () {},
+  computed: {
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default,
+      OrgId: x => x.app.user.OrgId,
+    }),
+    CaseId: {
+      get () {
+        return this.postData.CaseId || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.CaseId = val
+      }
+    }
+  },
+  components: {},
+  methods: {
+    handleCheckedCitiesChange (val) {
+      this.postData.caseids = val.join(',')
+    },
+    submit () { // 提交数据
+      if (this.postData.TagName === '') {
+        this.$message({
+          type: 'error',
+          message: '标签名称不能为空'
+        })
+        return false
+      }
+      if (this.postData.caseids === '') {
+        this.$message({
+          type: 'error',
+          message: '案场不能为空'
+        })
+        return false
+      }
+      this.postData.OrgId = this.OrgId
+      this.$ajax(this.$api.caseManager.addCaseTag.url, {
+        method: this.$api.caseManager.addCaseTag.method,
+        data: { ...this.postData }
+      }).then(res => {
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        })
+        this.$router.push({ name: 'tagManager' })
+      })
+    },
+    cancel () {
+      this.$router.push({ name: 'tagManager' })
+    }
+  },
+  mounted () { }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+</style>

src/pages/system/caseManager/tagManager/edit.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="subPage">
+    <form class="mainForm">
+      <ul>
+        <li class="flex-h">
+          <span>标签名称：</span>
+          <div class="flex-item">
+            <div style="width:50%">
+              <el-input
+                placeholder="请输入名称"
+                v-model="postData.TagName"
+                clearable>
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>选择案场：</span>
+          <div class="flex-item">
+            <div>
+              <el-checkbox-group v-model="checkedList" @change="handleCheckedCitiesChange">
+                <el-checkbox v-for="(item,index) in cases" :label="item.CaseId" :key="index">{{item.CaseName}}</el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </div>
+        </li>
+        <li style="text-align:center">
+          <el-button type="primary" size="mini" @click="submit">保存</el-button>
+          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
+        </li>
+      </ul>
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: '',
+  data () {
+    return {
+      postData: {
+        TagId: '', // 桌位id
+        TagName: '', // 区域id
+        caseids: '', // 案场id
+        OrgId: '', // 机构id
+      },
+      checkedList: [],
+    }
+  },
+  created () {
+    this.getTagInfo()
+  },
+  computed: {
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default,
+      OrgId: x => x.app.user.OrgId,
+    }),
+    CaseId: {
+      get () {
+        return this.postData.CaseId || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.CaseId = val
+      }
+    }
+  },
+  components: {},
+  methods: {
+    getTagInfo () {
+      this.$ajax(this.$api.caseManager.getTagInfo.url, {
+        method: this.$api.caseManager.getTagInfo.method,
+        urlData: { id: this.$route.query.id }
+      }).then(res => {
+        for (var n = 0; n < res.TagCases.length; n++) {
+          this.checkedList.push(res.TagCases[n].CaseId)
+        }
+        this.postData = res
+      })
+    },
+    handleCheckedCitiesChange (val) {
+      this.postData.caseids = val.join(',')
+    },
+    submit () { // 提交数据
+      if (this.postData.TagName === '') {
+        this.$message({
+          type: 'error',
+          message: '标签名称不能为空'
+        })
+        return false
+      }
+      this.postData.caseids = this.checkedList.join(',')
+      if (this.postData.caseids === '') {
+        this.$message({
+          type: 'error',
+          message: '案场不能为空'
+        })
+        return false
+      }
+      this.postData.OrgId = this.OrgId
+      this.$ajax(this.$api.caseManager.addCaseTag.url, {
+        method: this.$api.caseManager.addCaseTag.method,
+        data: { ...this.postData }
+      }).then(res => {
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        })
+        this.$router.push({ name: 'tagManager' })
+      })
+    },
+    cancel () {
+      this.$router.push({ name: 'tagManager' })
+    }
+  },
+  mounted () { }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+</style>

src/pages/system/caseManager/tagManager/index.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="subPage">
+    <div class="system-table-search">
+      <div class="flex-h">
+        <div class="flex-item flex-h">
+          <el-button size="mini" type="success" @click='addCaseTag'>新增标签</el-button>
+        </div>
+        <ul>
+          <li>
+            <span>选择案场：</span>
+            <el-select v-model="CaseId" placeholder="请选择">
+              <el-option
+                v-for="item in cases"
+                :key="item.CaseId"
+                :label="item.CaseName"
+                :value="item.CaseId">
+              </el-option>
+            </el-select>
+          </li>
+        </ul>
+        <el-button
+          size="mini"
+          type="primary" @click="search">搜索</el-button>
+      </div>
+      <div class="moreFilter"></div>
+    </div>
+    <div class="system-table-box">
+      <el-table
+        :data="currentList"
+        stripe
+        style="width: 100%">
+        <el-table-column
+          prop="TagName"
+          label="标签名称">
+        </el-table-column>
+        <el-table-column
+          prop="CaseNames"
+          label="案场">
+          <template slot-scope="scope">
+            <span v-for="(item,index) in scope.row.CaseNames" :key="index">{{item}}<br></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="warning"
+              @click="editItem(scope.$index, scope.row)">编辑</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="deleteItem(scope.$index, scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      @current-change="handleCurrentChange"
+      :current-page.sync="postData.page"
+      :page-size="postData.pagesize"
+      layout="prev, pager, next, jumper"
+      :total="total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: '',
+  data () {
+    return {
+      total: 0,
+      postData: { // 表格搜索条件
+        caseid: '', // 案场id
+        page: 1, // 当前页码
+        pagesize: 10, // 请求数据量
+      },
+      currentList: [],
+      caseAreaList: [],
+    }
+  },
+  computed: {
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default
+    }),
+    CaseId: {
+      get () {
+        return this.postData.caseid || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.caseid = val
+      }
+    }
+  },
+  created () {
+    this.getList()
+  },
+  methods: {
+    search () { // 搜索
+      this.postData.page = 1
+      this.currentList = []
+      this.getList()
+    },
+    getList () { // 获取列表
+      this.$ajax(this.$api.caseManager.getCaseTagList.url, {
+        method: this.$api.caseManager.getCaseTagList.method,
+        queryData: { ...this.postData, caseid: this.CaseId }
+      }).then(res => {
+        for (var n = 0; n < res.list.length; n++) {
+          res.list[n].CaseNames = res.list[n].CaseNames.split(',')
+        }
+        this.currentList = res.list
+        this.postData.page = res.page
+        this.total = res.pagenum
+      })
+    },
+    handleCurrentChange (val) { // 跳转到分页
+      this.getList()
+    },
+    editItem (index, row) { // 编辑
+      this.$router.push({ name: 'editTag', query: { id: row.TagId } })
+    },
+    deleteItem (index, row) { // 删除
+      this.$confirm('确认删除此标签?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$ajax(this.$api.caseManager.deleteCaseTag.url, {
+          method: this.$api.caseManager.deleteCaseTag.method,
+          urlData: { id: row.TagId }
+        }).then(res => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          })
+          this.getList()
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    addCaseTag () {
+      this.$router.push({ name: 'addTag' })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+</style>

src/pages/system/page.js

@@ -21,6 +21,9 @@ import editCaseArea from './caseManager/caseAreaManager/edit' // 编辑案场区
 import caseTableManager from './caseManager/caseTableManager/index' // 案场桌位管理
 import addCaseTable from './caseManager/caseTableManager/add' // 新增案场桌位
 import editCaseTable from './caseManager/caseTableManager/edit' // 编辑案场桌位
+import tagManager from './caseManager/tagManager/index' // 标签管理
+import addTag from './caseManager/tagManager/add' // 添加标签
+import editTag from './caseManager/tagManager/edit' // 编辑标签
 
 import goodsManager from './goodsManager/index' // 商品管理
 import goodsTypeManager from './goodsManager/goodsTypeManager/index' // 商品类型管理
@@ -160,6 +163,21 @@ export default {
             component: editCaseTable,
             children: []
           }]
+        }, { // 标签管理
+          path: 'tagManager',
+          name: 'tagManager',
+          component: tagManager,
+          children: [{ // 添加标签
+            path: 'addTag',
+            name: 'addTag',
+            component: addTag,
+            children: []
+          }, { // 编辑标签
+            path: 'editTag',
+            name: 'editTag',
+            component: editTag,
+            children: []
+          }]
         }],
       }, { // 商品管理
         path: 'goodsManager',

src/style/main.css

@@ -316,7 +316,26 @@ select:focus {
   display: block;
 }
 
+.el-checkbox-group{
+  font-size: 0;
+}
+
+.el-checkbox{
+  display: inline-block;
+}
+
+.el-checkbox>*{
+  line-height: 40px;
+}
 
+.el-checkbox+.el-checkbox{
+  margin: 0;
+  margin-right: 20px;
+}
+
+.el-checkbox{
+  margin-right: 20px;
+}
 
 
 

src/util/api.js

@@ -87,6 +87,22 @@ const $api = {
       method: 'delete',
       url: `${baseUrl}/common/case/table/:id`
     },
+    getCaseTagList: { // 获取案场标签列表
+      method: 'get',
+      url: `${baseUrl}/common/case/tag`
+    },
+    addCaseTag: { // 新增案场标签
+      method: 'post',
+      url: `${baseUrl}/common/case/tag`
+    },
+    getTagInfo: { // 获取案场标签信息
+      method: 'get',
+      url: `${baseUrl}/common/case/tag/:id`
+    },
+    deleteCaseTag: { // 删除案场标签
+      method: 'delete',
+      url: `${baseUrl}/common/case/tag/:id`
+    },
   },
   goodsManager: {
     getGoodsSpecList: { // 商品规格列表