店铺管理

luobisheng

2022-11-10 3286dd82b83adf92cc576300e9e73a4dfb2aa880

店铺管理

 src/views/operate/fivepack/shop/components/createUser/index.vue

File was deleted

 src/views/operate/fivepack/shop/components/header/index.vue

File was deleted

 src/views/operate/fivepack/shop/components/main/index.vue

File was deleted

 src/views/operate/fivepack/shop/components/updateUser/index.vue

File was deleted

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

@@ -1,17 +1,12 @@
<template>
    <div class="userList">
        <myHeader @setDialog="changeDialog" @getSearch="getSearch"></myHeader>
        <myMain :refresh="isFresh" :keyword="keyword" @resetFresh="resetFresh" />
      <store-content :model="'store'" />
    </div>
</template>
<script>
import myHeader from "./components/header"
import myMain from "./components/main"
import storeContent from "@/views/operate/fivepack/threepack/components/content";
export default {
    components: {
        myHeader,
        myMain
    },
    components: { storeContent },
    data() {
        return {
            isFresh: false,
@@ -19,21 +14,6 @@
        }
    },
    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);
        }
    }
}
</script>
@@ -63,7 +43,6 @@
    &::v-deep .el-dialog__close {
        width: 20px;
        height: 20px;
        // color: #fff;
    }

    &::v-deep .el-dialog__body {

 src/views/operate/fivepack/threepack/components/content.vue

New file
@@ -0,0 +1,256 @@
<template>
    <div class="content">
      <header>
        <div class="headerContent">
          <div class="find">
            <div class="search-item">
              <span>输入查询:</span>
              <el-input style="flex: 1" :placeholder="isStorePage() ? '店铺（门店）名称' : '请输入店铺编号'" v-model="storeCode" />
            </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>
          <el-button v-if="isStorePage()" type="primary" icon="el-icon-plus" @click="handleView(null, 'add')">添加</el-button>
        </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 v-if="!isStorePage()" 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>
              <div v-else 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>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 查看修改页面 -->
        <el-dialog :visible.sync="dialogUpdate" width="45%"
                   :title="dialogType ? '修改店铺信息' : '查看店铺信息'" :before-close="handleClose">
          <updateUser :dialogType="dialogType" :storeInfo="storeInfo" :isStorePage="isStorePage()" @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>
</template>
<script>
import updateUser from "@/views/operate/fivepack/threepack/components/updateUser";
import { getStoreInfoList, deleteStoreInfo } from "@/api/operate/storeManagement";

export default {
  components: { updateUser },

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

  props: ['model'],

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

  methods: {
    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.dialogType = type;
    },

    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";
      }
    },

    isStorePage() {
      return this.model === 'store';
    }
  }
}
</script>
<style lang="scss" scoped>
.content{
    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;
          }
        }
      }
    }
  }
</style>

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

@@ -4,31 +4,35 @@
            <div class="mainContent">
                <el-form ref="store" label-width="140px" autoComplete="on" :model="store" :rules="rules"
                    label-position="right">
                  <!-- 店铺类型 -->
                  <el-form-item v-if="isStorePage" class="optionItem" label="店铺类型:" prop="type">
                    <el-cascader :options="shopTypeList" v-model="store.type" />
                  </el-form-item>
                    <!-- 店铺编号 -->
                    <el-form-item class="optionItem" label="店铺编号:" prop="storeNumber">
                        <el-input v-model="store.storeNumber" placeholder="请填写店铺编号" :disabled="!updateFlag"></el-input>
                        <el-input v-model="store.storeNumber" placeholder="请填写店铺编号" :disabled="isView()"></el-input>
                    </el-form-item>
                    <!-- 店铺名称 -->
                    <el-form-item class="optionItem" label="店铺名称:" prop="storeName">
                        <el-input v-model="store.storeName" placeholder="请填写店名称" :disabled="!updateFlag"></el-input>
                    <el-form-item class="optionItem" label="店铺名称:" prop="storename">
                        <el-input v-model="store.storename" placeholder="请填写店名称" :disabled="isView()"></el-input>
                    </el-form-item>
                    <!-- 店铺联系人 -->
                    <el-form-item class="optionItem" label="店铺联系人:" prop="owner">
                        <el-input v-model="store.owner" placeholder="请填写店铺联系人" :disabled="!updateFlag"></el-input>
                        <el-input v-model="store.owner" placeholder="请填写店铺联系人" :disabled="isView()"></el-input>
                    </el-form-item>
                    <!-- 店铺联系电话 -->
                    <el-form-item class="optionItem" label="店铺联系电话:" prop="contact">
                        <el-input v-model="store.contact" placeholder="请填写店铺联系电话" :disabled="!updateFlag"></el-input>
                        <el-input v-model="store.contact" placeholder="请填写店铺联系电话" :disabled="isView()"></el-input>
                    </el-form-item>
                    <!-- 店铺详细地址 -->
                    <el-form-item class="optionItem" label="店铺详细地址:" prop="storeAddress">
                        <el-input v-model="store.storeAddress" placeholder="请填写店铺详细地址" :disabled="!updateFlag"></el-input>
                    <el-form-item class="optionItem" label="店铺详细地址:" prop="storeaddr">
                        <el-input v-model="store.storeaddr" placeholder="请填写店铺详细地址" :disabled="isView()"></el-input>
                    </el-form-item>
                    <!-- 关联摄像机 -->
                    <el-form-item class="optionItem" label="关联摄像机:" prop="relationVideo">
                        <el-input v-model="store.relationVideo" placeholder="请填写关联摄像机" :disabled="!updateFlag"></el-input>
                    <el-form-item v-if="!isStorePage" class="optionItem" label="关联摄像机:" prop="relationVideo">
                        <el-input v-model="store.relationVideo" placeholder="请填写关联摄像机" :disabled="isView()"></el-input>
                    </el-form-item>
                    <el-form-item v-if="updateFlag">
                    <el-form-item v-if="!isView()">
                        <div class="optionBtn">
                            <el-button type="primary" class="btn submit" @click.native.prevent="onSubmit">提交</el-button>
                        </div>
