电子巡更 表格渲染 分页 筛选 新增对接接口数据

.env.development

@@ -2,4 +2,4 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = ''
+VUE_APP_BASE_API = 'http://172.16.120.25:8080'

mock/utils.js

@@ -3,23 +3,23 @@
  * @returns {Object}
  */
 function param2Obj(url) {
-  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
-  if (!search) {
-    return {}
-  }
-  const obj = {}
-  const searchArr = search.split('&')
-  searchArr.forEach(v => {
-    const index = v.indexOf('=')
-    if (index !== -1) {
-      const name = v.substring(0, index)
-      const val = v.substring(index + 1, v.length)
-      obj[name] = val
+    const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
+    if (!search) {
+        return {}
     }
-  })
-  return obj
+    const obj = {}
+    const searchArr = search.split('&')
+    searchArr.forEach(v => {
+        const index = v.indexOf('=')
+        if (index !== -1) {
+            const name = v.substring(0, index)
+            const val = v.substring(index + 1, v.length)
+            obj[name] = val
+        }
+    })
+    return obj
 }
 
 module.exports = {
-  param2Obj
-}
+    param2Obj
+}

package.json

@@ -45,6 +45,7 @@
         "eslint-plugin-vue": "6.2.2",
         "html-webpack-plugin": "3.2.0",
         "mockjs": "1.0.1-beta3",
+        "qs": "^6.9.6",
         "runjs": "4.3.2",
         "sass": "1.26.8",
         "sass-loader": "8.0.2",

src/api/partol.js

@@ -1,25 +1,17 @@
 import request from '@/utils/request'
+
 //queryJson: 
-export function getList(query, current = 1, page_size = 10, V_LOGINNAME = 'admin', V_PASSWORD = '123456') {
-    // query.queryJson = { "V_LOGINNAME": "admin", "V_PASSWORD": "e10adc3949ba59abbe56e057f20f883e" };
+export function getList(query, pageNo = 1, pageSize = 20) {
     return request({
 
-        // url: '/Device_Manager/companyManagement/queryCompanyList',  
-        // method: 'post',
-
-        // url: '/time',
-        // method: 'get',
-
         url: '/electronic_patrol/getElectronicPatrolList',
         method: 'post',
 
-
-        // params
         data: {
 
-            ...query,
-            current,
-            page_size
+            ...query, //查询条件
+            pageNo, //当前页
+            pageSize //每页多少条
         }
     })
 }

src/main.js

@@ -49,4 +49,9 @@ new Vue({
     router,
     store,
     render: h => h(App)
-})
+})
+
+// Vue.http.options.emulateJSON = true;
+// Vue.http.options.headers = {
+//     'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+// };

src/router/index.js

