消息管理丶店铺对接

luobisheng

2022-11-09 f7bdedf1f3f7600c73f6d5beb46c1d1f4d518822

 src/views/operate/fivepack/threepack/index.vue

@@ -2,43 +2,153 @@
    <div class="userList">
        <myAside />
        <div class="right">
            <myHeader @setDialog="changeDialog" @getSearch="getSearch"></myHeader>
            <myMain :refresh="isFresh" :keyword="keyword" @resetFresh="resetFresh" />
          <header>
            <div class="headerContent">
              <div class="find">
                <div class="search-item">
                  <span>输入查询:</span>
                  <el-input style="flex: 1" placeholder="请输入店铺编号" v-model="storeCode" slot="prefix"></el-input>
                </div>
                <div class="search-item">
                  <span>店铺状态:</span>
                  <el-select v-model="storeStatus" placeholder="选择店铺状态">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
                <div class="findBtn">
                  <el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
                  <el-button icon="el-icon-delete-solid" @click="handleReset">重置</el-button>
                </div>
              </div>
            </div>
          </header>
          <main>
              <!-- 数据展示 -->
              <el-table ref="multipleTable"
                        :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
                        :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
                <el-table-column type="selection" min-width="5">
                </el-table-column>
                <el-table-column prop="storeNumber" label="店铺编号" min-width="10">
                </el-table-column>
                <el-table-column prop="storeName" label="店铺名称" min-width="10">
                </el-table-column>
                <el-table-column prop="owner" label="店铺联系人" min-width="10">
                </el-table-column>
                <el-table-column prop="contact" label="店铺联系电话" min-width="10">
                </el-table-column>
                <el-table-column prop="storeAddress" label="店铺详细地址" min-width="10">
                </el-table-column>
                <el-table-column prop="relationVideo" label="关联摄像机" min-width="10">
                </el-table-column>
                <el-table-column prop="operation" label="操作" min-width="20">
                  <template slot-scope="scope">
                    <div class="operation">
                      <el-link icon="el-icon-edit" :underline="false" @click="handleView(scope.row, 'update')">编辑</el-link>
                      <el-link class="leftPx" icon="el-icon-delete-solid" :underline="false" @click="handleDelete(scope.row.id)">删除</el-link>
                      <el-link class="leftPx" icon="el-icon-edit"  :underline="false">推送信息</el-link>
                      <el-link class="leftPx" icon="el-icon-edit" :underline="false" @click="handleView(scope.row, 'view')">查看</el-link>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 查看修改页面 -->
              <el-dialog :visible.sync="dialogUpdate" width="45%"
                         :title="updateFlag ? '修改店铺信息' : '查看店铺信息'" :before-close="handleClose">
                <updateUser :updateFlag="updateFlag" :storeInfo="storeInfo" @closeDialog="closeDialog" />
              </el-dialog>
              <!-- 分页 -->
              <div class="pagination">
                <el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="totalNum"
                               :page-size="pageSize" @current-change="changeCurrentPage">
                </el-pagination>
              </div>
          </main>
        </div>
    </div>
</template>
<script>
import myHeader from "./components/header"
import myAside from "./components/aside"
import myMain from "./components/main"
import myAside from "./components/aside";
import updateUser from "@/views/operate/fivepack/threepack/components/updateUser";
import { getStoreInfoList, deleteStoreInfo } from "@/api/operate/storeManagement";
import { SUCCESS_CODE } from "@/utils";

export default {
    components: {
        myHeader,
        myMain,
        myAside
    components: { myAside, updateUser },

    created() {
      this.search();
    },

    data() {
        return {
            isFresh: false,
            keyword: '',
        }
    },
          return {
            storeCode: null,
            storeStatus: null,
            options: [{ label: '经营', value: 1 }, { label: '倒闭', value: 2 }],
            tableData: [],
            dialogUpdate: false,
            currentPage: 1,
            totalNum: 0,
            pageSize: 10,
            userInfo: null,
            updateFlag: false,
            storeInfo: null
          }
      },

    methods: {
        // 获取搜索返回结果
        getSearch({ text }) {
            this.keyword = text;
            this.isFresh = true;
        },
        // 获取刷新结果
        changeDialog({ flag }) {
            console.log(flag);
            this.isFresh = flag;
        },
        // 重置isFresh
        resetFresh({ flag }) {
            this.isFresh = flag;
            console.log(this.isFresh);
      search() {
        getStoreInfoList({ keyword: this.storeCode })
            .then(({ list, pageSize, totalPage }) => {
              this.tableData = list;
              this.pageSize = pageSize;
              this.totalNum = totalPage;
            })
            .catch(err => this.$message({ type: 'error', message: err }));
      },

      handleReset() {
        this.storeCode = '';
        this.storeStatus = null;
        this.search();
      },

      handleView(row, type) {
        this.dialogUpdate = true;
        this.storeInfo = row;
        this.updateFlag = type === 'update';
      },

      handleDelete(id) {
        deleteStoreInfo(id)
            .then(() => {
              this.$message({ type: 'success', message });
              this.search();
            })
            .catch(err => this.$message({ type: 'error', message: err }));
      },

      handleClose() {
        this.dialogUpdate = false;
      },

      closeDialog() {
        this.dialogUpdate = false;
        this.search();
      },

      changeCurrentPage(currentPage) {
        this.currentPage = currentPage;
        this.search();
      },

      tableRowClassName({ row, rowIndex }) {
        if ((rowIndex + 1) % 2 === 0) {
          return "warning-row";
        } else {
          return "success-row";
        }
      },
    }
}
</script>
@@ -49,10 +159,99 @@
    color: #4b9bb7;
    display: flex;
    height: 100%;

    .right{
        flex: 1;
        height: 100%;
        padding-left: 20px;

      .headerContent {
        display: flex;
        line-height: 100px;
        justify-content: space-between;
        align-items: center;

        .find {
          display: flex;
        }

        .search-item {
          display: flex;
          padding: 10px;
        }

        .findBtn {
          line-height: 100px;
          margin-left: 15px;
          display: flex;
          align-items: center;

          .el-button {
            padding: 12px 25px;
          }
        }

        .addBtn {
          padding: 12px 30px;
          margin-left: 20%;
        }
      }

      main {
        background-color: #09152f;
        margin-top: 20px;
        padding-bottom: 50px;

        .mainTitle {
          line-height: 60px;
        }

        .el-link {
          color: #4b9bb7;
        }

        .leftPx {
          margin-left: 10px;
        }

        .pagination {
          margin-top: 50px;
          display: flex;
          line-height: 50px;
          justify-content: center;

          .el-pagination {
            &::v-deep li,
            &::v-deep .btn-prev,
            &::v-deep .btn-next {
              background-color: #071f39;
              color: #4b9bb7;
            }
          }
        }

        .el-table {
          color: #4b9bb7;
          font-size: 10px;

          &::v-deep .el-table__empty-block {
            background-color: #09152f;
            color: #4b9bb7;
          }

          .operation {
            display: flex;

            .el-button {
              border: none;
            }

            span:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
    &::v-deep .el-dialog__header,
    &::v-deep .el-dialog__body {