renli-pc/src/pages/branch/subbranch/index.vue

<template>
  <div class="displsy-mod">
    <div class="flex">
      <div class="left">
        <el-button size="mini" type="primary" style="margin-left: 10px;" :disabled="!radioForm.id" @click="detailShow" v-if="headOffice">修改</el-button>
      </div>
      <div class="right">
        <el-input size="medium" style="width: 180px" placeholder="当前页搜索" v-model="queryForm.storeName">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
    </div>
    <hr />
    <el-table :data="list" stripe style="width: 100%" :header-cell-style="{
        background: 'linear-gradient(#6cb3ff, #1873d4)',
        color: '#eeeeee',
      }" max-height="650" @row-click="rowClick" >
      <el-table-column label="选择" width="60">
        <template slot-scope="scope">
          <el-radio v-model="radio" :label="scope.row.id" @change.native="scope.row;">
            {{ "" }}
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="storeNum" label="门店编码" min-width="100" sortable></el-table-column>
      <el-table-column align="center" prop="storeName" label="门店名称" :show-overflow-tooltip="true" min-width="140" sortable></el-table-column>
      <el-table-column align="center" prop="storeName" label="所属门店" min-width="140" :show-overflow-tooltip="true" sortable></el-table-column>
      <el-table-column align="center" prop="description" label="归属" min-width="100" :show-overflow-tooltip="true" sortable></el-table-column>
      <el-table-column align="center" prop="province" label="省" min-width="100" :show-overflow-tooltip="true" sortable></el-table-column>
      <el-table-column align="center" prop="city" label="市" min-width="100" :show-overflow-tooltip="true" sortable></el-table-column>
      <el-table-column align="center" prop="county" label="区/县" min-width="100" :show-overflow-tooltip="true" sortable></el-table-column>
      <el-table-column align="center" prop="storeAddress" label="地址" min-width="100" :show-overflow-tooltip="true" sortable></el-table-column>
      <el-table-column align="center" prop="registrant" label="联系人" :show-overflow-tooltip="true" min-width="100" sortable></el-table-column>
      <el-table-column align="center" prop="registrantMobilePhone" label="联系方式" min-width="130" sortable></el-table-column>
      <el-table-column align="center" prop="telephone" label="服务电话" min-width="120" sortable></el-table-column>
      <el-table-column align="center"  label="状态" min-width="120">
        <template slot-scope="scope">
          <el-button size="mini" :type="
          scope.row.state == 0?'primary':
          scope.row.state == 1?'success':
          scope.row.state == 2?'info':'warning'">
          {{ statusList[scope.row.state] }}
        </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="block" style="margin-top: 10px">
      <el-pagination align="left" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"></el-pagination>
    </div> -->
    <detail ref="detail" @confirm="confirm"/>
  </div>
</template>

<script>
import detail from './component/index.vue'
import { storeLists } from "@/api/login.js";
export default {
  components:{
    detail
  },
  data() {
    return {
      statusList:['装修','开业','停业','关闭'],
      headOffice: sessionStorage.getItem("headOffice") * 1,
      radio:"",
      radioForm:{},
      sessionStorageData: {},
      pageSize: 10,
      pageNum: 1,
      parentId: sessionStorage.getItem("parentId"),
      parentId: sessionStorage.getItem("parentId"),
      pageInfo: {
        total: 0, //分页总条数
        tableList: [],
      },
      storeInfo: JSON.parse(sessionStorage.getItem("storeInfo")),
      list: [], //主数组
      queryForm: {},
    };
  },
  methods: {
    confirm(){
      this.getData()
    },
    detailShow(){
      this.$refs.detail.show(this.radioForm)
    },
    handleSelect(row){
      this.radioForm = {...row}
    },
    rowClick(row){
      this.radio = row.id
      this.radioForm = {...row};
    },
    //获取数据
    async getData() {
      if (this.parentId) {
        console.log(JSON.parse(sessionStorage.getItem("storeInfo")));
        let parentId = JSON.parse(sessionStorage.getItem("storeInfo")).id;
        storeLists({ parentId: parentId }).then((res) => {
          if (res.code == "000000") {
            this.list = [...res.rows];
          } else {
            this.$alert(res.message, "获取门店信息", {
              confirmButtonText: "确定",
              confirmButtonClass: "confirmbtnFalses",
              type: "warning",
              center: true,
              callback: (action) => {},
            });
          }
        });
      }
    },
    //分页方法
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.pageNum = val;
    },
  },
  created() {
    this.getData();
  },
  computed: {},
};
</script>
<style scoped>
.el-button {
  margin-bottom: 10px;
}

.el-input {
  width: 200px;
}
.flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.right{
  text-align: right;
}
</style>