demo/demo-web-ui/src/views/region/region.vue

<template>
  <div class="app-container">
    <div v-show="viewState == 1">
      <el-menu :default-active="activeIndex" style="" class="el-menu-demo" mode="horizontal">
        <el-menu-item
          index="1"
          style="margin-left: 0;text-align: center; background-color: #028ac8!important;color: #fff;">
          区域管理(省)
        </el-menu-item>
        <div class="new_" @click="showAddDialog">新增</div>
      </el-menu>
      <!-- 新增弹框开始-->
      <regionAdd ref="reAdd" @closeLoding="newFails"/>
      <!-- 新增弹框结束-->
      <!-- 修改弹框开始-->
      <!-- :psid="psid"  :huixian="huixian" @closeLoding="newFails"-->
      <el-dialog width="60%" :append-to-body="true" :visible.sync="updateEcho_">
        <div class="poptitle">
          <div class="conter_title">名称：</div>
          <div class="conter_content" style="flex:7">
            <el-input v-model="huixian.name" style="width: 300px;margin-left: 20px"/>
          </div>
        </div>
        <div class="poptitle">
          <div class="conter_title" style="">行政区域代码：</div>
          <div class="conter_content" style="flex: 7">
            <el-input v-model="huixian.districtCode" style="width: 300px;margin-left: 20px"/>
          </div>
        </div>
        <div class="poptitle">
          <div class="conter_title" style="">级别：</div>
          <div class="conter_content" style="flex: 7">
            <el-input v-model="huixian.level" type="namber" style="width: 300px;margin-left: 20px"/>
          </div>
        </div>
        <div class="poptitle">
          <div class="conter_title" style="">排序号：</div>
          <div class="conter_content" style="flex: 7">
            <el-input v-model="huixian.sortNo" type="namber" style="width: 300px;margin-left: 20px"/>
          </div>
        </div>
        <div style="width: 100%;display: flex;justify-content: center;margin-top: 20px;">
          <el-button @click="newWrit_bc">保存</el-button>
          <el-button @click="close_">关闭</el-button>
        </div>
      </el-dialog>
      <!-- 修改弹框结束-->
      <!-- Start 条件查询部分-->
      <div style="display: flex;width: 100%;margin: 0 auto ;border: 1px solid #dcdfe6;margin-top: 20px;padding: 10px 0">
        <div
          style="margin-left: 20px;display: flex;width: 300px;height: 40px;justify-content:space-around;align-items: center ;"
        >
          <span>区域名称：</span>
          <el-input v-model="queryparams.params.name" clearable style="width: 200px"/>
        </div>
        <div
          style="margin-left: 20px;display: flex;width: 350px;height: 40px;justify-content:space-around;align-items: center ;"
        >
          <span>行政区域代码：</span>
          <el-input v-model="queryparams.params.districtCode" clearable style="width: 200px"/>
        </div>
        <div style="width:140px;float: right;line-height: 30px;height: 30px;margin-top: 5px;margin-left: 30px;">
          <el-button size="mini" type="primary" @click="loadList(1)">查询</el-button>
          <el-button size="mini" type="primary" @click="reset()">重置</el-button>
        </div>
      </div>
      <!-- End 条件查询部分-->
      <!--Start 列表部分-->
      <div class="liebiaotitle" style="background-color: #fff;background-color: #0099ff;margin-top: 10px;">
        <div class="writ_title">
          <div style="margin-left: 10px">区域列表</div>
          <!--          <pagination :total="queryparams.total" :page.sync="queryparams.current" :limit.sync="queryparams.size"-->
          <!--                      @pagination="pageSizeChange"/>-->
          <el-pagination :total="queryparams.total" :page-size="queryparams.size" :page-sizes="[10, 20, 50, 100]"
                         background layout="sizes"
                         @size-change="pageSizeChange"/>
        </div>
      </div>
      <div>
        <el-table
          v-loading="tableloading"
          border
          :data="tableList"
          tooltip-effect="dark"
          style="width: 100%"
          :cell-class-name="addclass"
          :header-cell-style="{ background: '#f8f8f8', color: '#333' }"
        >
          <!-- <el-table-column type="index" width="50" label="序号" /> -->
          <el-table-column label="操作" width="220" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="administration(scope.row.sid)">管理</el-button>
              <el-button type="primary" size="mini" @click="dataChang(scope.row.sid)">修改</el-button>
              <el-button type="danger" size="mini" @click="delOne(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column label="名称" align="center" prop="name"/>
          <el-table-column label="行政区域代码" align="center" prop="districtCode"/>
          <el-table-column label="排序" align="center" prop="sortNo"/>
          <!-- <el-table-column label="区域名称" align="center" prop="title">
            <template slot-scope="scope">
              <div class="bgcolor" @click="cnsDetails(scope.row.sid)">{{ scope.row.title }}</div>
            </template>
          </el-table-column> -->
        </el-table>
        <pagging :notshowdelete="true" :queryparams="queryparams" @reloading="loadList"/>
      </div>
      <!--End 列表部分-->

      <el-dialog width="28%" :append-to-body="true" :visible.sync="cns_details" style="margin-top: -10vh;">
        <!-- 列表详情开始-->
        <div class="xqlb_con">
          <div class="xqlb_title">{{ deteils.title }}</div>
          <div class="xqlb_contents" style="white-space: pre-wrap;" v-html="deteils.contents"/>
        </div>
      </el-dialog>
      <!-- 列表详情结束-->
    </div>
    <!--Start 城市页面-->
    <region-city v-show="viewState == 2" ref="regionCity" @goBack="resetView"/>
  </div>
