内容管理

src/views/backstage/contentMgt/homePage/index.vue

@@ -2,34 +2,62 @@
   <div class="app-container">
     <!--工具栏-->
     <div class="head-container">
-      <el-input v-model="query.name" clearable placeholder="请输入查询名称关键字" style="width:180px;" />
-      <el-date-picker v-model="query.createTime" type="date" placeholder="选择日期" />
-      <el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
-      <el-button size="mini" type="warning" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
+      <el-select v-model="query.area" clearable placeholder="请选择位置" style="width: 150px">
+        <el-option v-for="item in dict.product_type" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+      <el-input v-model="query.username" clearable placeholder="请输入操作名称" style="width:280px;" />
+      <el-select v-model="query.status" clearable placeholder="请选择状态" style="width: 120px">
+        <el-option v-for="item in dict.consult_status" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+      <date-range-picker v-model="query.createTime" start-placeholder="维护开始日期" style="width: 280px" />
+      <el-button type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
+      <el-button type="warning" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
     </div>
     <div class="toolbar">
-      <el-button type="primary" icon="el-icon-plus">新增</el-button>
+      <div>
+        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="toAdd">添加</el-button>
+      </div>
+      <div style="text-align: right">
+        <el-button type="success" icon="el-icon-finished" :disabled="!multipleSelection.length" @click="batchOperate(true)">批量发布</el-button>
+        <el-button type="danger" icon="el-icon-download" :disabled="!multipleSelection.length" @click="batchOperate(false)">批量撤销</el-button>
+      </div>
     </div>
     <!-- 表格 -->
     <div class="content">
