Lexus-media/src/views/notification/changShang.vue

<template>
  <div class="notice_changShang">
    <div v-if="isFather">
      <div style="color: #80808059; border: 1px solid"></div>
      <button @click="announce()">发布公告</button>
      <div class="tableD">
        <div class="table_template">
          <table class="table">
            <thead>
              <tr :style="tableHeadStyle">
                <td
                  v-for="(item, index) in tableHeaderD"
                  :key="index"
                  :style="tableHeadStyle"
                >
                  {{ item }}
                </td>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="(obj, index) in tableData"
                :key="index"
                :class="{ table_gray: !discolor && index % 2 === 1 }"
              >
                <td class="titleStyle" @click="goDetailPage(obj)">{{ obj.title || "-" }}</td>
                <td>重要通知</td>
                <td>
                  <!--{{-->
                    <!--(obj.addtime || "")-->
                      <!--.replace("T", " ")-->
                      <!--.slice(0, -4)-->
                      <!--.replace(RegExp("-", "g"), "/")-->
                  <!--}}-->
                  {{obj.addtime.substr(0,10)}}
                </td>

                <td v-if="operation" :style="trStyle" class="operationStyle">
                  <div class="operationBox">
                    <span
                      style="cursor: pointer"
                      v-for="(operationObj, i) in operation"
                      :key="i"
                      @click="operationObj.function(obj, index)"
                      >{{ operationObj.name }}
                    </span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="pageD">
        <TablePage
          :totalPage="totalPage"
          :currentPage="currentPage"
          @change_page="changePage"
          @jump_page="jumpPage"
        />
        <p>共{{ totalPage }}页，共{{ sum }}条数据</p>
      </div>
    </div>
      <router-view :key="this.$route.path"></router-view>
  </div>
</template>

<script>
import TablePage from "../../components/TablePage";
import { env_url , php_url } from "../../config/env";
import axiosPhp from "axios";
export default {
  components: {
    TablePage,
  },
  data() {
    return {
      unifiedUrl:'/lexus_php/api/',
      tableHeaderD: ["标题", "信息类型", "创建时间", "操作"],
      operation: [
        {
          name: "编辑",
          function: (obj) => {
            this.edit(obj);
          },
        },
        {
          name: "删除",
          function: (obj) => {
            this.delNotice(obj.id)
          },
        },
      ],
      // 表格配置
      sum: 0, // 一共有多少条数据
      pageSize: 20, // 每页展示的数据
      discolor: false, // flase是隔行变色
      currentPage: 1,
      tableData: [],
      tableFileData: [],
      tableHeadStyle: {
        background: "#848484",
        height: "36px",
        color: "white",
      },
      trStyle: {
        minwidth: "150px",
        overflow: "hidden",
      },
      onlineUrl: env_url, //'http://8.140.188.129:8080'线上 //http://8.136.230.133:8080 //测试
      userId: localStorage.getItem("userId") || "",
    };
  },
  computed: {
    // 表格总页数
    totalPage() {
      return Math.ceil(this.sum / this.pageSize);
    },
    isFather: function () {
      return this.$route.path === '/changShang';
    },
  },
  methods: {
    goDetailPage(param){
      this.$router.push({
        path: "/changShang/itemDetail",
        query: {
          id:param.id
        },
      });
    },
    // 获取某一页面的数据，展示在表格
    changePage: function (page) {
      this.currentPage = page;
      this.getDataList()
    },
    // 点击上一页，下一页，首页，尾页
    jumpPage: function (item) {
      switch (item) {
        case 1:
          this.currentPage = 1;
          break;
        case 2:
          this.currentPage = this.currentPage - 1;
          break;
        case 3:
          this.currentPage = this.currentPage + 1;
          break;
        case 4:
          this.currentPage = this.totalPage;
          break;
      }
      this.getDataList()
    },
    //编辑
    edit: function (config) {
      console.log(config,'father')
      if(typeof (config.area) === 'string'){
        config.area =  (config.area).split(',');
      }
      this.$router.push({
        path: "/changShang/editPage",
        query: config,
      });
    },
    getDataList: function () {
      axiosPhp({
        method: "post",
        url: php_url + this.unifiedUrl + "notice_list.php",
        data: {
          Page: this.currentPage,
          Rows: this.pageSize,
        },
        })
          .then((res) => {
            if (res.data.code === 200) {
             this.sum = res.data.count;
             this.tableData = res.data.data;
            }
          })
          .catch((err) => {
            console.log(err);
          });
    },
    delNotice: function (id) {
      axiosPhp({
        method: "post",
        url: php_url + this.unifiedUrl + "notice_del.php",
        data: {
          ids:id
        },
      })
        .then((res) => {
          if (res.data.code === 200) {
            alert(res.data.msg);
            this.getDataList();
          }
        })
        .catch((err) => {
          alert(err)
        });
    },
    /* 发布公告 */
    announce: function () {
      this.$router.push({
        path: "/changShang/editPage",
        query: {
          title:'',
          content:``,
          id:'',
          files:[],
          area:['全区']
        },
      });
    },
  },
  watch: {
    // 如果路由发生变化，再次执行该方法
    "$route": "getDataList"
  },
  created() {
  },
  mounted() {
    this.getDataList()
  }
};
</script>

<style scoped lang="less">
.titleStyle {
    color: #0000ff;
    cursor: pointer;
}
/* 查看详情样式 */
.table_template {
  text-align: center;
  .table {
    background-color: #fff;
    border-collapse: collapse;
    border: none;
    width: 100%;
    td {
      border: 1px solid #ccc;
      height: 36px;
      width: 25%;
    }
    span {
      &:hover {
        cursor: pointer;
      }
    }
  }
}
.table_gray {
  background-color: #f5f5f5;
}
.operationStyle span {
  color: #0000ff;
}
.operationBox {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.HeadLeft {
  border: 1px solid #ccc;
}
.pageD {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
}
.pageD p {
  margin-left: 16px;
}
.reportStyle {
  text-decoration: underline;
  cursor: pointer;
}
.showItemOperationStyle {
  display: none;
}
.noJump {
  color: rgb(173, 162, 162);
  cursor: text !important;
  text-decoration: underline;
}
.canJump {
  text-decoration: underline;
}
.notice_changShang button:nth-of-type(1) {
  position: relative;
  float: right;
  margin: 8px 8px;
  padding: 8px 16px;
  width: 100px;
  height: 35px;
  border-radius: 5px;
}
</style>