</template>

<script>
  import req from '@/api/system/region/region' // 请求方法
  import pagging from '@/components/Pagging' // 删除一条数据
  import regionAdd from './component/regionAdd' // 添加一条数据
  import regionAlter from './component/regionAlter' // 修改一条数据
  import regionCity from './regionCity' // 城市
  import regionDistrict from './regionDistrict' // 区和县
  // import '@/styles/e-region.scss'
  export default {
    name: 'Region',
    components: {
      pagging,
      regionAdd,
      // eslint-disable-next-line vue/no-unused-components
      regionAlter,
      regionCity,
      // eslint-disable-next-line vue/no-unused-components
      regionDistrict
    },
    data() {
      return {
        viewState: 1, // 1、省 2、市 3、区/县
        sid: '', //每行的sid
        //regionDto是一条数据
        psid: '0',
        regionDto: {
          districtCode: '',
          level: 0,
          name: '',
          psid: this.psid,
          sortNo: 0
        },
        huixian: {},
        tableloading: false,
        title: '',
        contents: '',
        hxtitle: '',
        hxcontents: '',
        //列表查询
        queryparams: {
          total: 0,
          current: 1,
          params: {
            districtCode: '',
            name: '',
            psid: 0
          },
          size: 10
        },
        name: '',
        activeIndex: '1', // 报错:格式有问题，把数字1改成字符串'1'
        new_file: false,
        updateEcho_: false,
        tableList: [],
        hxsid: '',
        cns_details: false,
        deteils: {
          title: '',
          contents: ''
        }
      }
    },
    created() {
      this.new_file = false
      this.loadList()
    },
    methods: {
      showAddDialog() {
        var psid = this.queryparams.params.psid
        var level = 1
        this.$refs['reAdd'].showAdd(psid, level);
        // this.$refs['reAdd'].regionDto.psid = sid;
        // this.$refs['reAdd'].regionDto.level = 2;
      },
      // 市返回到省
      resetView() {
        this.viewState = 1
      },

      //
      newFails() {
        this.loadList()
        this.new_file = false
        this.updateEcho_ = false
        this.psid = ''
        this.huixian = {}
      },
      // 管理跳转页面到市
      administration(sid) {
        const _this = this;
        this.viewState = 2;
        this.$refs['regionCity'].psidRegion = this.queryparams.params.psid; //省级数据的psid传给市级
        this.$refs['regionCity'].queryparams.params.psid = sid; //把省级数据的sid传给市级
        // console.log('上一级sid传给添加页面',this.$refs['regionAdd'].regionDto.psid)
        this.$refs['regionCity'].showCity()
        this.queryparams.params.psid = sid;
        req.pagerList(this.queryparams).then(resp => {
          this.tableloading = false
          if (resp && resp.success) {
            _this.$refs['regionCity'].tableList = resp.data.records
          }
        })
      },
      // 重置
      reset() {
        this.queryparams.params.name = ''
        this.queryparams.params.districtCode = ''
      },
      addclass(row) {
        if (row.columnIndex === 1) {
          return 'bgcolor'
        }
      },
      //分页
      pageSizeChange(val) {
        this.queryparams.size = val
        this.loadList()
      },
      // 关闭弹框
      close_() {
        this.new_file = false
        this.updateEcho_ = false
      },

      // 查询列表
      loadList(flag) {
        const _this = this
        this.tableloading = true
        if (flag == 1) {
          this.queryparams.current = 1
        }
        req.pagerList(this.queryparams).then(resp => {
          this.tableloading = false
          if (resp && resp.success) {
            const data = resp.data
            _this.queryparams.total = data.total
            _this.tableList = []
            _this.tableList = data.records
          }
        })
      },

      // 删除
      delOne(index, row) {
        this.$confirm('此操作将删除记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.doDelete(row.sid)
          })
          .catch(() => {
          })
      },

      doDelete(sid) {
        const _this = this
        req.delete(sid).then(resp => {
          console.log('resp' + resp)
          if (resp && resp.success) {
            _this.$message({
              type: 'success',
              message: resp.msg,
              showClose: true
            })
            _this.loadList()
          } else {
            this.$message.error(resp.msg)
          }
        })
      },

      // 点击修改回显
      dataChang(sid) {
        const _this = this;
        req.updateEcho(sid).then(resp => {
          console.log('省级修改回显resp', resp);
          if (resp && resp.success) {
            const data = resp.data
            _this.sid = data.sid
            _this.psid = data.psid
            this.huixian = data
            _this.updateEcho_ = true
          } else {
            _this.$message.error(resp.msg)
          }
        })
      },
      // 修改保存
      newWrit_bc() {
        this.regionDto.districtCode = this.huixian.districtCode;
        this.regionDto.level = this.huixian.level;
        this.regionDto.name = this.huixian.name;
        this.regionDto.sortNo = this.huixian.sortNo;
        this.regionDto.psid = this.psid;
        console.log('111省级-修改保存获取的regionDto', this.regionDto);
        console.log('111省级-修改保存获取的psid', this.psid);
        console.log('111省级-修改保存获取的sid', this.sid);
        req.update(this.regionDto, this.sid).then(resp => {
          console.log('这里是修改后的regionDto', this.regionDto, this.sid)
          if (resp && resp.success) {
            this.$message({
              type: 'success',
              message: resp.msg,
              showClose: true
            })
            if (resp.code === '200') {
              this.regionDto.districtCode = '';
              this.regionDto.name = '';
              this.regionDto.psid = '';
              this.regionDto.level = '';
              this.regionDto.sortNo = 0;
              this.updateEcho_ = false;
              this.loadList()
            }
          } else {
            this.$message.error(resp.msg)
          }
        })
      },

      // 修改保存
      newWrit_xg() {
        console.log(this.hxcontents)
        const dto = {
          title: this.hxtitle,
          contents: this.hxcontents,
          sid: this.hxsid
        }
        console.log(dto)
        // req.updateSave(dto).then(resp => {
        //   if (resp && resp.success) {
        //     this.$message({
        //       type: 'success',
        //       message: resp.msg,
        //       showClose: true
        //     })
        //     this.updateEcho_ = false
        //     this.hxtitle = ''
        //     this.hxcontents = ''
        //     this.loadList()
        //   } else {
        //     this.$message.error(resp.msg)
        //   }
        // })
      }
    }
  }
