安保活动备案新增活动人员，车辆按钮页面

zhongrj

2022-12-28 febb0babbb08e2ad0eaa8a28ec4591d922da1065

 src/views/security/security.vue

@@ -1,44 +1,45 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
    <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :permission="permissionList"
      :before-open="beforeOpen" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel"
      @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
      <template slot="menuLeft">
        <el-button
                   size="small"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.security_delete"
                   @click="handleDelete">删 除
        <el-button size="small" icon="el-icon-delete" plain v-if="permission.security_delete" @click="handleDelete">删 除
        </el-button>
      </template>
      <template slot-scope="{type,size,row,index}" slot="menu">
        <el-button icon="el-icon-coordinate" :size="size" :type="type" @click="handlePersonList(row)">活动人员</el-button>
        <el-button icon="el-icon-data-line" :size="size" :type="type" @click="handleCarList(row)">活动车辆</el-button>
      </template>
    </avue-crud>

    <el-drawer title="活动人员区域" :visible.sync="personBox" :append-to-body="true" size="50%">
      <securityManage />
    </el-drawer>

    <el-drawer title="活动车辆区域" :visible.sync="carBox" :append-to-body="true" size="50%">
      <securityManageCar />
    </el-drawer>
  </basic-container>
</template>

<script>
  import {getPage, getDetail, add, update, remove} from "@/api/security/security";
  import AvueMap from 'avue-plugin-map';
// import AvueMap from 'avue-plugin-map';
  import {mapGetters} from "vuex";
import securityManage from "@/views/securityManage/securityManage"
import securityManageCar from "@/views/securityManageCar/securityManageCar"

  export default {
  components: {
    securityManage,
    securityManageCar
  },
    data() {
      return {
      carBox: false,
      personBox: false,
        form: {},
        query: {},
        loading: true,
@@ -62,6 +63,7 @@
          selection: true,
          excelBtn: true,
          dialogClickModal: false,
        menuWidth: 370,
          column: [
            {
              label: "活动名称",
@@ -76,10 +78,12 @@
            {
              label: "负责人",
              prop: "person",
            width: 80
            },
            {
              label: "联系方式",
              prop: "contact",
            width: 100
            },
            {
              label: "活动地点",
@@ -100,6 +104,7 @@
              },
              search: true,
              searchSpan:4,
            width: 110,
              rules: [{
                required: true,
                message: "请选择所属辖区",
@@ -123,6 +128,7 @@
                message: "请输入开始时间",
                trigger: "blur"
              }],
            width: 120,
            },
            {
              label: "结束时间",
@@ -136,6 +142,7 @@
                message: "请输入结束时间",
                trigger: "blur"
              }],
            width: 120,
            },
            {
              label: "活动内容",
@@ -145,23 +152,24 @@
              label: "经纬度",
              prop: "position",
              type: "input",
              span: 9,
            span: 12,
              hide:true
            },
            {
              label: "",
              prop: "map",
              labelWidth: 10,
              searchSpan: 0,
              // maxlength: 5,
              hide: true,
              span: 3,
              // display:false,
              component: "AvueMap",
            },
          // {
          //   label: "",
          //   prop: "map",
          //   labelWidth: 10,
          //   searchSpan: 0,
          //   // maxlength: 5,
          //   hide: true,
          //   span: 3,
          //   // display:false,
          //   component: "AvueMap",
          // },
            {
              label: "人数",
              prop: "number",
            width: 60,
            },
            {
              label: "活动类型",
@@ -176,7 +184,8 @@
                required: true,
                message: "请选择活动类型",
                trigger: "blur"
              }]
            }],
            width: 90,
            },
          ]
        },
@@ -326,10 +335,19 @@
          this.loading = false;
          this.selectionClear();
        });
    },
    //活动人员区域点击按钮事件
    handlePersonList() {
      this.personBox = true;
    },
    //活动车辆区域点击按钮事件
    handleCarList() {
      this.carBox = true;
      }
    }
  };
</script>

<style>

</style>