-      <el-table id="dataTable" ref="dataTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:auto" @selection-change="handleSelectionChange">
+      <el-table id="dataTable" ref="dataTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:auto;min-height: 70vh" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" />
-        <el-table-column prop="xxx" label="xxx" align="center" />
-        <el-table-column prop="xxx" label="xxx" align="center" />
-        <el-table-column prop="xxx" label="xxx" align="center" />
-        <el-table-column prop="xxx" label="xxx" align="center" />
+        <el-table-column type="index" width="55" label="序号" :index="indexMethod" />
+        <el-table-column prop="area" label="位置" width="200" />
+        <el-table-column prop="xxx" label="操作名称" />
+        <el-table-column label="状态" width="100">
+          <template slot-scope="scope">
+            <div :style="'color:'+textColors[scope.row.status]">{{ dict.label.consult_status[scope.row.status] }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="xxx" label="最后日期" align="center" width="100" />
+        <el-table-column prop="xxx" label="操作" align="right" width="240">
+          <template slot-scope="scope">
+            <el-tooltip content="发布"><el-button round plain type="success" icon="el-icon-finished" @click="toEdit(scope.row)" /></el-tooltip>
+            <el-tooltip content="撤销"><el-button round plain type="danger" icon="el-icon-download" @click="toEdit(scope.row)" /></el-tooltip>
+            <el-tooltip content="编辑"><el-button round plain type="primary" icon="el-icon-edit-outline" @click="toEdit(scope.row)" /></el-tooltip>
+            <el-tooltip content="查看"><el-button round plain icon="el-icon-view" @click="toEdit(scope.row)" /></el-tooltip>
+          </template>
+        </el-table-column>
       </el-table>
       <!--分页组件-->
       <el-pagination :total="total" :current-page="page" :page-size="pageSize" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
     </div>
-
   </div>
 </template>
 <script>
+import DateRangePicker from '@/components/DateRangePicker'
 
 export default {
+  components: { DateRangePicker },
+  dicts: ['consult_status', 'product_type', 'area_province'],
   data() {
     return {
+      textColors: ['#ccc', '#32cd32', '#000', '#ff4949'],
       loading: false,
       page: 1,
       pageSize: 20,
@@ -47,6 +75,9 @@ export default {
     })
   },
   methods: {
+    indexMethod(index) {
+      return 1 + index + this.page * this.pageSize - this.pageSize
+    },
     handleSelectionChange(val) {
       this.multipleSelection = val
     },
@@ -56,13 +87,47 @@ export default {
       param.page = this.page
       param.pageSize = this.pageSize
       param.sort = sort
+      this.tableData = [
+        { username: '张三', area: '火星', status: 1, enabled: false, xxx: '2023-05-09' },
+        { username: '张三', area: '火星', status: 2, enabled: false, xxx: '2023-05-09' },
+        { username: '张三', area: '火星', status: 3, enabled: false, xxx: '2023-05-09' }
+      ]
+      this.total = 2
+    },
+    batchOperate(opt) {
+      if (!this.multipleSelection.length) {
+        return this.$message({
+          message: '未选取数据',
+          type: 'info'
+        })
+      }
+      if (opt) {
+        console.log('启用', this.multipleSelection)
+      } else {
+        console.log('启用', this.multipleSelection)
+      }
+    },
+    changeEnabled(data, val) {
+      this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+
+      }).catch(() => {
+        data.enabled = !data.enabled
+      })
+    },
+    toAdd() {
+
+    },
+    toEdit(item) {
+
     },
-    // 点击搜索
     toSearch() {
       this.page = 1
       this.loadData()
     },
-    // 重置搜索
     clearLimit() {
       this.query = {}
       this.currentTimeFn()
@@ -95,9 +160,12 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.content{
-  margin-top:15px;
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+}
+.content {
+  margin-top: 15px;
   overflow: auto;
 }
-
 </style>

src/views/backstage/guidanceMgt/guidanceTabulate/index.vue

 <template>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="预留" type="success" />
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <el-select v-model="query.area" clearable placeholder="请选择产品分类" style="width: 150px">
+        <el-option v-for="item in dict.product_type" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+      <el-select v-model="query.registeredAddressProvince" clearable placeholder="请选择地区" style="width: 120px">
+        <el-option v-for="item in dict.area_province" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+      <el-input v-model="query.username" clearable placeholder="请输入咨询产品名称" style="width:280px;" />
+      <el-input v-model="query.username" clearable placeholder="请输入产品ID" style="width:150px;" />
+      <el-select v-model="query.status" clearable placeholder="请选择状态" style="width: 120px">
+        <el-option v-for="item in dict.consult_status" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+      <date-range-picker v-model="query.createTime" start-placeholder="咨询开始日期" style="width: 280px" />
+      <date-range-picker v-model="query.createTime" start-placeholder="处理开始日期" style="width: 280px" />
+      <el-button type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
+      <el-button type="warning" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
+    </div>
+    <div class="toolbar">
+      <div />
+      <div style="text-align: right">
+        <el-button type="danger" icon="el-icon-finished" :disabled="!multipleSelection.length" @click="batchOperate(1)">批量处理</el-button>
+      </div>
+    </div>
+    <!-- 表格 -->
+    <div class="content">
+      <el-table id="dataTable" ref="dataTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:auto;min-height: 70vh" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column type="index" width="55" label="序号" :index="indexMethod" />
+        <el-table-column prop="username" label="咨询产品类型" width="180" />
+        <el-table-column prop="area" label="地区" width="100" />
+        <el-table-column prop="xxx" label="咨询产品名称" />
+        <el-table-column prop="username" label="产品ID" width="140" />
+        <el-table-column label="状态" width="100">
+          <template slot-scope="scope">
+            <div :style="'color:'+textColors[scope.row.status]">{{ dict.label.consult_status[scope.row.status] }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="xxx" label="咨询日期" align="center" width="100" />
+        <el-table-column prop="xxx" label="处理日期" align="center" width="100" />
+        <el-table-column prop="xxx" label="操作" align="right" width="140">
+          <template slot-scope="scope">
+            <el-tooltip v-show="scope.row.status==3" content="处理"><el-button round plain type="danger" icon="el-icon-finished" @click="toEdit(scope.row)" /></el-tooltip>
+            <el-tooltip content="查看"><el-button round plain icon="el-icon-view" @click="toEdit(scope.row)" /></el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页组件-->
+      <el-pagination :total="total" :current-page="page" :page-size="pageSize" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
+    </div>
   </div>
 </template>
+<script>
+import DateRangePicker from '@/components/DateRangePicker'
+
+export default {
+  components: { DateRangePicker },
+  dicts: ['consult_status', 'product_type', 'area_province'],
+  data() {
+    return {
+      textColors: ['#ccc', '#32cd32', '#000', '#ff4949'],
+      loading: false,
+      page: 1,
+      pageSize: 20,
+      total: 0,
+      query: {},
+      tableData: [],
+      currentTime: '',
+      multipleSelection: []
+    }
+  },
+  mounted() {
+    this.currentTimeFn()
+    this.$nextTick(() => {
+      this.loadData()
+    })
+  },
+  methods: {
+    indexMethod(index) {
+      return 1 + index + this.page * this.pageSize - this.pageSize
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    loadData() {
+      var sort = 'id,desc'
+      var param = { ...this.query }
+      param.page = this.page
+      param.pageSize = this.pageSize
+      param.sort = sort
+      this.tableData = [
+        { username: '张三', area: '火星', status: 1, enabled: false, xxx: '2023-05-09' },
+        { username: '张三', area: '火星', status: 2, enabled: false, xxx: '2023-05-09' },
+        { username: '张三', area: '火星', status: 3, enabled: false, xxx: '2023-05-09' }
+      ]
+      this.total = 2
+    },
+    batchOperate(opt) {
+      if (!this.multipleSelection.length) {
+        return this.$message({
+          message: '未选取数据',
+          type: 'info'
+        })
+      }
+      if (opt) {
+        console.log('启用', this.multipleSelection)
+      } else {
+        console.log('启用', this.multipleSelection)
+      }
+    },
+    changeEnabled(data, val) {
+      this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+
+      }).catch(() => {
+        data.enabled = !data.enabled
+      })
+    },
+    toAdd() {
+
+    },
+    toEdit(item) {
+
+    },
+    toSearch() {
+      this.page = 1
+      this.loadData()
+    },
+    clearLimit() {
+      this.query = {}
+      this.currentTimeFn()
+      this.loadData()
+    },
+    pageChange(e) {
+      this.page = e
+      this.loadData()
+    },
+    sizeChange(e) {
+      this.page = 1
+      this.pageSize = e
+      this.loadData()
+    },
+    currentTimeFn() {
+      var date = new Date()
+      var year = date.getFullYear()
+      var month = date.getMonth() + 1
+      var day = date.getDate()
+      if (month >= 1 && month <= 9) {
+        month = '0' + month
+      }
+      if (day >= 0 && day <= 9) {
+        day = '0' + day
+      }
+      this.currentTime = year + '-' + month + '-' + day
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+}
+.content {
+  margin-top: 15px;
+  overflow: auto;
+}
+</style>