CZC/operationSupport/src/views/patrolManagement/patrolRoute.vue

<template>
  <div class="main">
    <template v-if="isLook === 'index'">
      <div class="search">
        <el-input
          placeholder="请输入巡更点名称"
          class="search-input"
          clearable
          v-model="mixins_query.route_name"
        ></el-input>
        <el-select
          v-model="mixins_query.communityId"
          placeholder="请选择所属社区"
          clearable
        >
          <el-option
            v-for="(item, index) in communityArr"
            :key="index"
            :label="item.communityName"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-button
          type="primary"
          class="search-btn"
          @click="mixins_search"
          icon="el-icon-search"
        >查询</el-button>

        <div class="search-icon">
          <el-tooltip
            class="item"
            effect="light"
            placement="bottom"
            content="排班"
          >
            <i
              class="zoniot_font zoniot-icon-piliangshenhe"
              @click="weekEdit()"
            ></i>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="light"
            placement="bottom"
            content="新增"
          >
            <i
              class="zoniot_font zoniot-icon-tianjia2"
              @click="add()"
            ></i>
          </el-tooltip>
        </div>
      </div>
      <zz-table
        :cols="cols"
        :settings="{ showIndex: true, stripe: true }"
        :loading="mixins_onQuery"
        :data="mixins_list"
        :pageset="mixins_pageset"
        @page-change="pageChange"
      >
        <template
          slot-scope="scope"
          slot="startDate"
        >
          {{ checkDateType(scope.row.startDate) }}{{ '至' + checkDateType(scope.row.endDate) }}</template>
        <template
          slot-scope="scope"
          slot="periodValue"
        >{{
                    scope.row.periodType == 1 ? `每周${periodValueType(scope.row.periodValue)}` : `每隔${scope.row.periodValue}天`
                }}</template>
        <template
          slot-scope="scope"
          slot="opt"
        >
          <div class="opt">
            <!-- <el-tooltip
              effect="light"
              placement="bottom"
              content="排班"
            >
              <i
                class="zoniot_font zoniot-icon-shenhe"
                @click="schedulingEdit(scope.row)"
              ></i>
            </el-tooltip> -->
            <el-tooltip
              effect="light"
              placement="bottom"
              content="详情"
            >
              <i
                class="zoniot_font zoniot-icon-xiangqing"
                @click="details(scope.row)"
              ></i>
            </el-tooltip>
            <el-tooltip
              effect="light"
              placement="bottom"
              content="删除"
            >
              <i
                class="zoniot_font zoniot-icon-shanchu redText"
                @click="deleteOne(scope.row.id)"
              ></i>
            </el-tooltip>
          </div>
        </template>
      </zz-table>
    </template>
    <scheduling
      v-if="isLook === 'schedu'"
      @initPage="initPage"
    ></scheduling>
    <add-patrol
      v-if="isLook === 'patrol'"
      @initPage="initPage"
      :patrolDetail="patrolDetail"
      :disable='disable'
    ></add-patrol>
    <week-edit-page
      v-if="isLook === 'weekEd'"
      @initPage="initPage"
    ></week-edit-page>
  </div>
</template>

<script>
import list from '@utils/list.js';
import scheduling from './popups/scheduling.vue';
import addPatrol from './popups/addPatrol.vue';
import weekEditPage from './popups/weekEdit.vue';
export default {
  mixins: [list],
  name: 'patrolManagement',
  components: {
    scheduling,
    addPatrol,
    weekEditPage
  },
  data () {
    let _this = this;
    return {
      isLook: 'index', // index , schedu,patrol 主页 日历 添加
      communityArr: [],
      cols: [
        {
          label: '所属社区',
          prop: 'communityName'
        },
        {
          label: '巡更路线',
          prop: 'routeName'
        },
        {
          label: '巡更日期',
          prop: 'startDate',
          slot: 'startDate'
        },
        {
          label: '巡更时间',
          prop: 'timePeriod'
        },
        {
          label: '巡更周期',
          prop: 'periodValue',
          slot: 'periodValue'
        },

        {
          label: '操作',
          prop: 'id',
          slot: 'opt'
        }
      ],
      findUser: [],
      thisObj: {},
      mixins_post: 'post',
      patrolDetail: {},
      disable: ''
    };
  },
  created () {
    this.getorgTree();
    this.mixins_dataUrl = '/czc-community/patrolRoute/page';
    this.mixins_query = {};
    this.mixins_search();
    this.getUserList();
  },
  mounted () { },
  methods: {
    deleteOne (id) {
      this.$msgBox(`删除`, '删除后将无法恢复，请问是否继续?')
        .then(() => {
          this.$http.get('/czc-community/patrolRoute/delete', { id: id }).then(({ status, data, msg }) => {
            if (0 === status) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.mixins_search();
            }
          });
        })
        .catch(() => { });
    },
    getorgTree () {
      this.$http
        .get('/czc-community/assets/community/list')
        .then((data) => {
          this.communityArr = data.data;
          this.$store.commit('setAreaSelect', data.data);
        })

        .catch(function () { });
    },
    getUserList () {
      this.$http.get('/czc-user-center/user/findUserList').then(({ data, status, msg }) => {
        this.findUser = data;
      });
    },
    add () {
      this.disable = '2';
      this.patrolDetail = {};
      this.isLook = 'patrol';
    },
    details (row) {
      this.disable = '1';
      this.patrolDetail = row;
      this.isLook = 'patrol';
    },
    schedulingEdit (row) {
      this.thisObj = row;
      this.isLook = 'schedu';
    },
    weekEdit () {
      this.isLook = 'weekEd';
    },
    initPage () {
      this.isLook = 'index';
      this.thisObj = {};
      this.mixins_search();
    },
    periodValueType (value) {
      if (!!value) {
        return value.split(',').sort().toString();
      }
      return '--';
    },
    checkDateType (time) {
      return !!time ? this.$moment(new Date(time)).format('YYYY-MM-DD') : '--';
    }
  }
};
</script>
<style scoped lang='scss'>
.main {
    height: 100%;
}
</style>