epmet-work-pc/src/views/modules/base/smartExcel/index.vue

<template>
  <div class="g-main">
    <div v-show="pageType == 'list'">
      <div class="m-search">
        <el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'100px'">
          <div>
            <el-form-item label="发布组织" prop="agencyId">
              <el-cascader class="u-item-width-normal" size="small" ref="myCascader" v-model.trim="formData.agencyId"
                :options="orgOptions" :props="orgOptionProps" :show-all-levels="false" @change="handleChangeAgency"
                clearable></el-cascader>
            </el-form-item>

            <el-form-item label="任务主题" prop="eventContent">
              <el-input v-model.trim="formData.eventContent" class="u-item-width-normal" size="small" clearable
                placeholder="请输入">
              </el-input>
            </el-form-item>
            <el-form-item label="创建时间" prop="startTime">
              <el-date-picker v-model.trim="formData.startTime" :picker-options="startPickerOptions"
                class="u-item-width-daterange" size="small" type="date" value-format="yyyy-MM-dd HH:mm:ss"
                value="yyyy-MM-dd" placeholder="开始时间">
              </el-date-picker>
              <span class="u-data-tag">至</span>
              <el-date-picker v-model.trim="formData.endTime" :picker-options="endPickerOptions"
                class="u-item-width-daterange u-data-tag" size="small" type="date" value-format="yyyy-MM-dd HH:mm:ss"
                value="yyyy-MM-dd" placeholder="结束时间">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="状态" prop="status">
              <el-select class="u-item-width-normal" v-model.trim="formData.status" placeholder="请选择" size="small"
                clearable>
                <el-option v-for="item in statusArray" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-row>
              <el-col :span="24" align="right">
                <el-button style="margin-left: 30px" size="small" type="primary " @click="handleSearch">查询</el-button>
                <el-button style="margin-left: 10px" size="small" class="diy-button--white"
                  @click="resetSearch">重置</el-button>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>

      <div class="m-table">
        <div class="div_btn">
          <el-button size="small" type="primary " @click="handleAdd">新增</el-button>
        </div>
        <el-table :data="tableData" border class="m-table-item" style="width: 100%" :height="maxTableHeight">
          <el-table-column label="" fixed="left" type="selection" align="center" width="50" />
          <el-table-column label="序号" fixed="left" type="index" align="center" width="50" />

          <el-table-column prop="gridName" align="center" label="发布组织" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="categoryName" label="任务主题" min-width="140" align="center"
            :show-overflow-tooltip="true" />
          <el-table-column prop="eventContent" label="分发人数" align="center" :show-overflow-tooltip="true" width="100">
          </el-table-column>

          <el-table-column prop="responsibleName" align="center" width="100" label="任务周期" :show-overflow-tooltip="true">
          </el-table-column>

          <el-table-column prop="responsibleMobile" align="center" width="110" label="任务进度"
            :show-overflow-tooltip="true">
          </el-table-column>

          <el-table-column prop="name" align="center" width="100" label="任务状态" :show-overflow-tooltip="true">
          </el-table-column>

          <el-table-column prop="satisfactionName" align="center" width="100" label="创建人" :show-overflow-tooltip="true">
          </el-table-column>

          <el-table-column prop="happenTime" align="center" width="140" :show-overflow-tooltip="true" label="创建时间">
          </el-table-column>

          <el-table-column fixed="right" label="操作" align="center" width="200px">
            <template slot-scope="scope">
              <el-button @click=" handleInfo(scope.row)" type="text" size="small">查看</el-button>
              <!-- 取消操作需要做密码校验 -->
              <el-button @click="handleCancel(scope.row)" type="text" size="small" class="">取消</el-button>
              <!-- 取消后可进行删除 -->
              <el-button @click="handleDel(scope.row)" type="text" size="small" class="">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="pageNo" :page-sizes="[20, 50, 100, 200]" :page-size="parseInt(pageSize)"
            layout="sizes, prev, pager, next, total" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <div v-if="pageType == 'info'">
      <excel-info></excel-info>
    </div>
    <div v-if="pageType == 'add'">
      <excel-add @handleShowPage="handleShowPage"></excel-add>
    </div>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import nextTick from "dai-js/tools/nextTick";
import { mapGetters } from "vuex";
import excelInfo from "./cpts/excel-info";
import excelAdd from "./cpts/excel-add";