@@ -39,52 +43,115 @@
    </div>
</template>
<script>
import { deepClone } from "@/utils/helper";
import { updateStoreInfo } from "@/api/operate/storeManagement";
import { SUCCESS_CODE } from "@/utils";
import {deepClone, getCodeList} from "@/utils/helper";
import {addStoreInfo, updateStoreInfo} from "@/api/operate/storeManagement";

export default {
    data() {
        const validatePhone = (rule, value, callback) => {
          if (!value) {
            callback(new Error("请填写手机号码"));
          } else {
            const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/
            if (!rep.test(value)) {
              callback("请输入正确的手机号码");
            } else {
              callback();
            }
          }
        };
        return {
            store: {
                storeNumber: '',
                storeName: '',
                storename: '',
                owner: '',
                contact: '',
                storeAddress: '',
                relationVideo: ''
                storeaddr: '',
                relationVideo: '',
                type: null
            },
            rules: {
                type: [{ required: true, trigger: ['blue', 'change'], message: '请选择店铺类型' }],
                storeNumber: [{ required: true, trigger:'blur', message: '请输入店铺编号' }],
                storeName:  [{ required: true, trigger:'blur', message: '请输入店铺名称' }],
                owner:  [{ required: true, trigger:'blur', message: '请输入店铺联系人' }],
                contact: [{ required: true, trigger:'blur', message: '请输入店铺联系电话:' }],
                storeAddress: [{ required: true, trigger:'blur', message: '请输入店铺详细地址' }],
                storename: [{ required: true, trigger:'blur', message: '请输入店铺名称' }],
                owner: [{ required: true, trigger:'blur', message: '请输入店铺联系人' }],
                contact: [{ required: true, trigger:'blur', validator: validatePhone }],
                storeaddr: [{ required: true, trigger:'blur', message: '请输入店铺详细地址' }],
                relationVideo: [{ required: false, trigger:'blur', message: '请输入关联摄像机' }]
            },
            shopTypeList: []
        }
    },
    created() {
        this.store = deepClone(this.storeInfo);
        if (this.isCreated()) {
          this.getShopTypeList();
        }
    },

    methods: {
      onSubmit() {
        this.$refs.store.validate(valid => {
          if (valid) {
            updateStoreInfo(this.store)
                .then(() => {
            if (this.isCreated()) {
              this.store.type = this.store.type[1];
              addStoreInfo(this.store)
                  .then(() => {
                    this.$message({ type: 'success', message: '操作成功' });
                    this.$emit('closeDialog');
                })
                .catch(err =>  this.$message({ type: 'error', message: err }));
                  })
                  .catch(err => this.$message({ type: 'error', message: err }));
            } else {
              updateStoreInfo(this.store)
                  .then(() => {
                    this.$message({ type: 'success', message: '操作成功' });
                    this.$emit('closeDialog');
                  })
                  .catch(err =>  this.$message({ type: 'error', message: err }));
            }
          } else {
            this.$message({ type: 'warning', message: '请检查必填项' });
          }
        });
      },

      isView() {
        return this.dialogType === 'view';
      },

      isCreated() {
        return this.dialogType === 'add';
      },

      // 获取字典
      async getShopTypeList() {
        let arr = await getCodeList('16');
        this.shopTypeList = this.createShopTypeTree(arr);
      },

      // 创建商铺类型树
      createShopTypeTree(arr) {
        if (arr.length && arr.length !== 0) {
          // 获取顶级菜单
          let treeRoot = arr.filter(item => {
            return item.parentId === 0
          })
          // 添加child
          treeRoot.forEach(item => {
            item.children = []
            arr.forEach(child => {
              child.value = child.id;
              child.label = child.name;
              if (child.parentId === item.id) {
                item.children.push(child)
              }
            })
          })
          return treeRoot;
        }
      }
    },
    props: ['storeInfo', 'updateFlag']
    props: ['storeInfo', 'dialogType', 'isStorePage']
}
</script>
<style lang="scss" scoped>
@@ -96,7 +163,6 @@
        text-align: left;
        padding: 0 55px;
        background-color: #09152f;
        padding-bottom: 50px;

        .mainContent {
            display: flex;
@@ -145,4 +211,5 @@
    background-color: #09152f;
    border: 1px solid #17324c;
}

</style>

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

@@ -1,80 +1,17 @@
<template>
    <div class="userList">
        <myAside />
        <div class="right">
          <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>
      <myAside />
      <store-content :model="'three-pack'" />
    </div>
</template>
<script>
import myAside from "./components/aside";
import updateUser from "@/views/operate/fivepack/threepack/components/updateUser";
import storeContent from "@/views/operate/fivepack/threepack/components/content";
import { getStoreInfoList, deleteStoreInfo } from "@/api/operate/storeManagement";
import { SUCCESS_CODE } from "@/utils";

export default {
    components: { myAside, updateUser },
    components: { myAside, storeContent, updateUser },

    created() {
      this.search();