</script>

<style scoped lang="scss">
  .app-container {
    margin-top: 10px;
  }

  .editor {
    line-height: normal !important;
    /* height: 192px; */
    width: 93%;
    margin-top: 20px;
    margin-left: 20px;
  }

  .xqlb_con {
    width: 100%;
    min-height: 500px;
    padding: 10px 15px 10px 15px;
    border: 1px solid #dedede;
    margin: 0 auto;

    .xqlb_title {
      width: 90%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-weight: 1000;
      margin: 0 auto;
    }

    .xqlb_contents {
    }

  }

  .el-dialog__title {
    text-align: center !important;
    background-color: #0099ff !important;
    color: #fff !important;
  }

  .tab_left {
    text-align: right !important;
    padding-right: 30px !important;
  }

  .writ_title {
    font-weight: bold;
    margin: 0px 0px;
    color: #fff;
    padding: 5px 10px;
    background-color: #0099ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .poptitle {
    width: 97%;
    height: 50px;
    line-height: 50px;
    border: 1px solid #dedede;
    display: flex;

    .conter_title {
      flex: 3;
      height: 50px;
      border-right: 1px solid #dedede;
      text-align: center;
      line-height: 50px;
    }

    .conter_content {
      flex: 7;
    }

  }

  .popitem {
    width: 97%;
    min-height: 300px;
    line-height: 50px;
    border-left: 1px solid #dedede;
    border-right: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    display: flex;

    .popitem_title {
      flex: 3;
      min-height: 300px;
      border-right: 1px solid #dedede;
      text-align: center;
      line-height: 300px;
    }

  }

  .textarea__inner {
    overflow-y: auto;
    min-height: 300px !important;
    /* overflow-y: auto;兼容ie  */
  }

  .bgcolor {
    color: #028ac8;
    /* text-decoration: underline; 下划线*/
    cursor: pointer;
  }

  .new_ {
    margin-left: 150px;
    text-align: center;
    color: #9ea1a6 !important;
    background-color: #fff;
    border: 1px solid #dedede;
    width: 100px;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
  }

  .el-menu.el-menu--horizontal {
    padding-bottom: 10px;
    border-bottom: 1px solid #018ad2 !important;
    /*border-bottom: 2px solid #00ccff !important;*/
  }

  .el-submenu__title {
    text-align: center;
    line-height: 35px !important;
    width: 130px !important;
    height: 35px !important;
    padding: 0 !important;
  }

  .el-menu--horizontal > .el-menu-item .is-active {
    border-bottom: 1px solid #fff !important;
  }

  .el-menu-item.is-active {
    color: #fff !important;
    text-align: center;
    line-height: 35px;
    min-width: 100px !important;
    height: 35px !important;
  }

  .el-menu--horizontal > .el-menu-item {
    margin-left: 20px;
    text-align: center;
    line-height: 35px;
    min-width: 100px !important;
    height: 35px !important;
    border: 1px solid #dedede;
    border: 1px solid #dedede !important;
    text-align: center;
  }

  .el-submenu__title {
    height: 60px;
    line-height: 60px;
    border-bottom: 2px solid transparent;
    color: #fff;
    font-size: 20px;
    text-align: center;
  }

  .el-menu--popup {
    min-width: 100px !important;
  }

  .new_undertak {
    cursor: pointer;
    color: #909399;
    font-size: 14px;
    width: 100%;
    padding: 5px 0;
    border-bottom: 1px solid #909399;
    text-align: center;
  }

  .new_undertak:hover {
    color: #000;
  }
</style>
<!--<style>-->
<!--  .el-menu-item {-->
<!--    text-align: left;-->
<!--  }-->
<!--</style>-->