@@ -201,7 +201,7 @@ export const constantRoutes = [{
                 path: 'elect-partol',
                 component: () =>
                     import ('@/views/patrol/elect-partol/index'),
-                name: 'Menu4',
+                name: 'elect-partol',
                 meta: { title: '电子巡更', icon: 'elect' }
             },
             {

src/utils/request.js

@@ -2,17 +2,23 @@ import axios from 'axios'
 import { MessageBox, Message } from 'element-ui'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
+import qs from 'qs'
 
 // create an axios instance
 const service = axios.create({
     baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
     // withCredentials: true, // send cookies when cross-domain requests
-    timeout: 5000 // request timeout
+    timeout: 5000, // request timeout
+    headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    }
 })
 
 // request interceptor
 service.interceptors.request.use(
     config => {
+
+        config.data = qs.stringify(config.data);
         // do something before request is sent
 
         if (store.getters.token) {

src/views/patrol/elect-partol/edit.vue

@@ -0,0 +1,323 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="visible"
+    :before-close="handleClose"
+    width="60%"
+  >
+    <el-form
+      ref="formData"
+      :model="formData"
+      label-position="right"
+      status-icon
+    >
+      <el-row :gutter="10">
+        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12"
+          ><div class="grid-content bg-purple">
+            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="device_name">
+              <el-input
+                v-model="formData.device_name"
+                autocomplete="off"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="设备编号:" :label-width="formLabelWidth" prop="device_code">
+              <el-select
+                v-model="formData.device_code"
+                placeholder=""
+                style="width: 100%"
+              >
+                <el-option label="一" value="1"></el-option>
+                <el-option label="二" value="2"></el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="巡更计划:" :label-width="formLabelWidth" prop="patrol_plan_name">
+              <el-select
+                v-model="formData.patrol_plan_name"
+                placeholder=""
+                style="width: 100%"
+              >
+                <el-option label="计划一" value="1"></el-option>
+                <el-option label="计划二" value="2"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="开始时间:" :label-width="formLabelWidth" prop="start_time">
+              <el-date-picker
+                style="width: 100%"
+                v-model="formData.start_time"
+                type="datetime"
+                placeholder="选择日期时间"
+                align="right"
+                format="yyyy-MM-dd HH:mm:ss"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                :picker-options="pickerOptions3"
+              ></el-date-picker>
+            </el-form-item>
+            <el-form-item label="结束时间:" :label-width="formLabelWidth" prop="end_time">
+              <el-date-picker
+                style="width: 100%"
+                v-model="formData.end_time"
+                type="datetime"
+                placeholder="选择日期时间"
+                align="right"
+                format="yyyy-MM-dd HH:mm:ss"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                :picker-options="pickerOptions4"
+              >
+              </el-date-picker>
+            </el-form-item></div
+        ></el-col>
+        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12"
+          ><div class="grid-content bg-purple">
+            <el-form-item label="巡更周期:" :label-width="formLabelWidth" prop="patrol_plan_cycle">
+              <el-checkbox
+                :indeterminate="isIndeterminate"
+                v-model="patrol_plan_cycle"
+                @change="handleCheckAllChange"
+                >全选</el-checkbox
+              >
+              <div style="margin: 10px 0"></div>
+              <el-checkbox-group
+                v-model="checkedCities"
+                @change="handleCheckedCitiesChange"
+              >
+                <el-checkbox v-for="city in cities" :label="city" :key="city">{{
+                  city
+                }}</el-checkbox>
+              </el-checkbox-group>
+            </el-form-item>
+
+            <el-form-item
+              label="开始日期:"
+              :label-width="formLabelWidth"
+              style="margin-top: 0px"
+              prop="start_date"
+            >
+              <el-date-picker
+                style="width: 100%"
+                v-model="formData.start_date"
+                type="datetime"
+                placeholder="选择日期时间"
+                align="right"
+                format="yyyy-MM-dd HH:mm:ss"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                :picker-options="pickerOptions1"
+              >
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item label="结束日期:" :label-width="formLabelWidth" prop="end_date">
+              <el-date-picker
+                style="width: 100%"
+                v-model="formData.end_date"
+                type="datetime"
+                placeholder="选择日期时间"
+                align="right"
+                format="yyyy-MM-dd HH:mm:ss"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                :picker-options="pickerOptions2"
+              >
+              </el-date-picker>
+            </el-form-item></div
+        ></el-col>
+      </el-row>
+
+      <el-table
+        :data="tableData2"
+        stripe
+        border
+        :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
+        style="width: 100%"
+        id="out-table"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="40"> </el-table-column>
+
+        <el-table-column prop="order" label="序号"> </el-table-column>
+        <el-table-column prop="cameraName" label="摄像头名称">
+        </el-table-column>
+        <el-table-column prop="company" label="摄像头所属单位">
+        </el-table-column>
+        <el-table-column prop="cameraPosition" label="摄像头位置">
+        </el-table-column>
+      </el-table>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleClose" style="background: #f6f6f6"
+        >关 闭</el-button
+      >
+      <el-button type="primary" @click="submitForm('formData')"
+        >保 存</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+<script>
+const cityOptions = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
+
+export default {
+  name: "edit",
+  props: {
+    title: {//弹框的标题
+      type: String,
+      default: "",
+    },
+    visible: {//弹框窗口，true弹出
+      type: Boolean,
+      default: false,
+    },
+    remoteClose:Function ,//用于关闭窗口
+    formData:{ //提交表单数据
+        type:Object,
+        default:{}
+
+    }
+  },
+  data() {
+    return {
+      tableData2: [
+        {
+          order: "1",
+          cameraName: "摄像头A",
+          company: "上海永天科技",
+          cameraPosition: "三楼大厅西南角",
+        },
+        {
+          order: "2",
+          cameraName: "摄像头B",
+          company: "虹泾总部",
+          cameraPosition: "一楼大厅大门处",
+        },
+      ],
+      multipleSelection: [],
+
+      options2: [
+        {
+          value: "1",
+          label: "角色1",
+        },
+        {
+          value: "2",
+          label: "角色2",
+        },
+        {
+          value: "3",
+          label: "角色3",
+        },
+      ],
+      value2: "",
+
+      options3: [
+        {
+          value: "1",
+          label: "单位名称1",
+        },
+        {
+          value: "2",
+          label: "单位名称2",
+        },
+        {
+          value: "3",
+          label: "单位名称3",
+        },
+      ],
+      value3: "",
+
+      input: "",
+
+      
+      formLabelWidth: "120px",
+
+      // 全选
+      checkAll: false,
+      checkedCities: ["周一", "周五"],
+      cities: cityOptions,
+      isIndeterminate: true,
+
+      //日期时间选择器
+      formData: {
+        start_date: "",
+        end_date: "",
+        start_time: "",
+        end_time: "",
+      },
+      pickerOptions1: {
+        disabledDate: (time) => {
+          if (this.formData.end_date) {
+            return (
+              time.getTime() < Date.now() - 8.64e7 ||
+              time.getTime() > new Date(this.formData.end_date).getTime()
+            );
+          } else {
+            return time.getTime() < Date.now() - 8.64e7;
+          }
+        },
+      },
+      pickerOptions2: {
+        disabledDate: (time) => {
+          if (this.formData.start_date) {
+            return (
+              time.getTime() < Date.now() - 8.64e7 ||
+              time.getTime() < new Date(this.formData.start_date).getTime()
+            );
+          } else {
+            return time.getTime() < Date.now() - 8.64e7;
+          }
+        },
+      },
+
+      pickerOptions3: {
+        disabledDate: (time) => {
+          if (this.formData.end_date) {
+            return (
+              time.getTime() < Date.now() - 8.64e7 ||
+              time.getTime() > new Date(this.formData.end_date).getTime()
+            );
+          } else {
+            return time.getTime() < Date.now() - 8.64e7;
+          }
+        },
+      },
+      pickerOptions4: {
+        disabledDate: (time) => {
+          if (this.formData.start_date) {
+            return (
+              time.getTime() < Date.now() - 8.64e7 ||
+              time.getTime() < new Date(this.formData.start_date).getTime()
+            );
+          } else {
+            return time.getTime() < Date.now() - 8.64e7;
+          }
+        },
+      },
+    };
+  },
+  methods: {
+    // 全选
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? cityOptions : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.cities.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.cities.length;
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    //关闭窗口
+    handleClose() {
+        //将表单清空
+        this.$refs['formData'].resetFields()
+        //注意不可以通过this.visiable=false来关闭，因为他是父组件的属性
+      this.remoteClose()
+    },
+
+    //提交表单数据
+    submitForm(formName) {
+      this.$emit("update:visible", false);
+    },
+  },
+};
+</script>

src/views/patrol/elect-partol/index.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <div class="filter-left">
+      <div class="filter-left" :model="query">
         <div class="filter-item">
-          电子巡更名称:
+          巡更计划名称:
           <el-input
-            v-model="input"
+            v-model.trim="query.patrol_plan_name"
             placeholder=""
             style="width: 150px"
           ></el-input>
         </div>
         <div class="filter-item">
           执行设备:
-          <el-select v-model="value" placeholder="" style="width: 150px">
+          <el-select v-model="query.device_name" placeholder="" style="width: 150px" clearable >
             <el-option
               v-for="item in options"
               :key="item.value"
@@ -23,7 +23,7 @@
           </el-select>
         </div>
 
-        <el-button type="primary" icon="el-icon-search" class="search-button"
+        <el-button type="primary" icon="el-icon-search" class="search-button" @click="queryData"
           >搜索</el-button
         >
       </div>
@@ -32,7 +32,7 @@
         <el-button
           icon="el-icon-plus"
           type="success"
-          @click="dialogFormVisible = true"
+          @click="openAdd"
           >新增</el-button
         >
         <el-button icon="el-icon-delete" type="danger" @click="batchDelete"
@@ -46,6 +46,8 @@
     </div>
 
     <el-divider></el-divider>
+    <!-- <div>{{page.total}}</div>
+    <div>{{list}}</div> -->
     <el-table
       :data="list"
       stripe
@@ -68,13 +70,13 @@
       </el-table-column>
       <el-table-column label="巡更开始时间" width="200">
         <template slot-scope="{ row }">
-          <div>{{ row.startDate }} {{ row.startTime }}</div>
+          <div>{{ row.startDate }} {{ row.start_date }}</div>
         </template>
       </el-table-column>
 
       <el-table-column prop="endDate" label="巡更结束时间" width="200">
         <template slot-scope="{ row }">
-          <div>{{ row.endDate }} {{ row.endTime }}</div>
+          <div>{{ row.endDate }} {{ row.end_date }}</div>
         </template>
       </el-table-column>
 
@@ -105,155 +107,20 @@
       </el-table-column>
     </el-table>
 
-    <el-pagination background layout="prev, pager, next" :total="1000">
+    <el-pagination
+
+      background
+      @current-change="handleCurrentChange"
+      :current-page="page.pageNo"
+      :page-size="1"
+      layout="prev, pager, next"
+      :total="page.total">
     </el-pagination>
 
-    <el-dialog title="新增" :visible.sync="dialogFormVisible" width="60%">
-      <el-form :model="form">
-        <el-row :gutter="10">
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12"
-            ><div class="grid-content bg-purple">
-              <el-form-item label="电子巡更名称:" :label-width="formLabelWidth">
-                <el-input v-model="form.name" autocomplete="off"></el-input>
-              </el-form-item>
-
-              <el-form-item
-                label="所属建筑/项目:"
-                :label-width="formLabelWidth"
-              >
-                <el-select
-                  v-model="form.region"
-                  placeholder=""
-                  style="width: 100%"
-                >
-                  <el-option label="项目一" value="1"></el-option>
-                  <el-option label="项目二" value="2"></el-option>
-                </el-select>
-              </el-form-item>
-
-              <el-form-item label="执行设备:" :label-width="formLabelWidth">
-                <el-select
-                  v-model="form.region2"
-                  placeholder=""
-                  style="width: 100%"
-                >
-                  <el-option label="设备一" value="3"></el-option>
-                  <el-option label="设备二" value="4"></el-option>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="巡更开始时间:" :label-width="formLabelWidth">
-                <el-date-picker
-                  style="width: 100%"
-                  v-model="formDaliog.startTime2"
-                  type="datetime"
-                  placeholder="选择日期时间"
-                  align="right"
-                  format="yyyy-MM-dd HH:mm:ss"
-                  value-format="yyyy-MM-dd HH:mm:ss"
-                  :picker-options="pickerOptions3"
-                ></el-date-picker>
-              </el-form-item>
-              <el-form-item label="巡更结束时间:" :label-width="formLabelWidth">
-                <el-date-picker
-                  style="width: 100%"
-                  v-model="formDaliog.endTime2"
-                  type="datetime"
-                  placeholder="选择日期时间"
-                  align="right"
-                  format="yyyy-MM-dd HH:mm:ss"
-                  value-format="yyyy-MM-dd HH:mm:ss"
-                  :picker-options="pickerOptions4"
-                >
-                </el-date-picker>
-              </el-form-item></div
-          ></el-col>
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12"
-            ><div class="grid-content bg-purple">
-              <el-form-item label="周期:" :label-width="formLabelWidth">
-                <el-checkbox
-                  :indeterminate="isIndeterminate"
-                  v-model="checkAll"
-                  @change="handleCheckAllChange"
-                  >全选</el-checkbox
-                >
-                <div style="margin: 10px 0"></div>
-                <el-checkbox-group
-                  v-model="checkedCities"
-                  @change="handleCheckedCitiesChange"
-                >
-                  <el-checkbox
-                    v-for="city in cities"
-                    :label="city"
-                    :key="city"
-                    >{{ city }}</el-checkbox
-                  >
-                </el-checkbox-group>
-              </el-form-item>
-
-              <el-form-item
-                label="执行开始日期:"
-                :label-width="formLabelWidth"
-                style="margin-top: 0px"
-              >
-                <el-date-picker
-                  style="width: 100%"
-                  v-model="formDaliog.startTime"
-                  type="datetime"
-                  placeholder="选择日期时间"
-                  align="right"
-                  format="yyyy-MM-dd HH:mm:ss"
-                  value-format="yyyy-MM-dd HH:mm:ss"
-                  :picker-options="pickerOptions1"
-                >
-                </el-date-picker>
-              </el-form-item>
-              <el-form-item label="执行结束日期:" :label-width="formLabelWidth">
-                <el-date-picker
-                  style="width: 100%"
-                  v-model="formDaliog.endTime"
-                  type="datetime"
-                  placeholder="选择日期时间"
-                  align="right"
-                  format="yyyy-MM-dd HH:mm:ss"
-                  value-format="yyyy-MM-dd HH:mm:ss"
-                  :picker-options="pickerOptions2"
-                >
-                </el-date-picker>
-              </el-form-item></div
-          ></el-col>
-        </el-row>
-
-        <el-table
-          :data="tableData2"
-          stripe
-          border
-          :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
-          style="width: 100%"
-          id="out-table"
-          @selection-change="handleSelectionChange"
-        >
-          <el-table-column type="selection" width="40"> </el-table-column>
-
-          <el-table-column prop="order" label="序号"> </el-table-column>
-          <el-table-column prop="cameraName" label="摄像头名称">
-          </el-table-column>
-          <el-table-column prop="company" label="摄像头所属单位">
-          </el-table-column>
-          <el-table-column prop="cameraPosition" label="摄像头位置">
-          </el-table-column>
-        </el-table>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button
-          @click="dialogFormVisible = false"
-          style="background: #f6f6f6"
-          >关 闭</el-button
-        >
-        <el-button type="primary" @click="dialogFormVisible = false"
-          >保 存</el-button
-        >
-      </div>
-    </el-dialog>
+
+    
+
+    <edit :title="edit.title " :visible="edit.visible" :formData="edit.formData" :remoteClose="remoteClose"/>
 
     <!-- 视频详情弹框 start -->
     <el-dialog
@@ -271,72 +138,47 @@
 
 
 <script>
-//aa 1：引入api文件
-import { getList } from "@/api/partol";
-
-//import { renderTime } from '@/utils';
+import { renderTime } from "@/utils";
 
 // 引入导出Excel表格依赖
 import FileSaver from "file-saver";
 import XLSX from "xlsx";
 
-const cityOptions = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
+// console.log(flexible);
+// console.log(renderTime);
+
+//aa 1：引入api文件
+import { getList } from "@/api/partol";
+
+import edit from "./edit";
+
+
 
 export default {
-  name: "javascriptthree",
+  components: {
+    edit
+
+  },
+  name: "elect-partol",
   data() {
     return {
-      //aa 2：声明变量
       page: {
-        current: 1,
-        size: 20,
+        //分页对象
+        pageNo: 1,
+        pageSize: 1,
         total: 0,
       },
+      // query: {"demo":1}, //查询条件
       query: {},
-      list: [],
+      list: [], //列表数据
+
+
+      //视频弹框
+      dialogVideoDetailVisible: false,
+
+             dialogFormVisible: false,
 
-      tableData: [
-        {
-          electName: "电子巡更名称1",
-          period: "周一、周二、周三、周四、周五、周六、周日",
-          execuDate: "2020-09-15 12:20:12",
-          patrolTime: "9：00-10：00",
-          device: "摄像机1",
-          video: "查看",
-        },
-        {
-          electName: "电子巡更名称2",
-          period: "周一、周二、周三、周四、周五",
-          execuDate: "2020-09-15 12:20:12",
-          patrolTime: "9：00-10：00",
-          device: "摄像机2",
-          video: "查看",
-        },
-        {
-          electName: "电子巡更名称3",
-          period: "周日",
-          execuDate: "2020-09-15 12:20:12",
-          patrolTime: "9：00-10：00",
-          device: "摄像机3",
-          video: "查看",
-        },
-      ],
 
-      tableData2: [
-        {
-          order: "1",
-          cameraName: "摄像头A",
-          company: "上海永天科技",
-          cameraPosition: "三楼大厅西南角",
-        },
-        {
-          order: "2",
-          cameraName: "摄像头B",
-          company: "虹泾总部",
-          cameraPosition: "一楼大厅大门处",
-        },
-      ],
-      multipleSelection: [],
 
       options: [
         {
@@ -354,119 +196,13 @@ export default {
       ],
       value: "",
 
-      options2: [
-        {
-          value: "1",
-          label: "角色1",
-        },
-        {
-          value: "2",
-          label: "角色2",
-        },
-        {
-          value: "3",
-          label: "角色3",
-        },
-      ],
-      value2: "",
-
-      options3: [
-        {
-          value: "1",
-          label: "单位名称1",
-        },
-        {
-          value: "2",
-          label: "单位名称2",
-        },
-        {
-          value: "3",
-          label: "单位名称3",
-        },
-      ],
-      value3: "",
-
-      input: "",
-
-      dialogFormVisible: false,
-      form: {
-        name: "",
-        region: "",
-        region2: "",
-        date1: "",
-        date2: "",
-        delivery: false,
-        type: [],
-        resource: "",
-        desc: "",
-      },
-      formLabelWidth: "120px",
-
-      //视频弹框
-      dialogVideoDetailVisible: false,
-
-      // 全选
-      checkAll: false,
-      checkedCities: ["周一", "周五"],
-      cities: cityOptions,
-      isIndeterminate: true,
-
-      //日期时间选择器
-      formDaliog: {
-        startTime: "",
-        endTime: "",
-        startTime2: "",
-        endTime2: "",
-      },
-      pickerOptions1: {
-        disabledDate: (time) => {
-          if (this.formDaliog.endTime) {
-            return (
-              time.getTime() < Date.now() - 8.64e7 ||
-              time.getTime() > new Date(this.formDaliog.endTime).getTime()
-            );
-          } else {
-            return time.getTime() < Date.now() - 8.64e7;
-          }
-        },
-      },
-      pickerOptions2: {
-        disabledDate: (time) => {
-          if (this.formDaliog.startTime) {
-            return (
-              time.getTime() < Date.now() - 8.64e7 ||
-              time.getTime() < new Date(this.formDaliog.startTime).getTime()
-            );
-          } else {
-            return time.getTime() < Date.now() - 8.64e7;
-          }
-        },
-      },
+      edit:{
+        title:'',
+        visible:false,
+        formData:{}
+      }
 
-      pickerOptions3: {
-        disabledDate: (time) => {
-          if (this.formDaliog.endTime) {
-            return (
-              time.getTime() < Date.now() - 8.64e7 ||
-              time.getTime() > new Date(this.formDaliog.endTime).getTime()
-            );
-          } else {
-            return time.getTime() < Date.now() - 8.64e7;
-          }
-        },
-      },
-      pickerOptions4: {
-        disabledDate: (time) => {
-          if (this.formDaliog.startTime) {
-            return (
-              time.getTime() < Date.now() - 8.64e7 ||
-              time.getTime() < new Date(this.formDaliog.startTime).getTime()
-            );
-          } else {
-            return time.getTime() < Date.now() - 8.64e7;
-          }
-        },
-      },
+      
     };
   },
 
@@ -476,6 +212,34 @@ export default {
   },
 
   methods: {
+    //aa 3请求接口
+    fetchData() {
+      getList(this.query, this.page.pageNo, this.page.pageSize).then(
+        (response) => {
+          console.log(response);
+
+          // 列表数据
+          this.list = response.pageList;
+          this.page.total = response.totalCount;
+        }
+      );
+    },
+
+    //当页码改变后触发到此方法  val是当前点击到的那个页码
+    handleCurrentChange(val) {
+      this.page.pageNo = val;
+      this.fetchData();
+    },
+
+    //条件查询
+    queryData(){
+      //将页码 变为1，第一页
+      this.page.pageNo=1 ;
+      this.fetchData()
+
+    },
+
+
     //时间格式化2021-01-21T05:53:00.000+0000
     renderTime(date) {
       var dateee = new Date(date).toJSON();
@@ -485,17 +249,6 @@ export default {
         .replace(/\.[\d]{3}Z/, "");
     },
 
-    //aa 3请求接口
-    fetchData() {
-      getList(this.query, this.page.current, this.page.size).then(
-        (response) => {
-          this.list = response.pageList;
-          //  this.page.total=response.data.total;
-          console.log(response);
-        }
-      );
-    },
-
     //定义导出Excel表格事件
     exportExcel() {
       /* 从表生成工作簿对象 */
@@ -535,7 +288,7 @@ export default {
             type: "success",
             message: "删除成功!",
           });
-          this.tableData.splice(index, 1);
+          this.list.splice(index, 1);
         })
         .catch(() => {
           this.$message({
@@ -544,7 +297,6 @@ export default {
           });
         });
     },
-
     batchDelete() {
       let multData = this.multipleSelection;
       let tableData = this.tableData;
@@ -565,17 +317,25 @@ export default {
       this.multipleSelection = val;
     },
 
-    // 全选
-    handleCheckAllChange(val) {
-      this.checkedCities = val ? cityOptions : [];
-      this.isIndeterminate = false;
-    },
-    handleCheckedCitiesChange(value) {
-      let checkedCount = value.length;
-      this.checkAll = checkedCount === this.cities.length;
-      this.isIndeterminate =
-        checkedCount > 0 && checkedCount < this.cities.length;
+//子组件会触发此事件方法来关闭窗口
+    remoteClose(){
+       this.edit.formData={}
+      this.edit.visible=false
+      this.fetchData()
     },
+//打开新增窗口
+    openAdd(){
+      this.edit.visible=true ;
+      this.edit.title='新增'
+
+    }
+
+
+
+
+
+
+    
   },
 };
 </script>

vue.config.js

@@ -41,16 +41,16 @@ module.exports = {
         // before: require('./mock/mock-server.js'),ç
 
         //解决跨越问题
-        proxy: {
-            [process.env.VUE_APP_BASE_API]: {
-                target: 'http://172.16.120.25:8080',
-                //target: "https://devapimeeting.talkmed.com",
-                changeOrigin: true,
-                pathRewrite: {
-                    ['^' + process.env.VUE_APP_BASE_API]: ''
-                }
-            }
-        },
+        // proxy: {
+        //     [process.env.VUE_APP_BASE_API]: {
+        //         target: 'http://172.16.120.25:8080',
+        //         // target: "https://devapimeeting.talkmed.com",
+        //         changeOrigin: true,
+        //         pathRewrite: {
+        //             ['^' + process.env.VUE_APP_BASE_API]: ''
+        //         }
+        //     }
+        // },
     },
     configureWebpack: {
         // provide the app's title in webpack's name field, so that