export default {
  components: { excelInfo,excelAdd },

  data() {
    let endDisabledDate = (time) => {
      //这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
      let nowData = Date.now();
      if (this.formData.startTime) {
        let startTime = new Date(this.formData.startTime);
        return (
          time.getTime() > nowData ||
          time.getTime() < startTime ||
          time.getTime() === startTime
        );
      } else {
        return time.getTime() > nowData;
      }
    };
    let startDisabledDate = (time) => {
      //这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
      let nowData = Date.now();
      return time.getTime() > nowData;
    };

    let orgOptionProps = {
      multiple: false,
      value: 'agencyId',
      label: 'agencyName',
      children: 'subAgencyList',
      checkStrictly: true
    }
    return {
      pageType: "list", // 列表list 新增add 详情info
      tableData: [],
      formData: {
        agencyId: '',
        eventContent: '',
        startTime: '',
        endTime: '',
        status: ''
      },
      statusArray: [
        {
          label: '1',
          value: '1'
        }, {
          label: '2',
          value: '2'
        }, {
          label: '3',
          value: '3'
        },
      ],
      orgOptionProps,
      orgOptions: [],
      pageNo: 1,
      pageSize: window.localStorage.getItem("pageSize") || 20,
      total: 1,
      sarr: [],
      endPickerOptions: {
        disabledDate: endDisabledDate,
      },
      startPickerOptions: {
        disabledDate: startDisabledDate,
      },
      searchH: 180,
    };
  },
  computed: {
    maxTableHeight() {
      const h = this.clientHeight - this.searchH - 275;
      const _h = this.clientHeight - 275 - this.searchH;
      return this.$store.state.inIframe ? h : _h;
    },
    ...mapGetters(["clientHeight"]),
  },
  watch: {
  },
  mounted() {
    this.getTableData()
    this.getOrgTreeList()
  },
  methods: {
    handleShowPage(){
      this.pageType = 'list';
    },
    handleAdd() {
      this.pageType = 'add';
      console.log(this.pageType);
    },
    handleInfo() {
      this.pageType = 'info'
    },
    handleChangeAgency(val) {
      this.sarr = []
      this.getLastItem(
        this.orgOptions,
        val,
        "agencyId"
      );
      this.level = this.sarr[this.sarr.length - 1].level
    },
    getLastItem(list, vals, key) {
      let LIST = list || [];
      for (let item of LIST) {
        // console.log(item[key]);
        for (let i of vals) {
          if (item[key] === i) {
            this.sarr.push(item);
          } else {
            this.getLastItem(item.subAgencyList, vals, key);
          }
        }
      }
    },
    getOrgTreeList() {
      this.$http
        .post('/gov/org/customeragency/agencygridtree', {})
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          } else {
            this.orgOptions = []
            this.orgOptions.push(res.data)
          }
        })
        .catch(() => {
          return this.$message.error('网络错误')
        })
    },
    handleSizeChange(val) {
      this.pageSize = val;
      window.localStorage.setItem("pageSize", val);
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getTableData();
    },
    async getTableData() {
      const url = "/governance/icEventOld/list";
      if (Array.isArray(this.formData.agencyId) && this.formData.agencyId.length) {
        if (this.level == "grid") {
          this.formData.gridId = this.formData.agencyId[this.formData.agencyId.length - 1];
          this.formData.agencyId = "";
        } else {
          this.formData.agencyId = this.formData.agencyId[this.formData.agencyId.length - 1];
          this.formData.gridId = "";
        }
      } else {
        this.formData.agencyId = "";
        this.formData.gridId = "";
      }
      const { pageSize, pageNo, formData } = this;
      const { data, code, msg } = await requestPost(url, {
        pageSize,
        pageNo,
        ...formData,
      });
      if (code === 0) {
        this.total = data.total || 0;
        this.tableData = data.list
          ? data.list.map((item) => {
            return item;
          })
          : [];
      } else {
        this.$message.error(msg);
      }
    },
    handleSearch() {
      this.pageNo = 1;
      this.getTableData();
    },
    resetSearch() {
      this.$refs.ref_searchform.resetFields();
      this.pageNo = 1;
      this.getTableData();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/modules/management/list-main.scss";

.m-search {
  .u-item-width-normal {
    width: 200px;
  }
}
</style>