整体更改

liuyg

2021-08-17 6bb5ac166f1ec6a1daeb56689fa2bc21035da9f4

整体更改

 src/api/recordOur/cancellationOfFiling.js

New file
@@ -0,0 +1,30 @@
import request from '@/router/axios';


export const add = (row) => {
    return request({
        url: '/api/revoke/save',
        method: 'post',
        data: row
    })
}

export const adds = (row) => {
    return request({
        url: '/api/revoke/revokesave',
        method: 'post',
        data: row
    })
}


export const selectIn = (cardid, ptype) => {
    return request({
        url: '/api/revoke/selectIn',
        method: 'post',
        params: {
            cardid,
            ptype
        }
    })
}

 src/api/recordOur/crossRegion.js

New file
@@ -0,0 +1,30 @@
import request from '@/router/axios';


export const add = (row) => {
    return request({
        url: '/api/recordk/save',
        method: 'post',
        data: row
    })
}

export const adds = (row) => {
    return request({
        url: '/api/recordk/recorkstorage',
        method: 'post',
        data: row
    })
}


export const selectIn = (cardid, ptype) => {
    return request({
        url: '/api/recordk/selectIn',
        method: 'post',
        params: {
            cardid,
            ptype
        }
    })
}

 src/api/recordOur/securityGuard.js

New file
@@ -0,0 +1,30 @@
import request from '@/router/axios';


export const add = (row) => {
    return request({
        url: '/api/record/save',
        method: 'post',
        data: row
    })
}

export const adds = (row) => {
    return request({
        url: '/api/record/rocordsave',
        method: 'post',
        data: row
    })
}


export const selectIn = (cardid, ptype) => {
    return request({
        url: '/api/record/selectIn',
        method: 'post',
        params: {
            cardid,
            ptype
        }
    })
}

 src/api/recordOur/securityTraining.js

New file
@@ -0,0 +1,30 @@
import request from '@/router/axios';


export const add = (row) => {
    return request({
        url: '/api/record/save',
        method: 'post',
        data: row
    })
}

export const adds = (row) => {
    return request({
        url: '/api/record/rocordsave',
        method: 'post',
        data: row
    })
}


export const selectIn = (cardid, ptype) => {
    return request({
        url: '/api/record/selectIn',
        method: 'post',
        params: {
            cardid,
            ptype
        }
    })
}

 src/components/Approval/Approval.vue

New file
@@ -0,0 +1,214 @@
<template>
  <div v-if="ApprovalShow">
    <slot name="close"></slot>
    <basic-container class="Approval">
      <avue-crud
        :option="option1"
        :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"
        :row-style="rowStyle"
      >
        <template class="tdtype" slot-scope="{ row }" slot="type">
          <el-tag class="dtype">
            {{
              row.type == "0" ? "通过" : row.type == "1" ? "不通过" : "待审核"
            }}
            <i class="gz" v-if="row.type == '0'"></i>
            <i class="yj" v-if="row.type == '1'"></i>
            <i class="zc" v-if="row.type == '2'"></i>
          </el-tag>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import {
  getDetail,
  getList,
  getListre,
  getListrek,
  getListrev,
} from "@/api/permit/permit";
import { mapGetters } from "vuex";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapGetters(["ApprovalShow", "userInfo"]),
  },
  data() {
    return {
      data: [],
      query: {},
      loading: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      option1: {
        delBtn: false,
        editBtn: false,
        addBtn: false,
        height: "auto",
        calcHeight: 260,
        tip: false,
        searchShow: true,
        searchMenuSpan: 8,
        labelWidth: 130,
        headerAlign: "center",
        align: "center",
        border: true,
        index: true,
        viewBtn: true,
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: "企业名称",
            prop: "enterprisename",
            labelWidth: 160,
            span: 12,
            rules: [
              {
                required: true,
                message: "请输入企业名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "许可类型",
            prop: "ptype",
            type: "select",
            dicData: [
              {
                label: "保安服务公司许可申请",
                value: "0",
              },
              {
                label: "自招保安单位备案",
                value: "1",
              },
              {
                label: "保安培训公司备案",
                value: "2",
              },
              {
                label: "跨区域经营备案",
                value: "3",
              },
              {
                label: "自招保安单位备案撤销",
                value: "6",
              },
            ],
          },
          {
            label: "审批意见",
            prop: "approve",
          },
          {
            label: "提交时间",
            prop: "permitime",
            addDisplay: false,
            type: "date",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
          },
          {
            label: "审核状态",
            prop: "type",
            addDisplay: false,
            type: "select",
            dicData: [
              {
                label: "通过",
                value: "0",
              },
              {
                label: "不通过",
                value: "1",
              },
              {
                label: "待审核",
                value: "2",
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then((res) => {
          this.form = res.data.data;
        });
      }
      done();
    },
    onLoad(page, params = {}) {
      this.loading = true;
      //   console.log(this.userInfo);
      params["cardid"] = this.userInfo.Id;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        getListre(
          page.currentPage,
          page.pageSize,
          Object.assign(params, this.query)
        ).then((ress) => {
          this.data = this.data.concat(ress.data.data.records);
        });
        getListrek(
          page.currentPage,
          page.pageSize,
          Object.assign(params, this.query)
        ).then((resk) => {
          this.data = this.data.concat(resk.data.data.records);
        });
        getListrev(
          page.currentPage,
          page.pageSize,
          Object.assign(params, this.query)
        ).then((resv) => {
          this.data = this.data.concat(resv.data.data.records);
        });
      });
    },
  },
};
</script>

<style>
</style>

 src/components/attach/attach.vue

New file
@@ -0,0 +1,417 @@
<template>
  <basic-container class="hasButTwo">
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      @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
          type="primary"
          size="small"
          plain
          icon="el-icon-upload2"
          @click="handleUpload"
          >上 传
        </el-button>
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button
          type="text"
          icon="el-icon-download"
          size="small"
          v-if="permission.attach_download"
          @click="handleDownload(scope.row)"
          >下载222
        </el-button>
        <el-button
          type="text"
          icon="el-icon-picture-outline-round"
          size="small"
          v-show="!fileFormat(scope.row)"
          @click="seeImages(scope.row)"
          >预览
        </el-button>
      </template>
      <template slot-scope="{ row }" slot="attachSize">
        <el-tag>{{ `${row.attachSize} KB` }}</el-tag>
      </template>
    </avue-crud>
    <el-dialog
      title="附件管理"
      append-to-body
      :visible.sync="attachBox"
      width="555px"
    >
      <avue-form
        ref="form"
        :option="attachOption"
        v-model="attachForm"
        :upload-after="uploadAfter"
      >
      </avue-form>
    </el-dialog>

    <el-dialog
      title="预览"
      append-to-body
      :visible.sync="imgSee"
      class="see-img-box"
    >
      <div class="img" :style="{ background: imgUrl }"></div>
    </el-dialog>
  </basic-container>
</template>

<script>
import { getList, getDetail, remove } from "@/api/resource/attach";
import { mapGetters } from "vuex";

export default {
  props: ["type"],
  data() {
    var type = this.type;
    var deptid = this.$route.query.deptId;
    var cardid = this.$store.getters.userInfo.Id;
    return {
      form: {},
      query: {},
      putParam: "",
      loading: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      attachBox: false,
      selectionList: [],
      option: {
        height: "auto",
        calcHeight: 30,
        tip: false,
        searchShow: true,
        menu: false,
        height: 323,
        searchMenuSpan: 6,
        border: false,
        index: true,
        stripe: true,
        viewBtn: true,
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: "附件地址",
            prop: "link",
            rules: [
              {
                required: true,
                message: "请输入附件地址",
                trigger: "blur",
              },
            ],
          },
          {
            label: "附件域名",
            prop: "domain",
            search: true,
            rules: [
              {
                required: true,
                message: "请输入附件域名",
                trigger: "blur",
              },
            ],
          },
          {
            label: "附件名称",
            prop: "name",
            search: true,
            rules: [
              {
                required: true,
                message: "请输入附件名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "附件原名",
            prop: "originalName",
            search: true,
            rules: [
              {
                required: true,
                message: "请输入附件原名",
                trigger: "blur",
              },
            ],
          },
          {
            label: "附件拓展名",
            prop: "extension",
            rules: [
              {
                required: true,
                message: "请输入附件拓展名",
                trigger: "blur",
              },
            ],
          },
          {
            label: "附件大小",
            prop: "attachSize",
            slot: true,
            rules: [
              {
                required: true,
                message: "请输入附件大小",
                trigger: "blur",
              },
            ],
          },
          {
            label: "预览",
            prop: "link",
            slot: true,
            dataType: "string",
            type: "img",
          },
        ],
      },
      data: [],
      attachForm: {},
      attachOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          //   {
          //     label: "附件上传",
          //     prop: "attachFile",
          //     type: "upload",
          //     drag: true,
          //     loadText: "模板上传中，请稍等",
          //     span: 24,
          //     propsHttp: {
          //       res: "data",
          //     },
          //     action:
          //     "/api/blade-resource/oss/endpoint/put-file-attach?deptid=&type=0"
          //     //   "/api/blade-resource/oss/endpoint/put-file-attach?type=" +
          //     //   type +
          //     //   "&deptid=" +
          //     //   deptid,
          //   },
          {
            label: "拖拽上传",
            prop: "imgUrl5",
            type: "upload",
            span: 12,
            drag: true,
            propsHttp: {
              res: "data",
            },
            tip: "只能上传jpg/png文件，且不超过500kb",
            action:
              "/api/blade-resource/oss/endpoint/put-file-attach?deptid=&type=" +
              type +
              "&cardid=" +
              cardid,
          },
        ],
      },
      imgSee: false,
      imgUrl: "",
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: this.vaildData(this.permission.attach_delete, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  mounted() {
    var flag = false,
      i = 0,
      ind = null;
    this.$store.state.tags.tagList.forEach((item, index) => {
      if (item.label == "附件上传") {
        if (flag == false) {
          ind = index;
          flag = true;
        }
        i++;
      }
    });
    if (i > 1) {
      this.$store.state.tags.tagList.splice(ind, 1);
    }
  },
  methods: {
    handleUpload() {
      this.attachBox = true;
    },
    uploadAfter(res, done, loading, column) {
      window.console.log(column);
      this.attachBox = false;
      this.refreshChange();
      done();
    },
    handleDownload(row) {
      window.open(`${row.link}`);
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then((res) => {
          this.form = res.data.data;
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      params.type = this.type;
      params.deptid = "";
      params.cardid = this.$store.getters.userInfo.Id;
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },

    seeImages(row) {
      this.imgUrl = "";
      this.imgUrl = "url(" + row.link + ") center center / contain no-repeat";

      this.imgSee = true;
    },

    fileFormat(row) {
      var index = row.link.lastIndexOf(".");
      var ext = row.link.substr(index + 1);

      return (
        [
          "png",
          "jpg",
          "jpeg",
          "bmp",
          "gif",
          "webp",
          "psd",
          "svg",
          "tiff",
        ].indexOf(ext.toLowerCase()) == -1
      );
    },
  },
};
</script>

<style>
</style>

 src/components/cancellationOfFiling/cancellationOfFiling.vue

New file
@@ -0,0 +1,183 @@
<template>
  <div v-if="useWhere == 4" class="securityPermit">
    <slot name="close"></slot>
    <div class="heards">自招保安单位备案撤销</div>
    <basic-container>
      <div v-show="forms == 1" class="first-box-outer">
        <div class="handling-guideline">
          <h2 class="hand-title">自招保安单位备案撤销办理指南</h2>
          <div class="hand-content">
            <p><label>审批依据：</label></p>
            <p>
              1、《保安服务管理条例》（中华人民共和国国务院令第564号）；<br />
            </p>
            <p>
              <label>申请条件：</label
              >自行招用保安员的单位不再招用保安员进行保安服务的，应当自停止保安服务之日起30日内到备案的公安机关撤销备案。
            </p>
            <p><label>申请材料：</label></p>
            <p>
              1、《自行招用保安员单位撤销备案申请》（扫描或拍照上传）<br />
              2、单位法人资格证明（扫描或拍照上传）<br />
              3、法定代表人有效身份证（双面扫描或拍照上传）<br />
            </p>
            <p><label>责任事项：</label></p>
            <p>
              1、受理阶段责任：在政务服务办事平台上公示依法应当提交的材料进行受理；材料不齐全或不符合法定形式的，一次性告知需要补正的内容。不符合申报条件，说明不予受理的理由<br />
              2、审核阶段责任：对服务对象提交材料的规范性进行审核；提出审核意见<br />
              3、决定阶段责任：作出决定。<br />
            </p>

            <p><label>法定周期：</label>区、市20个工作日</p>
            <p><label>承诺时限：</label>区、市20个工作日</p>

            <p><label>受理部门：</label>市级公安机关</p>

            <p><label>审批机关：：</label>区级公安机关</p>
          </div>
        </div>
        <div class="hand-next">
          <el-button type="primary" @click="tip0">下一步</el-button>
          <el-button type="primary" @click="qx">取消</el-button>
        </div>
      </div>
      <div v-show="forms == 2" class="first-box-outer">
        <div class="f-b-o-in">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="公司基本信息" name="1">
              <avue-form
                ref="form1"
                v-model="obj0"
                :option="option"
              ></avue-form>
            </el-collapse-item>
            <el-collapse-item title="附件上传/查询" name="2">
              <attach :type="type"></attach>
            </el-collapse-item>
          </el-collapse>
        </div>

        <div class="hand-next">
          <el-button type="primary" @click="tip1up1">上一页</el-button>
          <el-button type="primary" @click="tip1">暂存</el-button>
          <el-button type="primary" @click="up()">提交审批</el-button>
          <el-button type="info" @click="qx">取消</el-button>
        </div>
      </div>
    </basic-container>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { add, adds, selectIn } from "@/api/recordOur/cancellationOfFiling";
import { column } from "./data.js";
import attach from "@/components/attach/attach";
export default {
  components: {
    attach: attach,
  },
  props: ["type"],
  data() {
    return {
      forms: 1,
      data0: {},
      obj0: {
        // title0: "保安服务公司许可证审批",
      },
      option: {
        emptyBtn: false,
        submitBtn: false,
        gutter: 50,
        column: column,
      },
      activeNames: ["1"],
    };
  },
  computed: {
    ...mapGetters(["useWhere"]),
  },
  watch: {
    useWhere() {
      if (this.useWhere == 4) {
        this.convert();
      }
    },
  },
  methods: {
    convert: function () {
      var caridid = this.$store.getters.userInfo.Id;
      selectIn(caridid).then((res) => {
        var d = res.data.data;
        for (var k in d) {
          this.obj0[k.toLowerCase()] = d[k];
        }
      });
    },
    tip0() {
      this.forms = 2;
    },
    qx() {
      this.tipover();
      this.$store.commit("changeuseWhere", "close");
    },
    tip1up1() {
      this.forms = 1;
    },
    tip1() {
      //暂存申请
      var d = {};
      for (var k in this.obj0) {
        for (var i in this.option.column) {
          if (k == this.option.column[i].prop && k != "title0") {
            d[k] = this.obj0[k];
          }
        }
      }
      console.log(d);
      this.data0 = d;
      this.data0.cardid = this.$store.getters.userInfo.Id;
      this.data0.ptype = this.type;
      adds(this.data0).then(() => {
        this.qx();
        this.$message({
          message: "暂存申请成功",
          type: "success",
        });
      });
    },
    up() {
      //提交申请
      var d = {};
      for (var k in this.obj0) {
        for (var i in this.option.column) {
          if (k == this.option.column[i].prop && k != "title0") {
            d[k] = this.obj0[k];
          }
        }
      }
      this.data0 = d;
      this.data0.ptype = this.type;
      this.data0.cardid = this.$store.getters.userInfo.Id;
      add(this.data0).then(() => {
        this.qx();
        this.$message({
          message: "提交申请成功",
          type: "success",
        });
      });
    },
    tipover() {
      this.forms = 1;
      this.obj0 = {
        // title0: "保安单位基本信息",
      };
      var d = {};
      this.data0 = d;
    },
  },
};
</script>

<style lang="scss">
</style>

 src/components/cancellationOfFiling/data.js

New file
@@ -0,0 +1,312 @@
export var column = [
    {
        label: "",
        labelWidth: 20,
        type: "title",
        prop: "title0",
        span: 24,
        styles: {
            fontSize: "24px",
        },
    },
    {
        label: "统一社会信用代码",
        prop: "creditcode",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入社会信用代码",
                trigger: "blur",
            },
        ],
    },
    {
        label: "辖区",
        prop: "jurisdiction",
        // type: "tree",
        // disabled: true,
        type: "tree",
        dicUrl: "/api/jurisdiction/lazy-trees",
        props: {
            label: "title",
            value: "id",
        },
        labelWidth: 160,
        span: 12,
    },
    {
        label: "企业类型",
        prop: "ptype",
        hide: true,
        display: false,
    },
    {
        label: "所属单位",
        prop: "deptid",
        hide: true,
        display: false,
    },
    {
        label: "企业名称",
        prop: "enterprisename",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入企业名称",
                trigger: "blur",
            },
        ],
    },
    {
        label: "法定代表人",
        prop: "representative",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入法定代表人",
                trigger: "blur",
            },
        ],
    },
    {
        label: "法定代表人电话",
        prop: "representativecell",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "法定代表人电话",
                trigger: "blur",
            },
        ],
    },
    {
        label: "联系人",
        prop: "contacts",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "联系人",
                trigger: "blur",
            },
        ],
    },
    {
        label: "联系人电话",
        prop: "contactscell",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "联系人电话",
                trigger: "blur",
            },
        ],
    },
    {
        label: "单位许可证编号",
        prop: "perid",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "单位许可证编号",
                trigger: "blur",
            },
        ],
    }, {
        label: "许可证发证机关",
        prop: "offices",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "许可证发证机关",
                trigger: "blur",
            },
        ],
    }, {
        label: "发证时间",
        prop: "officetime",
        labelWidth: 160,
        span: 12,
        type: "date",
        format: "yyyy-MM-dd",
        valueFormat: "yyyy-MM-dd",
    },
    {
        label: "注册时间",
        prop: "establishtime",
        labelWidth: 160,
        span: 12,
        type: "date",
        format: "yyyy-MM-dd",
        valueFormat: "yyyy-MM-dd",
    },
    {
        label: "注册资本(万元人民币)",
        prop: "registeredcapital",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入注册资本",
                trigger: "blur",
            },
        ],
    },
    // {
    //   label: "实缴资本(万元人民币)",
    //   prop: "capital",
    //   labelWidth: 160,
    //   span: 12,
    //   rules: [{
    //     required: true,
    //     message: "请输入实缴资本",
    //     trigger: "blur"
    //   }]
    // },
    {
        label: "组织机构代码",
        prop: "organizationcode",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入组织机构代码",
                trigger: "blur",
            },
        ],
    },
    {
        label: "工商注册号",
        prop: "registrationnumber",

        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入工商注册号",
                trigger: "blur",
            },
        ],
    },
    // {
    //   label: "纳税人识别号",
    //   prop: "identificationnumber",
    //   labelWidth: 160,
    //   span: 12,
    //   rules: [{
    //     required: true,
    //     message: "请输入纳税人识别号",
    //     trigger: "blur"
    //   }]
    // },
    {
        label: "注册地址",
        prop: "address",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入注册地址",
                trigger: "blur",
            },
        ],
    },
    {
        label: "经营范围",
        prop: "business",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入经营范围",
                trigger: "blur",
            },
        ],
    },
    {
        label: "所属地区",
        prop: "region",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入所属地区",
                trigger: "blur",
            },
        ],
    },
    {
        label: "登记机关",
        prop: "registration",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入登记机关",
                trigger: "blur",
            },
        ],
        // overHidden: true,
    },
    {
        label: "所属行业",
        prop: "industry",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入所属行业",
                trigger: "blur",
            },
        ],
    }, {
        label: "撤销原因",
        prop: "reason",
        labelWidth: 160,
        span: 24,
        type: 'textarea',
        rules: [
            {
                required: true,
                message: "请输入撤销原因",
                trigger: "blur",
            },
        ],
    },
    // {
    //     label: "拖拽上传",
    //     prop: "imgUrl5",
    //     type: "upload",
    //     span: 12,
    //     drag: true,
    //     propsHttp: {
    //         res: "data",
    //     },
    //     tip: "只能上传jpg/png文件，且不超过500kb",
    //     action:
    //         "/api/blade-resource/oss/endpoint/put-file-attach?deptid=&type=0",
    // },
]

 src/components/crossRegion/crossRegion.vue

New file
@@ -0,0 +1,222 @@
<template>
  <div v-if="useWhere == 1" class="securityPermit">
    <slot name="close"></slot>
    <div class="heards">跨区域经营备案</div>
    <basic-container>
      <div v-show="forms == 1" class="first-box-outer">
        <div class="handling-guideline">
          <h2 class="hand-title">跨区域经营备案办理指南</h2>
          <div class="hand-content">
            <p><label>审批依据：</label></p>
            <p>1、《保安服务管理条例》(国务院令第564号)；<br /></p>
            <p>
              <label>申请条件：</label
              >自然人、法人和其他组织。自然人需要有完全民事行为能力，年满18周岁且不具有精神疾病。
            </p>
            <p>
              <label>受理条件：</label>
              【予以批准的条件】 1、是依法设立的保安服务公司
              2、有公安机关核发的《保安服务许可证》和工商部门的《工商营业执照》<br />
              【不予批准的条件】
              申请人不符合以上条件，或者不能提供足以证明符合条件的相关证明材料<br />
            </p>
            <p><label>申请材料：</label></p>
            <p>
              1、保安服务公司跨省级行政区域经营服务登记备案表<br />
              2、保安服务许可证<br />
              3、工商营业执照<br />
              4、保安服务公司法定代表人身份证<br />
              5、跨区域经营项目负责人身份证<br />
              6、跨区域经营项目负责人基本情况表<br />
              7、派驻保安员身份证<br />
              8、派驻保安员的保安员证<br />
              9、跨区域经营服务的保安服务合同<br />
              10、保安公司安全管理制度<br />
            </p>

            <p>
              <label>申请材料形式标准：</label>
            </p>
            <p>
              1、申请人提交的申请材料齐全且符合法定形式<br />
              2、申请表用黑色签字笔或钢笔书写，并保证表格内容真实无误<br />
            </p>

            <p><label>法定周期：</label>区、市30个工作日</p>
            <p><label>承诺时限：</label>区、市14个工作日</p>

            <p><label>受理部门：</label>市级公安机关</p>

            <p><label>审批机关：：</label>区级公安机关</p>

            <!-- <p>
              <label
                >申请设立或增设从事武装守护押运业务的保安服务公司还需另外提供以下材料：</label
              >
            </p> -->

            <!-- <p>
              1、1000万元人民币以上注册资本。<br />

              2、出资属国有独资或者国有资本占注册资本总额51%以上的有效证明文件原件及复印件。<br />

              3、符合国家或者行业标准的专用运输车辆以及通信、报警设备的材料。<br />

              4、枪支安全管理制度和保管设施情况的材料。<br />
            </p>

            <p><label>法定周期：</label>区、市20个工作日</p>
            <p><label>承诺时限：</label>区、市20个工作日</p>

            <p><label>受理部门：</label>市级公安机关</p>

            <p><label>审批机关：：</label>区级公安机关</p>

            <p><label>审批机关：：</label>公安部</p> -->
          </div>
        </div>
        <div class="hand-next">
          <el-button type="primary" @click="tip0">下一步</el-button>
          <el-button type="primary" @click="qx">取消</el-button>
        </div>
      </div>
      <div v-show="forms == 2" class="first-box-outer">
        <div class="f-b-o-in">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="公司基本信息" name="1">
              <avue-form
                ref="form1"
                v-model="obj0"
                :option="option"
              ></avue-form>
            </el-collapse-item>
            <el-collapse-item title="附件上传/查询" name="2">
              <attach :type="type"></attach>
            </el-collapse-item>
          </el-collapse>
        </div>

        <div class="hand-next">
          <el-button type="primary" @click="tip1up1">上一页</el-button>
          <el-button type="primary" @click="tip1">暂存</el-button>
          <el-button type="primary" @click="up()">提交审批</el-button>
          <el-button type="info" @click="qx">取消</el-button>
        </div>
      </div>
    </basic-container>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { add, adds, selectIn } from "@/api/recordOur/crossRegion";
import { column } from "./data.js";
import attach from "@/components/attach/attach";
export default {
  components: {
    attach: attach,
  },
  props: ["type"],
  data() {
    return {
      forms: 1,
      data0: {},
      obj0: {
        // title0: "保安服务公司许可证审批",
      },
      option: {
        emptyBtn: false,
        submitBtn: false,
        gutter: 50,
        column: column,
      },
      activeNames: ["1"],
    };
  },
  computed: {
    ...mapGetters(["useWhere"]),
  },
  watch: {
    useWhere() {
      if (this.useWhere == 1) {
        this.convert();
      }
    },
  },
  methods: {
    convert: function () {
      var caridid = this.$store.getters.userInfo.Id;
      selectIn(caridid).then((res) => {
        var d = res.data.data;
        for (var k in d) {
          this.obj0[k.toLowerCase()] = d[k];
        }
      });
    },
    tip0() {
      this.forms = 2;
    },
    qx() {
      this.tipover();
      this.$store.commit("changeuseWhere", "close");
    },
    tip1up1() {
      this.forms = 1;
    },
    tip1() {
      //暂存申请
      var d = {};
      for (var k in this.obj0) {
        for (var i in this.option.column) {
          if (k == this.option.column[i].prop && k != "title0") {
            d[k] = this.obj0[k];
          }
        }
      }
      console.log(d);
      this.data0 = d;
      this.data0.cardid = this.$store.getters.userInfo.Id;
      this.data0.ptype = this.type;
      adds(this.data0).then(() => {
        this.qx();
        this.$message({
          message: "暂存申请成功",
          type: "success",
        });
      });
    },
    up() {
      //提交申请
      var d = {};
      for (var k in this.obj0) {
        for (var i in this.option.column) {
          if (k == this.option.column[i].prop && k != "title0") {
            d[k] = this.obj0[k];
          }
        }
      }
      this.data0 = d;
      this.data0.ptype = this.type;
      this.data0.cardid = this.$store.getters.userInfo.Id;
      add(this.data0).then(() => {
        this.qx();
        this.$message({
          message: "提交申请成功",
          type: "success",
        });
      });
    },
    tipover() {
      this.forms = 1;
      this.obj0 = {
        // title0: "保安单位基本信息",
      };
      var d = {};
      this.data0 = d;
    },
  },
};
</script>

<style lang="scss">
</style>

 src/components/crossRegion/data.js

New file
@@ -0,0 +1,299 @@
export var column = [
    {
        label: "",
        labelWidth: 20,
        type: "title",
        prop: "title0",
        span: 24,
        styles: {
            fontSize: "24px",
        },
    },
    {
        label: "统一社会信用代码",
        prop: "creditcode",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入社会信用代码",
                trigger: "blur",
            },
        ],
    },
    {
        label: "辖区",
        prop: "jurisdiction",
        // type: "tree",
        // disabled: true,
        type: "tree",
        dicUrl: "/api/jurisdiction/lazy-trees",
        props: {
            label: "title",
            value: "id",
        },
        labelWidth: 160,
        span: 12,
    },
    {
        label: "企业类型",
        prop: "ptype",
        hide: true,
        display: false,
    },
    {
        label: "所属单位",
        prop: "deptid",
        hide: true,
        display: false,
    },
    {
        label: "企业名称",
        prop: "enterprisename",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入企业名称",
                trigger: "blur",
            },
        ],
    },
    {
        label: "法定代表人",
        prop: "representative",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入法定代表人",
                trigger: "blur",
            },
        ],
    },
    {
        label: "法定代表人电话",
        prop: "representativecell",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "法定代表人电话",
                trigger: "blur",
            },
        ],
    },
    {
        label: "联系人",
        prop: "contacts",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "联系人",
                trigger: "blur",
            },
        ],
    },
    {
        label: "联系人电话",
        prop: "contactscell",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "联系人电话",
                trigger: "blur",
            },
        ],
    },
    {
        label: "单位许可证编号",
        prop: "perid",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "单位许可证编号",
                trigger: "blur",
            },
        ],
    }, {
        label: "许可证发证机关",
        prop: "offices",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "许可证发证机关",
                trigger: "blur",
            },
        ],
    }, {
        label: "发证时间",
        prop: "officetime",
        labelWidth: 160,
        span: 12,
        type: "date",
        format: "yyyy-MM-dd",
        valueFormat: "yyyy-MM-dd",
    },
    {
        label: "注册时间",
        prop: "establishtime",
        labelWidth: 160,
        span: 12,
        type: "date",
        format: "yyyy-MM-dd",
        valueFormat: "yyyy-MM-dd",
    },
    {
        label: "注册资本(万元人民币)",
        prop: "registeredcapital",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入注册资本",
                trigger: "blur",
            },
        ],
    },
    // {
    //   label: "实缴资本(万元人民币)",
    //   prop: "capital",
    //   labelWidth: 160,
    //   span: 12,
    //   rules: [{
    //     required: true,
    //     message: "请输入实缴资本",
    //     trigger: "blur"
    //   }]
    // },
    {
        label: "组织机构代码",
        prop: "organizationcode",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入组织机构代码",
                trigger: "blur",
            },
        ],
    },
    {
        label: "工商注册号",
        prop: "registrationnumber",

        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入工商注册号",
                trigger: "blur",
            },
        ],
    },
    // {
    //   label: "纳税人识别号",
    //   prop: "identificationnumber",
    //   labelWidth: 160,
    //   span: 12,
    //   rules: [{
    //     required: true,
    //     message: "请输入纳税人识别号",
    //     trigger: "blur"
    //   }]
    // },
    {
        label: "注册地址",
        prop: "address",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入注册地址",
                trigger: "blur",
            },
        ],
    },
    {
        label: "经营范围",
        prop: "business",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入经营范围",
                trigger: "blur",
            },
        ],
    },
    {
        label: "所属地区",
        prop: "region",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入所属地区",
                trigger: "blur",
            },
        ],
    },
    {
        label: "登记机关",
        prop: "registration",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入登记机关",
                trigger: "blur",
            },
        ],
        // overHidden: true,
    },
    {
        label: "所属行业",
        prop: "industry",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入所属行业",
                trigger: "blur",
            },
        ],
    },
    // {
    //     label: "拖拽上传",
    //     prop: "imgUrl5",
    //     type: "upload",
    //     span: 12,
    //     drag: true,
    //     propsHttp: {
    //         res: "data",
    //     },
    //     tip: "只能上传jpg/png文件，且不超过500kb",
    //     action:
    //         "/api/blade-resource/oss/endpoint/put-file-attach?deptid=&type=0",
    // },
]

 src/components/examineCard/examineCard.vue

New file
@@ -0,0 +1,125 @@
<template>
  <div
    class="card animation-target"
    :style="{ backgroundImage: data.topUrl }"
    @click="opens"
  >
    <div class="floatCard">
      <el-button type="primary" class="floatCard_buts" round v-show="handle"
        >点击办理</el-button
      >
      <el-button type="success" class="floatCard_butsd" round v-show="!handle"
        >您已成功办理，点击可查询进度</el-button
      >
    </div>
    <div class="title">{{ data.menuName }}</div>
    <img :src="data.topUrl" alt="" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: ["data", "ind"],
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["handle"]),
  },
  methods: {
    opens() {
      var d = this.handle ? "open" : "openLook";
      this.$emit("open", this.ind, d);
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  position: relative;
  float: left;
  width: 21%;
  height: 236px;
  padding: 0 10px;
  margin-bottom: 15px;
  margin-right: 35px;
  border-radius: 5px;
  background-size: 100% 85%;
  overflow: hidden;
  background-repeat: no-repeat;
  // background-image: url(/img/permit/服务许可背景图.jpg);
  border: 1px solid rgba($color: #000000, $alpha: 0.1);
  border-top: 0px solid rgba($color: #000000, $alpha: 0.3);
  &:hover {
    box-shadow: 0px 5px 15px rgba($color: #000000, $alpha: 0.3);
    cursor: pointer;
  }
  .title {
    width: 100%;
    height: 35px;
    position: absolute;
    top: 176px;
    left: 0;
  }
}
.floatCard {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba($color: #fff, $alpha: 0.6);
  .floatCard_buts {
    width: 110px;
    height: 40px;
    position: relative;
    left: calc(50% - 55px);
    top: calc(50% - 20px);
  }
  .floatCard_butsd {
    width: 250px;
    height: 40px;
    position: relative;
    left: calc(50% - 125px);
    top: calc(50% - 20px);
  }
}
.animation-target {
  animation: animationA 400ms linear both;
  &:hover {
    animation: animation 400ms linear both;
    .floatCard {
      animation: floatCardanimation 200ms linear both;
    }
  }
}

@keyframes animationA {
  0% {
    top: -15px;
  }
  100% {
    top: 0px;
  }
}

@keyframes animation {
  0% {
    top: 0px;
  }
  100% {
    top: -15px;
  }
}
@keyframes floatCardanimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>

 src/components/securityGuard/data.js

New file
@@ -0,0 +1,299 @@
export var column = [
    {
        label: "",
        labelWidth: 20,
        type: "title",
        prop: "title0",
        span: 24,
        styles: {
            fontSize: "24px",
        },
    },
    {
        label: "统一社会信用代码",
        prop: "creditcode",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入社会信用代码",
                trigger: "blur",
            },
        ],
    },
    {
        label: "辖区",
        prop: "jurisdiction",
        // type: "tree",
        // disabled: true,
        type: "tree",
        dicUrl: "/api/jurisdiction/lazy-trees",
        props: {
            label: "title",
            value: "id",
        },
        labelWidth: 160,
        span: 12,
    },
    {
        label: "企业类型",
        prop: "ptype",
        hide: true,
        display: false,
    },
    {
        label: "所属单位",
        prop: "deptid",
        hide: true,
        display: false,
    },
    {
        label: "企业名称",
        prop: "enterprisename",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入企业名称",
                trigger: "blur",
            },
        ],
    },
    {
        label: "法定代表人",
        prop: "representative",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入法定代表人",
                trigger: "blur",
            },
        ],
    },
    {
        label: "法定代表人电话",
        prop: "representativecell",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "法定代表人电话",
                trigger: "blur",
            },
        ],
    },
    {
        label: "联系人",
        prop: "contacts",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "联系人",
                trigger: "blur",
            },
        ],
    },
    {
        label: "联系人电话",
        prop: "contactscell",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "联系人电话",
                trigger: "blur",
            },
        ],
    },
    {
        label: "单位许可证编号",
        prop: "perid",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "单位许可证编号",
                trigger: "blur",
            },
        ],
    }, {
        label: "许可证发证机关",
        prop: "offices",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "许可证发证机关",
                trigger: "blur",
            },
        ],
    }, {
        label: "发证时间",
        prop: "officetime",
        labelWidth: 160,
        span: 12,
        type: "date",
        format: "yyyy-MM-dd",
        valueFormat: "yyyy-MM-dd",
    },
    {
        label: "注册时间",
        prop: "establishtime",
        labelWidth: 160,
        span: 12,
        type: "date",
        format: "yyyy-MM-dd",
        valueFormat: "yyyy-MM-dd",
    },
    {
        label: "注册资本(万元人民币)",
        prop: "registeredcapital",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入注册资本",
                trigger: "blur",
            },
        ],
    },
    // {
    //   label: "实缴资本(万元人民币)",
    //   prop: "capital",
    //   labelWidth: 160,
    //   span: 12,
    //   rules: [{
    //     required: true,
    //     message: "请输入实缴资本",
    //     trigger: "blur"
    //   }]
    // },
    {
        label: "组织机构代码",
        prop: "organizationcode",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入组织机构代码",
                trigger: "blur",
            },
        ],
    },
    {
        label: "工商注册号",
        prop: "registrationnumber",

        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入工商注册号",
                trigger: "blur",
            },
        ],
    },
    // {
    //   label: "纳税人识别号",
    //   prop: "identificationnumber",
    //   labelWidth: 160,
    //   span: 12,
    //   rules: [{
    //     required: true,
    //     message: "请输入纳税人识别号",
    //     trigger: "blur"
    //   }]
    // },
    {
        label: "注册地址",
        prop: "address",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入注册地址",
                trigger: "blur",
            },
        ],
    },
    {
        label: "经营范围",
        prop: "business",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入经营范围",
                trigger: "blur",
            },
        ],
    },
    {
        label: "所属地区",
        prop: "region",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入所属地区",
                trigger: "blur",
            },
        ],
    },
    {
        label: "登记机关",
        prop: "registration",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入登记机关",
                trigger: "blur",
            },
        ],
        // overHidden: true,
    },
    {
        label: "所属行业",
        prop: "industry",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入所属行业",
                trigger: "blur",
            },
        ],
    },
    // {
    //     label: "拖拽上传",
    //     prop: "imgUrl5",
    //     type: "upload",
    //     span: 12,
    //     drag: true,
    //     propsHttp: {
    //         res: "data",
    //     },
    //     tip: "只能上传jpg/png文件，且不超过500kb",
    //     action:
    //         "/api/blade-resource/oss/endpoint/put-file-attach?deptid=&type=0",
    // },
]

 src/components/securityGuard/securityGuard.vue

New file
@@ -0,0 +1,192 @@
<template>
  <div v-if="useWhere == 2" class="securityPermit">
    <slot name="close"></slot>
    <div class="heards">自招保安单位备案</div>
    <basic-container>
      <div v-show="forms == 1" class="first-box-outer">
        <div class="handling-guideline">
          <h2 class="hand-title">自招保安单位备案办理指南</h2>
          <div class="hand-content">
            <p><label>审批依据：</label></p>
            <p>
              1、《保安服务管理条例》(国务院令第564号)；<br />
              2、《公安机关实施保安服务管理条例办法》(公安部第112号令)；<br />
            </p>
            <p>
              <label>申请条件：</label
              >自然人、法人和其他组织。自然人需要有完全民事行为能力，年满18周岁且不具有精神疾病。
            </p>
            <p>
              <label>受理条件：</label>
              【予以批准的条件】 1、应当具有法人资格；
              2、有符合本条例规定条件的保安员；
              3、有健全的保安服务管理制度、岗位责任制度和保安员管理制度。<br />
              【不予批准的条件】
              申请人不符合以上条件，或者不能提供足以证明符合条件的相关证明材料<br />
            </p>
            <p><label>申请材料：</label></p>
            <p>
              1、自行招用保安员单位登记备案表<br />
              2、企业法人营业执照<br />
              3、法定代表人身份证<br />
              4、保安服务分管负责人身份证<br />
              5、自行招用保安员身份证<br />
              6、自行招用保安员的保安员证<br />
              7、保安服务管理制度、岗位责任制度、保安员管理制度材料<br />
              8、自行招用保安员的在岗培训法律、保安专业知识和技能情况<br />
            </p>
            <p><label>法定周期：</label>区、市30个工作日</p>
            <p><label>承诺时限：</label>区、市14个工作日</p>

            <p><label>受理部门：</label>市级公安机关</p>

            <p><label>审批机关：：</label>区级公安机关</p>
          </div>
        </div>
        <div class="hand-next">
          <el-button type="primary" @click="tip0">下一步</el-button>
          <el-button type="primary" @click="qx">取消</el-button>
        </div>
      </div>
      <div v-show="forms == 2" class="first-box-outer">
        <div class="f-b-o-in">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="公司基本信息" name="1">
              <avue-form
                ref="form1"
                v-model="obj0"
                :option="option"
              ></avue-form>
            </el-collapse-item>
            <el-collapse-item title="附件上传/查询" name="2">
              <attach :type="type"></attach>
            </el-collapse-item>
          </el-collapse>
        </div>

        <div class="hand-next">
          <el-button type="primary" @click="tip1up1">上一页</el-button>
          <el-button type="primary" @click="tip1">暂存</el-button>
          <el-button type="primary" @click="up()">提交审批</el-button>
          <el-button type="info" @click="qx">取消</el-button>
        </div>
      </div>
    </basic-container>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { add, adds, selectIn } from "@/api/recordOur/securityGuard";
import { column } from "./data.js";
import attach from "@/components/attach/attach";
export default {
  components: {
    attach: attach,
  },
  props: ["type"],
  data() {
    return {
      forms: 1,
      data0: {},
      obj0: {
        // title0: "保安服务公司许可证审批",
      },
      option: {
        emptyBtn: false,
        submitBtn: false,
        gutter: 50,
        column: column,
      },
      activeNames: ["1"],
    };
  },
  computed: {
    ...mapGetters(["useWhere"]),
  },
  watch: {
    useWhere() {
      if (this.useWhere == 2) {
        this.convert();
      }
    },
  },
  methods: {
    convert: function () {
      var caridid = this.$store.getters.userInfo.Id;
      selectIn(caridid).then((res) => {
        var d = res.data.data;
        for (var k in d) {
          this.obj0[k.toLowerCase()] = d[k];
        }
      });
    },
    tip0() {
      this.forms = 2;
    },
    qx() {
      this.tipover();
      this.$store.commit("changeuseWhere", "close");
    },
    tip1up1() {
      this.forms = 1;
    },
    tip1() {
      //暂存申请
      var d = {};
      for (var k in this.obj0) {
        for (var i in this.option.column) {
          if (k == this.option.column[i].prop && k != "title0") {
            d[k] = this.obj0[k];
          }
        }
      }
      console.log(d);
      this.data0 = d;
      this.data0.cardid = this.$store.getters.userInfo.Id;
      this.data0.ptype = this.type;
      //   this.data0.deptid = this.$store.getters.userInfo.dept_id;
      adds(this.data0).then(() => {
        this.qx();
        this.$message({
          message: "暂存申请成功",
          type: "success",
        });
      });
    },
    up() {
      //提交申请
      var d = {};
      for (var k in this.obj0) {
        for (var i in this.option.column) {
          if (k == this.option.column[i].prop && k != "title0") {
            d[k] = this.obj0[k];
          }
        }
      }
      this.data0 = d;
      //   this.data0.ptype = this.$refs.name.value;
      this.data0.cardid = this.$store.getters.userInfo.Id;
      this.data0.ptype = this.type;
      add(this.data0).then(() => {
        this.qx();
        this.$message({
          message: "提交申请成功",
          type: "success",
        });
      });
    },
    tipover() {
      this.forms = 1;
      this.obj0 = {
        // title0: "保安单位基本信息",
      };
      var d = {};
      this.data0 = d;
    },
  },
};
</script>

<style lang="scss">
</style>

 src/components/securityPermit/data.js

New file
@@ -0,0 +1,266 @@
export var column = [
    {
        label: "",
        labelWidth: 20,
        type: "title",
        prop: "title0",
        span: 24,
        styles: {
            fontSize: "24px",
        },
    },
    {
        label: "统一社会信用代码",
        prop: "creditcode",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入社会信用代码",
                trigger: "blur",
            },
        ],
    },
    {
        label: "辖区",
        prop: "jurisdiction",
        // type: "tree",
        // disabled: true,
        type: "tree",
        dicUrl: "/api/jurisdiction/lazy-trees",
        props: {
            label: "title",
            value: "id",
        },
        labelWidth: 160,
        span: 12,
    },
    {
        label: "企业类型",
        prop: "ptype",
        hide: true,
        display: false,
    },
    {
        label: "所属单位",
        prop: "deptid",
        hide: true,
        display: false,
    },
    {
        label: "企业名称",
        prop: "enterprisename",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入企业名称",
                trigger: "blur",
            },
        ],
    },
    {
        label: "法定代表人",
        prop: "representative",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入法定代表人",
                trigger: "blur",
            },
        ],
    },
    {
        label: "法定代表人电话",
        prop: "representativecell",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "法定代表人电话",
                trigger: "blur",
            },
        ],
    },
    {
        label: "联系人",
        prop: "contacts",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "联系人",
                trigger: "blur",
            },
        ],
    },
    {
        label: "联系人电话",
        prop: "contactscell",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "联系人电话",
                trigger: "blur",
            },
        ],
    },
    {
        label: "注册时间",
        prop: "establishtime",
        labelWidth: 160,
        span: 12,
        type: "date",
        format: "yyyy-MM-dd",
        valueFormat: "timestamp",
    },
    {
        label: "注册资本(万元人民币)",
        prop: "registeredcapital",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入注册资本",
                trigger: "blur",
            },
        ],
    },
    // {
    //   label: "实缴资本(万元人民币)",
    //   prop: "capital",
    //   labelWidth: 160,
    //   span: 12,
    //   rules: [{
    //     required: true,
    //     message: "请输入实缴资本",
    //     trigger: "blur"
    //   }]
    // },
    {
        label: "组织机构代码",
        prop: "organizationcode",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入组织机构代码",
                trigger: "blur",
            },
        ],
    },
    {
        label: "工商注册号",
        prop: "registrationnumber",

        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入工商注册号",
                trigger: "blur",
            },
        ],
    },
    // {
    //   label: "纳税人识别号",
    //   prop: "identificationnumber",
    //   labelWidth: 160,
    //   span: 12,
    //   rules: [{
    //     required: true,
    //     message: "请输入纳税人识别号",
    //     trigger: "blur"
    //   }]
    // },
    {
        label: "注册地址",
        prop: "address",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入注册地址",
                trigger: "blur",
            },
        ],
    },
    {
        label: "经营范围",
        prop: "business",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入经营范围",
                trigger: "blur",
            },
        ],
    },
    {
        label: "所属地区",
        prop: "region",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入所属地区",
                trigger: "blur",
            },
        ],
    },
    {
        label: "登记机关",
        prop: "registration",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入登记机关",
                trigger: "blur",
            },
        ],
        // overHidden: true,
    },
    {
        label: "所属行业",
        prop: "industry",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入所属行业",
                trigger: "blur",
            },
        ],
    },
    // {
    //     label: "拖拽上传",
    //     prop: "imgUrl5",
    //     type: "upload",
    //     span: 12,
    //     drag: true,
    //     propsHttp: {
    //         res: "data",
    //     },
    //     tip: "只能上传jpg/png文件，且不超过500kb",
    //     action:
    //         "/api/blade-resource/oss/endpoint/put-file-attach?deptid=&type=0",
    // },
]

 src/components/securityPermit/securityPermit.vue

New file
@@ -0,0 +1,244 @@
<template>
  <div>
    <!-- 遮罩只需要放一个在这里 所有页面通用 -->
    <div class="zhezhao" v-show="showZhezhao"></div>
    <div v-if="useWhere == 0" class="securityPermit">
      <slot name="close"></slot>
      <div class="heards">保安服务公司许可办理</div>
      <basic-container>
        <div v-show="forms == 1" class="first-box-outer">
          <div class="handling-guideline">
            <h2 class="hand-title">保安服务公司许可办理指南</h2>
            <div class="hand-content">
              <p><label>审批依据：</label></p>
              <p>
                1、《保安服务管理条例》(中华人民共和国国务院令第564号)；<br />

                2、《公安机关实施保安服务管理条例办法》(中华人民共和国公安部令
                第 112 号)；<br />

                3、关于印发《宁夏回族自治区保安服务公司许可备案实施细则（试行）》和《宁夏回族自治区保安培训机构管理办法实施细则（试行）》的通知（宁公通〔2017〕61号）；<br />
              </p>
              <p>
                <label>申请条件：</label
                >自然人、法人和其他组织。自然人需要有完全民事行为能力，年满18周岁且不具有精神疾病。
              </p>
              <p><label>申请材料：</label></p>
              <p>
                1、《申请设立保安服务公司行政许可审批表》。<br />
                2、设立保安服务公司申请书<br />
                3、设立保安服务公司可行性分析报告<br />

                4、保安服务从业单位法定代表人（主要负责人）登记表<br />
                5、保安服务公司章程<br />
                6、注册资本认缴金额证明。<br />
                7、拟任的法定代表人、主要管理人员应提供下列材料：<br />
                ①有效身份证件；②保安师资格证书原件及复印件；③个人简历及5年以上军队、公安、安全、审判、检察、司法行政或者治保安卫、保安经营管理工作经验证明。<br />
                8、专业技术人员名单，法律、行政法规有资格要求的资格证明。<br />
                9、拟设保安服务公司住所的所有权或使用权有效证明文件和提供保安服务所需的有关设备、交通工具等材料并附彩色照片。<br />
                10、组织机构和保安服务管理制度、岗位责任制度、保安员管理制度材料。<br />
                11、工商行政管理部门核发的企业名称预先核准通知书。<br />
              </p>

              <p>
                <label
                  >申请设立中外合资、中外合作或者外资独资保安服务公司除以上1-11项内容外还需另外提供以下材料：</label
                >
              </p>

              <p>
                1、中外合资、中外合作合同原件及复印件。<br />

                2、外方的资信证明和注册登记文件原件及复印件。<br />

                3、境外法定代表人、主要管理人员所属国家或者地区无被刑事处罚记录证明（原居住地警察机构出具并经公证机关公证）。<br />

                4、境外法定代表人、主要管理人员5年以上保安经营管理工作经验证明。<br />
              </p>

              <p><label>法定周期：</label>区、市20个工作日</p>
              <p><label>承诺时限：</label>区、市20个工作日</p>

              <p><label>受理部门：</label>市级公安机关</p>

              <p><label>审批机关：：</label>区级公安机关</p>

              <!-- <p>
                <label
                  >申请设立或增设从事武装守护押运业务的保安服务公司还需另外提供以下材料：</label
                >
              </p>

              <p>
                1、1000万元人民币以上注册资本。<br />

                2、出资属国有独资或者国有资本占注册资本总额51%以上的有效证明文件原件及复印件。<br />

                3、符合国家或者行业标准的专用运输车辆以及通信、报警设备的材料。<br />

                4、枪支安全管理制度和保管设施情况的材料。<br />
              </p>

              <p><label>法定周期：</label>区、市20个工作日</p>
              <p><label>承诺时限：</label>区、市20个工作日</p>

              <p><label>受理部门：</label>市级公安机关</p>

              <p><label>审批机关：：</label>区级公安机关</p>

              <p><label>审批机关：：</label>公安部</p> -->
            </div>
          </div>
          <div class="hand-next">
            <el-button type="primary" @click="tip0">下一步</el-button>
            <el-button type="primary" @click="qx">取消</el-button>
          </div>
        </div>
        <div v-show="forms == 2" class="first-box-outer">
          <div class="f-b-o-in">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="公司基本信息" name="1">
                <avue-form
                  ref="form1"
                  v-model="obj0"
                  :option="option"
                ></avue-form>
              </el-collapse-item>
              <el-collapse-item title="附件上传/查询" name="2">
                <attach :type="type"></attach>
              </el-collapse-item>
            </el-collapse>
          </div>

          <div class="hand-next">
            <el-button type="primary" @click="tip1up1">上一页</el-button>
            <el-button type="primary" @click="tip1">暂存</el-button>
            <el-button type="primary" @click="up()">提交审批</el-button>
            <el-button type="info" @click="qx">取消</el-button>
          </div>
        </div>
      </basic-container>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { add, adds, selectIn } from "@/api/permit/permit";
import { column } from "./data.js";
import attach from "@/components/attach/attach";
export default {
  components: {
    attach: attach,
  },
  props: ["type"],
  data() {
    return {
      showZhezhao: false,
      forms: 1,

      data0: {},
      obj0: {
        // title0: "保安服务公司许可证审批",
      },
      option: {
        emptyBtn: false,
        submitBtn: false,
        gutter: 50,
        column: column,
      },
      activeNames: ["1"],
    };
  },
  computed: {
    ...mapGetters(["useWhere"]),
  },
  watch: {
    useWhere() {
      if (this.useWhere == 0) {
        this.convert();
      }
      if (this.useWhere == "close") {
        this.showZhezhao = false;
      } else {
        this.showZhezhao = true;
      }
    },
  },
  methods: {
    convert: function () {
      var caridid = this.$store.getters.userInfo.Id;
      selectIn(caridid).then((res) => {
        var d = res.data.data;
        for (var k in d) {
          this.obj0[k.toLowerCase()] = d[k];
        }
      });
    },
    tip0() {
      this.forms = 2;
    },
    qx() {
      this.tipover();
      this.$store.commit("changeuseWhere", "close");
    },
    tip1up1() {
      this.forms = 1;
    },
    tip1() {
      //暂存申请
      var d = {};
      for (var k in this.obj0) {
        for (var i in this.option.column) {
          if (k == this.option.column[i].prop && k != "title0") {
            d[k] = this.obj0[k];
          }
        }
      }
      console.log(d);
      this.data0 = d;
      this.data0.cardid = this.$store.getters.userInfo.Id;
      this.data0.ptype = this.type;
      adds(this.data0).then(() => {
        this.qx();
        this.$message({
          message: "暂存申请成功",
          type: "success",
        });
      });
    },
    up() {
      //提交申请
      var d = {};
      for (var k in this.obj0) {
        for (var i in this.option.column) {
          if (k == this.option.column[i].prop && k != "title0") {
            d[k] = this.obj0[k];
          }
        }
      }
      this.data0 = d;
      this.data0.ptype = this.type;
      this.data0.cardid = this.$store.getters.userInfo.Id;
      add(this.data0).then(() => {
        this.qx();
        this.$message({
          message: "提交申请成功",
          type: "success",
        });
      });
    },
    tipover() {
      this.forms = 1;
      this.obj0 = {
        // title0: "保安单位基本信息",
      };
      var d = {};
      this.data0 = d;
    },
  },
};
</script>

<style lang="scss">
</style>

 src/components/securityTraining/data.js

New file
@@ -0,0 +1,299 @@
export var column = [
    {
        label: "",
        labelWidth: 20,
        type: "title",
        prop: "title0",
        span: 24,
        styles: {
            fontSize: "24px",
        },
    },
    {
        label: "统一社会信用代码",
        prop: "creditcode",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入社会信用代码",
                trigger: "blur",
            },
        ],
    },
    {
        label: "辖区",
        prop: "jurisdiction",
        // type: "tree",
        // disabled: true,
        type: "tree",
        dicUrl: "/api/jurisdiction/lazy-trees",
        props: {
            label: "title",
            value: "id",
        },
        labelWidth: 160,
        span: 12,
    },
    {
        label: "企业类型",
        prop: "ptype",
        hide: true,
        display: false,
    },
    {
        label: "所属单位",
        prop: "deptid",
        hide: true,
        display: false,
    },
    {
        label: "企业名称",
        prop: "enterprisename",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入企业名称",
                trigger: "blur",
            },
        ],
    },
    {
        label: "法定代表人",
        prop: "representative",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入法定代表人",
                trigger: "blur",
            },
        ],
    },
    {
        label: "法定代表人电话",
        prop: "representativecell",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "法定代表人电话",
                trigger: "blur",
            },
        ],
    },
    {
        label: "联系人",
        prop: "contacts",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "联系人",
                trigger: "blur",
            },
        ],
    },
    {
        label: "联系人电话",
        prop: "contactscell",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "联系人电话",
                trigger: "blur",
            },
        ],
    },
    {
        label: "单位许可证编号",
        prop: "perid",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "单位许可证编号",
                trigger: "blur",
            },
        ],
    }, {
        label: "许可证发证机关",
        prop: "offices",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "许可证发证机关",
                trigger: "blur",
            },
        ],
    }, {
        label: "发证时间",
        prop: "officetime",
        labelWidth: 160,
        span: 12,
        type: "date",
        format: "yyyy-MM-dd",
        valueFormat: "yyyy-MM-dd",
    },
    {
        label: "注册时间",
        prop: "establishtime",
        labelWidth: 160,
        span: 12,
        type: "date",
        format: "yyyy-MM-dd",
        valueFormat: "yyyy-MM-dd",
    },
    {
        label: "注册资本(万元人民币)",
        prop: "registeredcapital",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入注册资本",
                trigger: "blur",
            },
        ],
    },
    // {
    //   label: "实缴资本(万元人民币)",
    //   prop: "capital",
    //   labelWidth: 160,
    //   span: 12,
    //   rules: [{
    //     required: true,
    //     message: "请输入实缴资本",
    //     trigger: "blur"
    //   }]
    // },
    {
        label: "组织机构代码",
        prop: "organizationcode",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入组织机构代码",
                trigger: "blur",
            },
        ],
    },
    {
        label: "工商注册号",
        prop: "registrationnumber",

        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入工商注册号",
                trigger: "blur",
            },
        ],
    },
    // {
    //   label: "纳税人识别号",
    //   prop: "identificationnumber",
    //   labelWidth: 160,
    //   span: 12,
    //   rules: [{
    //     required: true,
    //     message: "请输入纳税人识别号",
    //     trigger: "blur"
    //   }]
    // },
    {
        label: "注册地址",
        prop: "address",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入注册地址",
                trigger: "blur",
            },
        ],
    },
    {
        label: "经营范围",
        prop: "business",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入经营范围",
                trigger: "blur",
            },
        ],
    },
    {
        label: "所属地区",
        prop: "region",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入所属地区",
                trigger: "blur",
            },
        ],
    },
    {
        label: "登记机关",
        prop: "registration",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入登记机关",
                trigger: "blur",
            },
        ],
        // overHidden: true,
    },
    {
        label: "所属行业",
        prop: "industry",
        labelWidth: 160,
        span: 12,
        rules: [
            {
                required: true,
                message: "请输入所属行业",
                trigger: "blur",
            },
        ],
    },
    // {
    //     label: "拖拽上传",
    //     prop: "imgUrl5",
    //     type: "upload",
    //     span: 12,
    //     drag: true,
    //     propsHttp: {
    //         res: "data",
    //     },
    //     tip: "只能上传jpg/png文件，且不超过500kb",
    //     action:
    //         "/api/blade-resource/oss/endpoint/put-file-attach?deptid=&type=0",
    // },
]

 src/components/securityTraining/securityTraining.vue

New file
@@ -0,0 +1,199 @@
<template>
  <div v-if="useWhere == 3" class="securityPermit">
    <slot name="close"></slot>
    <div class="heards">保安培训公司备案</div>
    <basic-container>
      <div v-show="forms == 1" class="first-box-outer">
        <div class="handling-guideline">
          <h2 class="hand-title">保安培训公司备案办理指南</h2>
          <div class="hand-content">
            <p><label>审批依据：</label></p>
            <p>
              1、《保安培训机构管理办法》(公安部令第85号)；<br />

              2、《公安机关是是保安服务管理条例办法》(公安部第112号令)；<br />

              3、《公安机关是是保安服务管理条例办法》(公安部第112号令)；<br />
              3、《保安服务管理条例》(国务院令第564号)第三十二条；<br />
              3、《保安服务管理条例》(国务院令第564号)第三十三条；<br />
            </p>
            <p>
              <label>申请条件：</label
              >自然人、法人和其他组织。自然人需要有完全民事行为能力，年满18周岁且不具有精神疾病。
            </p>
            <p>
              <label>受理条件：</label>
              【予以批准的条件】1、是依法设立的保安服务公司或者依法设立的具有法人资格的学校、职业培训机构；2、保安培训师资力量，其中保安专业师资人员应当具有大学本科以上学历或者1
              0年以上治安保卫管理工作经历；3、有保安培训所需的场所、设施教学条件。4、申请人、投资人、法定代表人、管理人员及师资人员没有故意犯罪记录和精神病史；5、主要负责人应当具有政法机关、军队或者教育培训的工作经历。<br />
              【不予以批准的条件】
              申请人不符合以上条件，或者不能提供足以证明符合条件的相关证明材料。<br />
            </p>
            <p><label>申请材料：</label></p>
            <p>
              1、《保安培训单位申请设立审批表》。<br />
              2、设立申请书，应当载明申请人基本情况、拟设立培训单位名称、培训目标、培训规模、培训内容、培训条件和内部管理制度等。<br />
              3、保安培训单位法人资格材料<br />

              4、申请人、法定代表人和校长（院长）等主要管理人员身份证<br />
              5、师资人员的学历证书（其中保安专业师资人员应当具有大学本科以上学历），教师花名册（含工作单位、住址、职称、专兼职、拟任课程），与教师签订的聘用合同<br />
              6、申请人、法定代表人和校长（院长）等主要管理人员基本情况登记表<br />
              7、培训场所所有权证明，租赁培训场所的，
              提交场所所有权和租赁合同，训练场地、图书室、阅览室、教学设施和实习仪器设备的材料；<br />
              8、内部管理制度（含教学计划、选用教材及教学、
              师资、学员、卫生、安全管理制度）<br />
              9、委托代理人申办的，须附具委托书和代理人身份证复印件<br />
            </p>

            <p><label>法定周期：</label>区、市30个工作日</p>
            <p><label>承诺时限：</label>区、市20个工作日</p>

            <p><label>受理部门：</label>市级公安机关</p>

            <p><label>审批机关：：</label>区级公安机关</p>
          </div>
        </div>
        <div class="hand-next">
          <el-button type="primary" @click="tip0">下一步</el-button>
          <el-button type="primary" @click="qx">取消</el-button>
        </div>
      </div>
      <div v-show="forms == 2" class="first-box-outer">
        <div class="f-b-o-in">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="公司基本信息" name="1">
              <avue-form
                ref="form1"
                v-model="obj0"
                :option="option"
              ></avue-form>
            </el-collapse-item>
            <el-collapse-item title="附件上传/查询" name="2">
              <attach :type="type"></attach>
            </el-collapse-item>
          </el-collapse>
        </div>

        <div class="hand-next">
          <el-button type="primary" @click="tip1up1">上一页</el-button>
          <el-button type="primary" @click="tip1">暂存</el-button>
          <el-button type="primary" @click="up()">提交审批</el-button>
          <el-button type="info" @click="qx">取消</el-button>
        </div>
      </div>
    </basic-container>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { add, adds, selectIn } from "@/api/recordOur/securityTraining";
import { column } from "./data.js";
import attach from "@/components/attach/attach";
export default {
  components: {
    attach: attach,
  },
  props: ["type"],
  data() {
    return {
      forms: 1,
      data0: {},
      obj0: {
        // title0: "保安服务公司许可证审批",
      },
      option: {
        emptyBtn: false,
        submitBtn: false,
        gutter: 50,
        column: column,
      },
      activeNames: ["1"],
    };
  },
  computed: {
    ...mapGetters(["useWhere"]),
  },
  watch: {
    useWhere() {
      if (this.useWhere == 3) {
        this.convert();
      }
    },
  },
  methods: {
    convert: function () {
      var caridid = this.$store.getters.userInfo.Id;
      selectIn(caridid).then((res) => {
        var d = res.data.data;
        for (var k in d) {
          this.obj0[k.toLowerCase()] = d[k];
        }
      });
    },
    tip0() {
      this.forms = 2;
    },
    qx() {
      this.tipover();
      this.$store.commit("changeuseWhere", "close");
    },
    tip1up1() {
      this.forms = 1;
    },
    tip1() {
      //暂存申请
      var d = {};
      for (var k in this.obj0) {
        for (var i in this.option.column) {
          if (k == this.option.column[i].prop && k != "title0") {
            d[k] = this.obj0[k];
          }
        }
      }
      console.log(d);
      this.data0 = d;
      this.data0.cardid = this.$store.getters.userInfo.Id;
      this.data0.ptype = this.type;
      adds(this.data0).then(() => {
        this.qx();
        this.$message({
          message: "暂存申请成功",
          type: "success",
        });
      });
    },
    up() {
      //提交申请
      var d = {};
      for (var k in this.obj0) {
        for (var i in this.option.column) {
          if (k == this.option.column[i].prop && k != "title0") {
            d[k] = this.obj0[k];
          }
        }
      }
      this.data0 = d;
      this.data0.ptype = this.type;
      this.data0.cardid = this.$store.getters.userInfo.Id;
      add(this.data0).then(() => {
        this.qx();
        this.$message({
          message: "提交申请成功",
          type: "success",
        });
      });
    },
    tipover() {
      this.forms = 1;
      this.obj0 = {
        // title0: "保安单位基本信息",
      };
      var d = {};
      this.data0 = d;
    },
  },
};
</script>

<style lang="scss">
</style>

 src/router/views/index.js

@@ -31,69 +31,69 @@
    //     import( /* webpackChunkName: "views" */ '@/views/wel/dashboard')
    // }]
  },
//   {
//   path: '/wel',
//   component: Layout,
//   redirect: '/wel/index',
//   children: [{
//     path: 'index',
//     name: '申办许可申请',
//     meta: {
//       i18n: 'dashboard'
//     },
//     component: () =>
//       import( /* webpackChunkName: "views" */ '@/views/permit/permit')
//   }, {
//     path: 'dashboard',
//     name: '控制台',
//     meta: {
//       i18n: 'dashboard',
//       menu: false,
//     },
//     component: () =>
//       import( /* webpackChunkName: "views" */ '@/views/wel/dashboard')
//   }]
// },
{
  path: '/test',
  component: Layout,
  redirect: '/test/index',
  children: [{
    path: 'index',
    name: '测试页',
    meta: {
      i18n: 'test'
    },
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/util/test')
  }]
}, {
  path: '/dict-horizontal',
  component: Layout,
  redirect: '/dict-horizontal/index',
  children: [{
    path: 'index',
    name: '字典管理',
    meta: {
      i18n: 'dict'
    },
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-horizontal')
  }]
}, {
  path: '/dict-vertical',
  component: Layout,
  redirect: '/dict-vertical/index',
  children: [{
    path: 'index',
    name: '字典管理',
    meta: {
      i18n: 'dict'
    },
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-vertical')
  }]
},
  //   {
  //   path: '/wel',
  //   component: Layout,
  //   redirect: '/wel/index',
  //   children: [{
  //     path: 'index',
  //     name: '申办许可申请',
  //     meta: {
  //       i18n: 'dashboard'
  //     },
  //     component: () =>
  //       import( /* webpackChunkName: "views" */ '@/views/permit/permit')
  //   }, {
  //     path: 'dashboard',
  //     name: '控制台',
  //     meta: {
  //       i18n: 'dashboard',
  //       menu: false,
  //     },
  //     component: () =>
  //       import( /* webpackChunkName: "views" */ '@/views/wel/dashboard')
  //   }]
  // },
  {
    path: '/test',
    component: Layout,
    redirect: '/test/index',
    children: [{
      path: 'index',
      name: '测试页',
      meta: {
        i18n: 'test'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/util/test')
    }]
  }, {
    path: '/dict-horizontal',
    component: Layout,
    redirect: '/dict-horizontal/index',
    children: [{
      path: 'index',
      name: '字典管理',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-horizontal')
    }]
  }, {
    path: '/dict-vertical',
    component: Layout,
    redirect: '/dict-vertical/index',
    children: [{
      path: 'index',
      name: '字典管理',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-vertical')
    }]
  },
  {
    path: '/attach',
    redirect: '/resource/attach',
@@ -109,45 +109,45 @@
    }]
  },
  {
  path: '/info',
  component: Layout,
  redirect: '/info/index',
  children: [{
    path: 'index',
    name: '个人信息',
    meta: {
      i18n: 'info'
    },
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/system/userinfo')
  }]
}, {
  path: '/work/process/leave',
  component: Layout,
  redirect: '/work/process/leave/form',
  children: [{
    path: 'form/:processDefinitionId',
    name: '请假流程',
    meta: {
      i18n: 'work'
    },
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/work/process/leave/form')
    path: '/info',
    component: Layout,
    redirect: '/info/index',
    children: [{
      path: 'index',
      name: '个人信息',
      meta: {
        i18n: 'info'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/system/userinfo')
    }]
  }, {
    path: 'handle/:taskId/:processInstanceId/:businessId',
    name: '处理请假流程',
    meta: {
      i18n: 'work'
    },
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/work/process/leave/handle')
  }, {
    path: 'detail/:processInstanceId/:businessId',
    name: '请假流程详情',
    meta: {
      i18n: 'work'
    },
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/work/process/leave/detail')
    path: '/work/process/leave',
    component: Layout,
    redirect: '/work/process/leave/form',
    children: [{
      path: 'form/:processDefinitionId',
      name: '请假流程',
      meta: {
        i18n: 'work'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/work/process/leave/form')
    }, {
      path: 'handle/:taskId/:processInstanceId/:businessId',
      name: '处理请假流程',
      meta: {
        i18n: 'work'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/work/process/leave/handle')
    }, {
      path: 'detail/:processInstanceId/:businessId',
      name: '请假流程详情',
      meta: {
        i18n: 'work'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/work/process/leave/detail')
    }]
  }]
}]

 src/store/getters.js

@@ -25,5 +25,8 @@
  logsLen: state => state.logs.logsList.length || 0,
  logsFlag: (state, getters) => getters.logsLen === 0,
  flowRoutes: state => state.dict.flowRoutes,
  ApprovalShow: state => state.dict.ApprovalShow,
  useWhere: state => state.dict.useWhere,
  handle: state => state.dict.handle,
}
export default getters

 src/store/modules/dict.js

@@ -1,15 +1,18 @@
import {getStore, setStore} from '@/util/store'
import { getStore, setStore } from '@/util/store'

import {getDictionary} from '@/api/system/dict'
import { getDictionary } from '@/api/system/dict'

const dict = {
  state: {
    flowRoutes: getStore({name: 'flowRoutes'}) || {},
    flowRoutes: getStore({ name: 'flowRoutes' }) || {},
    ApprovalShow: false,
    useWhere: 'close',
    handle: true,
  },
  actions: {
    FlowRoutes({commit}) {
    FlowRoutes({ commit }) {
      return new Promise((resolve, reject) => {
        getDictionary({code: 'flow'}).then(res => {
        getDictionary({ code: 'flow' }).then(res => {
          commit('SET_FLOW_ROUTES', res.data.data);
          resolve();
        }).catch(error => {
@@ -26,8 +29,17 @@
          routeValue: item.remark,
        };
      });
      setStore({name: 'flowRoutes', content: state.flowRoutes})
      setStore({ name: 'flowRoutes', content: state.flowRoutes })
    },
    doitApprovalShow: (state, data) => {
      state.ApprovalShow = data
    },
    changeuseWhere: (state, data) => {
      state.useWhere = data
    },
    changehandle: (state, data) => {
      state.handle = data
    }
  }

};

 src/views/home/index.vue

@@ -1,1136 +1,378 @@
<template>
  <div style="width: 100%;height: 100%; background: #ccc;">
    <div style="background-color: #25aff3;width: 100%;height: 50px;">
      <span
        style="display: inline-block;color: #ffffff;font-size: 24px;line-height: 50px;margin-left: 5px;">服务许可审批备案系统</span>
      <div
        style="display: block;float: right;height: 50px;padding-right: 52px;color: #fff;line-height: 50px;cursor: pointer;position: relative;">
        <img src="http://nx.baibaodun.cn:80/assets/images/username-person.png"
             style="display: inline-block;vertical-align: middle">
        <i
          style="font-style: normal;color: #ffffff;font-size: 16px;line-height: 50px;display: inline-block;margin: 0; padding-left: 4px">{{userName}}</i>
        <a style="margin-left: 15px;color: #ffffff;font-size: 16px;line-height: 50px" @click="logout">退出登录</a>
  <div id="examine">
    <div class="examine_heard">
      服务许可审批备案系统
      <div class="e_h_right">
        <img
          src="http://nx.baibaodun.cn:80/assets/images/username-person.png"
          alt=""
        />
        <span>
          {{ userName }}
        </span>
        <div @click="logout">退出登录</div>
      </div>
    </div>
    <div style="position: relative;
    width: 100%;
    height: 100%;background:#eff2fa">
      <div class="header">
        <h2 style="text-align: center;margin: 0;padding-top: 20px;">保安相关申请流程</h2>
        <button
          style="border:1px solid red;border-radius:3px; position: absolute;right: 16%;top: 30px;height:25px;width: 140px;text-align:center"
          @click="ss">
          审批进度查询
        </button>
    <div class="examine_body">
      <div class="title">
        <h2>保安相关申请流程</h2>
        <button @click="openApproval">审批进度查询</button>
      </div>

      <div class="main">
        <div v-for="(item, index) in menuData"
             :key="index"
             class='item-box'>

          <div class='box-top'
               :style="{ background: item.topUrl }"
               @click="targetClick(item)">

            <div class='img-box'>
              <img :src="item.centerUrl"
                   alt="">
            </div>

          </div>

          <div class="box-bottom">
            {{ item.menuName }}
          </div>

        </div>
      <div class="b_main">
        <!-- 卡片 -->
        <examineCard
          v-for="(item, index) in dataCard"
          :key="index"
          :data="item"
          :ind="index"
          @open="openMain"
          v-show="showCard"
        ></examineCard>
      </div>
    </div>
    <div class="detail-box" v-show="onit">
      <span class="layui-layer-setwin">
        <a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;" id="close"></a>
    <!-- 审批进度查询 -->
    <Approval class="Approval">
      <span slot="close">
        <i class="el-icon-close ApprovalClose" @click="ApprovalClose"></i>
      </span>
      <div class="layui-layer-title" style="height: 40px;line-height:40px;">保安服务公司许可证</div>
      <span class="layui-layer-setwin"><a class="layui-layer-ico layui-layer-close layui-layer-close1"
                                          href="javascript:;" @click="js_method"></a></span>
      <div id="" class="layui-layer-content" style="height: 298px;">
        <div class="radio-custom radio-primary">
          <label for="sponsorlicenseType1">
            <input id="sponsorlicenseType1" type="radio" value="0" name="sponsorlicenseType" ref="name"
                   checked="">保安服务公司设立许可</label>
          <div class="handling-guideline"><p>材料说明：普通保安服务公司是指申请服务范围为：门卫、巡逻、守护、随身护卫、安全检查、安全技术防范、安全风险评估、区域秩序维护的公司。</p>
          </div>
        </div>
        <div class="radio-custom radio-primary">
          <label for="sponsorlicenseType2"><input id="sponsorlicenseType2" type="radio" value="1" ref="name"
                                                  name="sponsorlicenseType">保安培训公司设立许可</label>
          <div class="handling-guideline"><p>
            国务院《保安服务管理条例》（2009年国务院令第564号）第九条：申请设立保安服务公司,应当向所在地设区的市级人民政府公安机关提交申请书以及能够证明其符合本条例第八条规定条件的材料。</p>
          </div>
        </div>
      </div>
      <div class="layui-layer-btn" style="margin-left: 260px">
        <button class="layui-layer-btn0" @click="onNext"
                style="position: absolute;width: 95px; border: 1px solid #2673e5;background: rgb(46, 141, 237);border-radius: 4px;width: 100px;height: 38px;">
          确认
        </button>
      </div>

    </div>

    <div class="lod" v-if="forms != 0">
      <div class="lod-in">
        <div v-show="forms == 1" class="first-box-outer">
          <div class="first-box-title" style="">设立保安服务公司行政许可证
          </div>
          <div class="first-box-content">
            <div class="handling-guideline">
              <h2 class="hand-title">保安服务公司许可办理指南</h2>
              <div class="hand-content">
                <p><label>审批依据：</label></p>
                <p>
                  1、《保安服务管理条例》(中华人民共和国国务院令第564号)；<br>

                  2、《公安机关实施保安服务管理条例办法》(中华人民共和国公安部令 第 112 号)；<br>

                  3、关于印发《宁夏回族自治区保安服务公司许可备案实施细则（试行）》和《宁夏回族自治区保安培训机构管理办法实施细则（试行）》的通知（宁公通〔2017〕61号）；<br>

                </p>
                <p><label>申请条件：</label>自然人、法人和其他组织。自然人需要有完全民事行为能力，年满18周岁且不具有精神疾病。 </p>
                <p><label>申请材料：</label></p>
                <p>
                  1、《申请设立保安服务公司行政许可审批表》。<br>
                  2、设立保安服务公司申请书<br>
                  3、设立保安服务公司可行性分析报告<br>

                  4、保安服务从业单位法定代表人（主要负责人）登记表<br>
                  5、保安服务公司章程<br>
                  6、注册资本认缴金额证明。<br>
                  7、拟任的法定代表人、主要管理人员应提供下列材料：<br>
                  ①有效身份证件；②保安师资格证书原件及复印件；③个人简历及5年以上军队、公安、安全、审判、检察、司法行政或者治保安卫、保安经营管理工作经验证明。<br>
                  8、专业技术人员名单，法律、行政法规有资格要求的资格证明。<br>
                  9、拟设保安服务公司住所的所有权或使用权有效证明文件和提供保安服务所需的有关设备、交通工具等材料并附彩色照片。<br>
                  10、组织机构和保安服务管理制度、岗位责任制度、保安员管理制度材料。<br>
                  11、工商行政管理部门核发的企业名称预先核准通知书。<br>
                </p>


                <p><label>申请设立中外合资、中外合作或者外资独资保安服务公司除以上1-11项内容外还需另外提供以下材料：</label></p>

                <p>
                  1、中外合资、中外合作合同原件及复印件。<br>

                  2、外方的资信证明和注册登记文件原件及复印件。<br>

                  3、境外法定代表人、主要管理人员所属国家或者地区无被刑事处罚记录证明（原居住地警察机构出具并经公证机关公证）。<br>

                  4、境外法定代表人、主要管理人员5年以上保安经营管理工作经验证明。<br>
                </p>

                <p><label>法定周期：</label>区、市20个工作日</p>
                <p><label>承诺时限：</label>区、市20个工作日</p>

                <p><label>受理部门：</label>市级公安机关</p>

                <p><label>审批机关：：</label>区级公安机关</p>


                <p><label>申请设立或增设从事武装守护押运业务的保安服务公司还需另外提供以下材料：</label></p>

                <p>
                  1、1000万元人民币以上注册资本。<br>

                  2、出资属国有独资或者国有资本占注册资本总额51%以上的有效证明文件原件及复印件。<br>

                  3、符合国家或者行业标准的专用运输车辆以及通信、报警设备的材料。<br>

                  4、枪支安全管理制度和保管设施情况的材料。<br>
                </p>


                <p><label>法定周期：</label>区、市20个工作日</p>
                <p><label>承诺时限：</label>区、市20个工作日</p>

                <p><label>受理部门：</label>市级公安机关</p>

                <p><label>审批机关：：</label>区级公安机关</p>

                <p><label>审批机关：：</label>公安部</p>


              </div>
            </div>
            <div class="hand-next">
              <el-button type="primary" @click="tip0">下一步</el-button>
              <el-button type="primary" @click="qx">取消</el-button>
            </div>
          </div>
        </div>
        <div v-show="forms == 2" class="first-box-outer">
          <avue-form
            ref="form1"
            v-model="obj0"
            :option="option">
            <template slot="menuForm">
              <el-button type="primary" @click="tip1up1">上一页</el-button>
              <el-button type="primary" @click="tip1">暂存</el-button>
              <el-button type="primary" @click="up()">提交审批</el-button>
              <el-button type="info" @click="tipover">取消</el-button>
            </template>
          </avue-form>
        </div>
      </div>
    </div>

    <div class="lod" v-show="onits">
      <div class="lod-in">
        <div class="first-box-outers">
          <div class="first-box-titles">审批进度
            <a  style="margin-left: 1120px;font-size: 18px" href="javascript:;" @click="js_methods">X</a>
          </div>
          <div class="first-box-content">
            <avue-crud :option="option1"
                       :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"
                       :row-style="rowStyle"
            >
              <template class="tdtype" slot-scope="{ row }" slot="type">
                <el-tag class="dtype">
                  {{
                    row.type == "0" ? "通过" : row.type == "1" ? "不通过" : "待审核"
                  }}
                  <i class="gz" v-if="row.type == '0' "></i>
                  <i class="yj" v-if="row.type == '1' "></i>
                  <i class="zc" v-if="row.type == '2' "></i>
                </el-tag>
              </template>
            </avue-crud>

          </div>

        </div>
      </div>
    </div>
    </Approval>
    <!-- 保安服务公司许可申请 -->
    <securityPermit class="securityPermit" :type="dataCard[0].type">
      <span slot="close">
        <i class="el-icon-close ApprovalClose" @click="openClose"> </i>
      </span>
    </securityPermit>
    <!-- 跨区域经营备案 -->
    <crossRegion class="crossRegion" :type="dataCard[1].type">
      <span slot="close">
        <i class="el-icon-close ApprovalClose" @click="openClose"> </i>
      </span>
    </crossRegion>
    <!-- 自招保安单位备案 -->
    <securityGuard class="securityGuard" :type="dataCard[2].type">
      <span slot="close">
        <i class="el-icon-close ApprovalClose" @click="openClose"> </i>
      </span>
    </securityGuard>
    <!-- 保安培训公司备案 -->
    <securityTraining class="securityTraining" :type="dataCard[3].type">
      <span slot="close">
        <i class="el-icon-close ApprovalClose" @click="openClose"> </i>
      </span>
    </securityTraining>
    <!-- 自招保安单位备案撤销 -->
    <cancellationOfFiling class="cancellationOfFiling" :type="dataCard[4].type">
      <span slot="close">
        <i class="el-icon-close ApprovalClose" @click="openClose"> </i>
      </span>
    </cancellationOfFiling>
  </div>
</template>

<script>
import examineCard from "@/components/examineCard/examineCard.vue"; //卡片
import Approval from "@/components/Approval/Approval.vue"; //审批进度查询
import securityPermit from "@/components/securityPermit/securityPermit.vue"; // 保安服务公司许可申请
import crossRegion from "@/components/crossRegion/crossRegion.vue"; // 跨区域经营备案
import securityGuard from "@/components/securityGuard/securityGuard.vue"; // 自招保安单位备案
import securityTraining from "@/components/securityTraining/securityTraining.vue"; // 保安培训公司备案
import cancellationOfFiling from "@/components/cancellationOfFiling/cancellationOfFiling.vue"; // 自招保安单位备案撤销
import {
  add,
  adds,
  getDetail,
  getList,
  getListre,
  getListrek,
  getListrev,
  remove,
  selectIn,
  update
} from "@/api/permit/permit"
import {mapGetters} from "vuex";
import {resetRouter} from '@/router/router'
} from "@/api/permit/permit";
import { mapGetters } from "vuex";
import { resetRouter } from "@/router/router";

export default {
  data() {
    return {
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      obj0: {
        title0: "保安服务公司许可证审批",
      },
      // option0: {
      //   emptyBtn: false,
      //   submitBtn: false,
      //   gutter: 30,
      //   column: column0,
      // },
      option: {
        emptyBtn: false,
        submitBtn: false,
        gutter: 50,
        column: [
          {
            label: "",
            labelWidth: 20,
            type: 'title',
            prop: "title0",
            span: 24,
            styles: {
              fontSize: '24px'
            }
          },
          {
            label: "统一社会信用代码",
            prop: "creditcode",
            labelWidth: 160,
            span: 12,
            rules: [{
              required: true,
              message: "请输入社会信用代码",
              trigger: "blur"
            }]
          },
          {
            label: "辖区",
            prop: "jurisdiction",
            // type: "tree",
            // disabled: true,
            type: "tree",
            dicUrl: "/api/jurisdiction/lazy-trees",
            props: {
              label: "title",
              value: "id"
            },
            labelWidth: 160,
            span: 12,
          },
          {
            label: "企业类型",
            prop: "ptype",
            hide: true,
            display: false,
          },
          {
            label: "所属单位",
            prop: "deptid",
            hide: true,
            display: false,
          },
          {
            label: "企业名称",
            prop: "enterprisename",
            labelWidth: 160,
            span: 12,
            rules: [{
              required: true,
              message: "请输入企业名称",
              trigger: "blur"
            }]
          },
          {
            label: "法定代表人",
            prop: "representative",
            labelWidth: 160,
            span: 12,
            rules: [{
              required: true,
              message: "请输入法定代表人",
              trigger: "blur"
            }]
          },
          {
            label: "法定代表人电话",
            prop: "representativecell",
            labelWidth: 160,
            span: 12,
            rules: [{
              required: true,
              message: "法定代表人电话",
              trigger: "blur"
            }]
          },
          {
            label: "联系人",
            prop: "contacts",
            labelWidth: 160,
            span: 12,
            rules: [{
              required: true,
              message: "联系人",
              trigger: "blur"
            }]
          },
          {
            label: "联系人电话",
            prop: "contactscell",
            labelWidth: 160,
            span: 12,
            rules: [{
              required: true,
              message: "联系人电话",
              trigger: "blur"
            }]
          },
          {
            label: "成立日期",
            prop: "establishtime",
            labelWidth: 160,
            span: 12,
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "timestamp",
          },
          {
            label: "注册资本(万元人民币)",
            prop: "registeredcapital",
            labelWidth: 160,
            span: 12,
            rules: [{
              required: true,
              message: "请输入注册资本",
              trigger: "blur"
            }]
          },
          // {
          //   label: "实缴资本(万元人民币)",
          //   prop: "capital",
          //   labelWidth: 160,
          //   span: 12,
          //   rules: [{
          //     required: true,
          //     message: "请输入实缴资本",
          //     trigger: "blur"
          //   }]
          // },
          {
            label: "组织机构代码",
            prop: "organizationcode",
            labelWidth: 160,
            span: 12,
            rules: [{
              required: true,
              message: "请输入组织机构代码",
              trigger: "blur"
            }]
          },
          {
            label: "工商注册号",
            prop: "registrationnumber",

            labelWidth: 160,
            span: 12,
            rules: [{
              required: true,
              message: "请输入工商注册号",
              trigger: "blur"
            }]
          },
          // {
          //   label: "纳税人识别号",
          //   prop: "identificationnumber",
          //   labelWidth: 160,
          //   span: 12,
          //   rules: [{
          //     required: true,
          //     message: "请输入纳税人识别号",
          //     trigger: "blur"
          //   }]
          // },
          {
            label: "注册地址",
            prop: "address",
            labelWidth: 160,
            span: 12,
            rules: [{
              required: true,
              message: "请输入注册地址",
              trigger: "blur"
            }]
          },
          {
            label: "经营范围",
            prop: "business",
            labelWidth: 160,
            span: 12,
            rules: [{
              required: true,
              message: "请输入经营范围",
              trigger: "blur"
            }]
          },
          {
            label: "所属地区",
            prop: "region",
            labelWidth: 160,
            span: 12,
            rules: [{
              required: true,
              message: "请输入所属地区",
              trigger: "blur"
            }]
          },
          {
            label: "登记机关",
            prop: "registration",
            labelWidth: 160,
            span: 12,
            rules: [{
              required: true,
              message: "请输入登记机关",
              trigger: "blur"
            }]
            // overHidden: true,
          },
          {
            label: "所属行业",
            prop: "industry",
            labelWidth: 160,
            span: 12,
            rules: [{
              required: true,
              message: "请输入所属行业",
              trigger: "blur"
            }]
          },
          {
            label: '拖拽上传',
            prop: 'imgUrl5',
            type: 'upload',
            span: 12,
            drag: true,
            propsHttp: {
              res: 'data'
            },
            tip: '只能上传jpg/png文件，且不超过500kb',
            action: '/api/blade-resource/oss/endpoint/put-file-attach?deptid=&type=0'
          },
        ]
      },
      option1: {
        delBtn: false,
        editBtn: false,
        addBtn: false,
        height: 'auto',
        calcHeight: 260,
        tip: false,
        searchShow: true,
        searchMenuSpan: 8,
        labelWidth: 130,
        headerAlign: 'center',
        align: 'center',
        border: true,
        index: true,
        viewBtn: true,
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: "企业名称",
            prop: "enterprisename",
            labelWidth: 160,
            span: 12,
            rules: [{
              required: true,
              message: "请输入企业名称",
              trigger: "blur"
            }]
          },
          {
            label: "许可类型",
            prop: "ptype",
            type: "select",
            dicData: [
              {
                label: "保安服务公司许可",
                value: '0'
              },
              {
                label: "保安培训公司许可",
                value: '1'
              },
              {
                label: "保安服务公司备案",
                value: '2'
              },
              {
                label: "跨区域备案",
                value: '3'
              },
              {
                label: "备案撤销",
                value: '4'
              },
            ],
          },
          {
            label: "审批意见",
            prop: "reason",

          },
          {
            label: "提交时间",
            prop: "permitime",
            addDisplay: false,
            type: "date",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
          },
          {
            label: "审核状态",
            prop: "type",
            addDisplay: false,
            type: "select",
            dicData: [
              {
                label: "通过",
                value: '0'
              },
              {
                label: "不通过",
                value: '1'
              },
              {
                label: "待审核",
                value: '2'
              }
            ],
          },

        ]
      },
      data0: {},
      forms: 0,
      onit: false,
      onits: false,
      menuData: [
        {
          menuName: '保安服务公司许可',
          centerUrl: '/img/logo.png',
          topUrl: 'url(/img/permit/服务许可背景图.jpg)',
          targetUrl: 'per'
        },
        {
          menuName: '保安服务公司备案',
          centerUrl: '/img/logo.png',
          topUrl: 'url(/img/permit/服务许可背景图.jpg)'
        },
        {
          menuName: '自招保安单位备案撤销',
          centerUrl: '/img/logo.png',
          topUrl: 'url(/img/permit/服务许可背景图.jpg)'
        },
        {
          menuName: '跨区域经营备案',
          centerUrl: '/img/logo.png',
          topUrl: 'url(/img/permit/服务许可背景图.jpg)'
        },
      ],
      userName:''
    }
  components: {
    examineCard: examineCard,
    Approval: Approval,
    securityPermit: securityPermit,
    crossRegion: crossRegion,
    securityGuard: securityGuard,
    securityTraining: securityTraining,
    cancellationOfFiling: cancellationOfFiling,
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  data() {
    return {
      userName: "",
      showCard: false,
      zhezao: false,
      data: [],
      dataCard: [
        {
          menuName: "保安服务公司许可申请",
          centerUrl: "/img/logo.png",
          topUrl: "url(/img/permit/服务许可背景图.jpg)",
          targetUrl: "per",
          type: 0,
        },
        {
          menuName: "跨区域经营备案",
          centerUrl: "/img/logo.png",
          topUrl: "url(/img/permit/服务许可背景图.jpg)",
          type: 3,
        },
        {
          menuName: "自招保安单位备案",
          centerUrl: "/img/logo.png",
          topUrl: "url(/img/permit/服务许可背景图.jpg)",
          type: 1,
        },
        {
          menuName: "保安培训公司备案",
          centerUrl: "/img/logo.png",
          topUrl: "url(/img/permit/服务许可背景图.jpg)",
          type: 2,
        },
        {
          menuName: "自招保安单位备案撤销",
          centerUrl: "/img/logo.png",
          topUrl: "url(/img/permit/服务许可背景图.jpg)",
          type: 6,
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["userInfo", "ApprovalShow", "useWhere"]),
  },
  created() {
    this.convert();
    this.cc();
    var page = {
      pageSize: 10,
      currentPage: 1,
      total: 0,
    };
    this.onLoad(page);
  },
  methods: {
    cc: function(){
      this.userName =this.$store.getters.userInfo.user_name
    },
    convert: function () {
      var caridid = this.$store.getters.userInfo.Id;
      selectIn(caridid).then(res => {
        this.option.column[1].value = res.data.data.creditCode
        this.option.column[2].value = res.data.data.jurisdiction
        this.option.column[3].value = res.data.data.enterpriseName
        this.option.column[4].value = res.data.data.representative
        this.option.column[5].value = res.data.data.representativecell
        this.option.column[6].value = res.data.data.contacts
        this.option.column[7].value = res.data.data.contactscell
        this.option.column[8].value = res.data.data.establishTime
        this.option.column[9].value = res.data.data.registeredCapital
        this.option.column[10].value = res.data.data.capital
        this.option.column[11].value = res.data.data.organizationCode
        this.option.column[12].value = res.data.data.identificationNumber
        this.option.column[13].value = res.data.data.enterprises
        this.option.column[14].value = res.data.data.address
        this.option.column[15].value = res.data.data.business
        this.option.column[16].value = res.data.data.region
        this.option.column[17].value = res.data.data.registration
        this.option.column[18].value = res.data.data.industry
      })
    },
    ss() {
      this.onits = true;
      //this.$router.push({path: '/homespi'});
    },
    onNext() {
      this.forms = 1;
      this.onit = false;
    },
    targetClick(item) {
      var url = item.targetUrl
      if (url == "per") {
        this.onit = true;
      }
    },
    tip0() {
      this.forms = 2;
    },
    qx(){
      this.forms = 0;
    },
    up() {
      var d = {};
      for (var k in this.obj0) {
        for (var i in this.option.column) {
          if (k == this.option.column[i].prop && k != "title0") {
            d[k] = this.obj0[k];
          }
        }
      }
      this.data0 = d;
      this.data0.ptype = this.$refs.name.value
      this.data0.cardid = this.$store.getters.userInfo.Id
      add(this.data0).then(() => {
        this.tipover();
      });
    },
    tip1() {
      var d = {};
      for (var k in this.obj0) {
        for (var i in this.option.column) {
          if (k == this.option.column[i].prop && k != "title0") {
            d[k] = this.obj0[k];
          }
        }
      }
      this.data0 = d;
      this.data0.ptype = this.$refs.name.value
      this.data0.deptid = this.$store.getters.userInfo.dept_id
      adds(this.data0).then(() => {
        this.tipover();
       });
    },
    tip1up1() {
      this.forms = 1;
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
      params["cardid"] = this.userInfo.Id;
      getList(page.currentPage, page.pageSize, params).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        getListre(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(ress => {
          this.data = this.data.concat(ress.data.data.records)
        });
        getListrek(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(resk => {
          this.data = this.data.concat(resk.data.data.records)
        });
        getListrev(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(resv => {
          this.data = this.data.concat(resv.data.data.records)
        });
      });
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        console.log(error);
      });
    }
    ,
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
        getListre(page.currentPage, page.pageSize, params).then((ress) => {
          this.data = this.data.concat(ress.data.data.records);
          getListrek(page.currentPage, page.pageSize, params).then((resk) => {
            this.data = this.data.concat(resk.data.data.records);
            getListrev(page.currentPage, page.pageSize, params).then((resv) => {
              this.data = this.data.concat(resv.data.data.records);
              console.log(this.data.length);
              if (this.data.length >= 1) {
                // this.$store.commit("changehandle", false);
              } else {
                // this.$store.commit("changehandle", true);
              }
              this.showCard = true;
              this.data.forEach((item) => {
                for (const key in this.dataCard) {
                  if (this.dataCard[key].type == item.ptype) {
                    console.log(this.dataCard[key].menuName);
                  }
                }
              });
            });
          });
        });
      });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    cc: function () {
      this.userName = this.userInfo.user_name;
    },
    tipover() {
      this.forms = 0;
      this.obj0 = {
        title0: "保安单位基本信息",
      };
      this.data0 = {};
    openApproval() {
      this.$store.commit("doitApprovalShow", true);
    },
    js_method() {
      this.onit = false;
    ApprovalClose() {
      this.$store.commit("doitApprovalShow", false);
    },
    js_methods() {
      this.onits = false;
    openClose() {
      this.$store.commit("changeuseWhere", "close");
    },
    logout() {
      this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        type: "warning"
        type: "warning",
      }).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          resetRouter();
          this.$router.push({path: "/login"});
          this.$router.push({ path: "/login" });
        });
      });
    }
  }
}
    },
    openMain(val, goon) {
      this.zhezao = true;
      if (goon == "openLook") {
        this.$store.commit("doitApprovalShow", true);
        return;
      }
      if (val == 0) {
        //保安服务公司许可
        console.log(this.dataCard[val].menuName);
        this.$store.commit("changeuseWhere", val);
      } else if (val == 1) {
        //跨区域经营备案
        this.$store.commit("changeuseWhere", val);
        console.log(this.dataCard[val].menuName);
      } else if (val == 2) {
        //自招保安单位备案
        this.$store.commit("changeuseWhere", val);
        console.log(this.dataCard[val].menuName);
      } else if (val == 3) {
        //保安培训公司备案
        this.$store.commit("changeuseWhere", val);
        console.log(this.dataCard[val].menuName);
      } else if (val == 4) {
        //自招保安单位备案撤销
        this.$store.commit("changeuseWhere", val);
        console.log(this.dataCard[val].menuName);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dtype {
  width: 80px;
}

.dx {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 6px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #DFDFDF;
}

.zc {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 6px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #29C093;
}

.yj {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 6px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #F34A4A;
}

.gz {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 6px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #F48F57;
}

.el-tag {
  display: inline-block;
  width: 80px;
  /*padding-right: 40px !important;*/

}

.layui-layer-setwin {
  position: absolute;
  right: 15px;
  right: 0;
  top: 15px;
  font-size: 0;
  line-height: initial;

  .layui-layer-close1 {
    color: #fff;
    background: url(/img/permit/close-btn.png) no-repeat;
    padding-right: 10px;
  }

  a {
    position: relative;
    width: 16px;
    height: 16px;
    margin-left: 10px;
    font-size: 12px;
    _overflow: hidden;
    display: inline-block;
  }
}

.close {
  position: absolute;
  right: 20px;
  top: 5px;
}

.hand-next {
  text-align: center;
  padding: 15px 0;
}

.first-box-outers {
  position: fixed;
  pointer-events: auto;
  z-index: 999;
<style lang="scss">
#examine {
  width: 100%;
  height: 80%;
  top: 120px;
  left: 340px;
  background-color: #fff;
  box-shadow: 1px 1px 50px rgba(0, 0, 0, .3);
  border-radius: 2px;

  max-height: 790px;
  max-width: 1240px;

  .first-box-titles {
    padding: 0 80px 0 20px;
    height: 42px;
    line-height: 42px;
    overflow: hidden;
    border-radius: 2px 2px 0 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  .examine_heard {
    background-color: #25aff3;
    width: 100%;

  }

  .first-box-content {
    height: calc(100% - 42px);
  }

}

.first-box-outer {
  position: fixed;
  pointer-events: auto;
  z-index: 999;
  width: 100%;
  height: 90%;
  top: 30px;
  left: 340px;
  background-color: #fff;
  box-shadow: 1px 1px 50px rgba(0, 0, 0, .3);
  border-radius: 2px;

  max-height: 790px;
  max-width: 1240px;

  .first-box-title {
    padding: 0 80px 0 20px;
    height: 42px;
    line-height: 42px;
    overflow: hidden;
    border-radius: 2px 2px 0 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;

  }

  .first-box-content {
    height: calc(100% - 42px);
    overflow-y: auto;

    .handling-guideline {
      .hand-title {
        text-align: center;
        font-size: 20px;
    padding-left: 30px;
    box-sizing: border-box;
    height: 50px;
    color: #ffffff;
    font-size: 24px;
    line-height: 50px;
    .e_h_right {
      float: right;
      margin-right: 20px;
      img {
        display: inline-block;
        vertical-align: middle;
      }
      span {
        font-style: normal;
        color: #ffffff;
        font-size: 16px;
        line-height: 50px;
        font-weight: 600;
        display: inline-block;
        margin: 0;
        padding-left: 4px;
      }

      .hand-content {
        width: 1000px;
        padding: 30px;
        margin: 0 auto;
        margin-bottom: 0px;
        background: #f9f9f9;
        margin-bottom: 15px;

        p {
          font-size: 14px;
          line-height: 28px;

          label {
            font-weight: bold;
          }
        }
      div {
        display: inline;
        margin-left: 15px;
        color: #ffffff;
        font-size: 16px;
        line-height: 50px;
      }
    }

  }

}

.layui-layer-setwin {
  position: absolute;
  right: 15px;
  right: 0;
  top: 15px;
  font-size: 0;
  line-height: initial;
}

.detail-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  margin: auto;
  width: 600px;
  height: 420px;
  background: #fff;

  .radio-custom {
    position: relative;

    input {
      position: absolute;
      top: 4px;
      left: 0px;
    }
  }

}

.radio-custom {
  margin-top: 15px;
}

.layui-layer-title {
  background: #2575eb;
  color: #fff;
  border: none;
  font-size: 16px;
  text-align: center;
}

.radio-custom label {
  min-height: 22px;
  line-height: 22px;
  margin-bottom: 0;
  font-weight: 300;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  padding-left: 30px;
  margin-left: 25px;
  color: black;
  font-weight: 700;
}

.radio-custom .handling-guideline {
  margin-left: 50px;
  margin-right: 25px;
  margin-top: 5px;
}

//#barcon {
//  position: fixed;
//  top: calc(50% - 200px);
//  left: calc(50% - 200px);
//  z-index: 10;
//  //top: 0;
//  width: 400px;
//  height: 400px;
//  background-color: red;
//}
.main {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  position: absolute;
  top: 20%;
  right: 0;
  left: 0;
  bottom: auto;
  margin: auto;

  .item-box {
    width: calc(25% - 12px);
    height: 280px;
    position: relative;
    margin: 6px;
    background: rgb(255, 255, 255);
    border-radius: 10px;

    .box-top {
      position: absolute;
      top: 0px;
      left: 0px;
      width: calc(100%);
      height: calc(100% - 36px);
      border-radius: 10px 10px 0 0;

      .img-box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(17, 17, 17, 0.568);

        img {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          width: 24px;
          height: 24px;
        }
      }
    }

    .box-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
  .examine_body {
    width: 100%;
    height: calc(100% - 50px);
    .title {
      width: 100%;
      height: 36px;
      line-height: 36px;
      text-align: center;
      background: white;
      border-radius: 0 0 10px 10px;
      height: 200px;
      // border: 1px solid red;
      display: flex;
      align-items: center;
      padding-bottom: 120px;
      box-sizing: border-box;
      justify-content: center;
      button {
        position: relative;
        left: 30%;
        border: 1px solid rgba($color: #000000, $alpha: 0.3);
        border-radius: 5px;
        height: 25px;
        width: 140px;
        text-align: center;
        background-color: #fff;
      }
    }
    .b_main {
      width: 100%;
      height: calc(100% - 220px);
      // border: 1px solid red;
      padding: 0 10%;
      box-sizing: border-box;
    }
  }
  .zhezhao {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba($color: #000000, $alpha: 0.2);
  }
  .Approval,
  .securityPermit {
    position: absolute;
    top: calc(10%);
    left: calc(50% - 621px);
    width: 1243px;
    // height: 766px;
  }
  .ApprovalClose {
    position: absolute;
    top: 17px;
    font-size: 20px;
    right: 11px;
    z-index: 10;
    &:hover {
      color: red;
    }
  }
}
</style>

//弹窗样式
.heards {
  margin: 0 auto;
  width: calc(100% - 10px);
  height: 40px;
  position: relative;
  top: 10px;
  color: #fff;
  border-radius: 10px 10px 0 0;
  text-align: center;
  line-height: 40px;
  left: 0;
  background-color: #25aff3;
}
.first-box-outer {
  width: 100%;
  max-height: 682px;
  overflow: scroll;
  .f-b-o-in {
    width: 100%;
    height: 620px;
    overflow: scroll;
  }
}
.handling-guideline {
  width: 85%;
  padding: 10px;
  margin: 0 auto;
  background-color: rgba($color: #a1a1a1, $alpha: 0.3);
}
.hand-next {
  margin-top: 15px;
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>

 src/views/home/index1.vue

New file
@@ -0,0 +1,1274 @@
<template>
  <div style="width: 100%; height: 100%; background: #ccc">
    <div style="background-color: #25aff3; width: 100%; height: 50px">
      <span
        style="
          display: inline-block;
          color: #ffffff;
          font-size: 24px;
          line-height: 50px;
          margin-left: 5px;
        "
        >服务许可审批备案系统</span
      >
      <div
        style="
          display: block;
          float: right;
          height: 50px;
          padding-right: 52px;
          color: #fff;
          line-height: 50px;
          cursor: pointer;
          position: relative;
        "
      >
        <img
          src="http://nx.baibaodun.cn:80/assets/images/username-person.png"
          style="display: inline-block; vertical-align: middle"
        />
        <i
          style="
            font-style: normal;
            color: #ffffff;
            font-size: 16px;
            line-height: 50px;
            display: inline-block;
            margin: 0;
            padding-left: 4px;
          "
          >{{ userName }}</i
        >
        <a
          style="
            margin-left: 15px;
            color: #ffffff;
            font-size: 16px;
            line-height: 50px;
          "
          @click="logout"
          >退出登录</a
        >
      </div>
    </div>
    <div
      style="position: relative; width: 100%; height: 100%; background: #eff2fa"
    >
      <div class="header">
        <h2 style="text-align: center; margin: 0; padding-top: 20px">
          保安相关申请流程
        </h2>
        <button
          style="
            border: 1px solid red;
            border-radius: 3px;
            position: absolute;
            right: 16%;
            top: 30px;
            height: 25px;
            width: 140px;
            text-align: center;
          "
          @click="ss"
        >
          审批进度查询
        </button>
      </div>

      <div class="main">
        <div v-for="(item, index) in menuData" :key="index" class="item-box">
          <div
            class="box-top"
            :style="{ background: item.topUrl }"
            @click="targetClick(item)"
          >
            <div class="img-box">
              <img :src="item.centerUrl" alt="" />
            </div>
          </div>

          <div class="box-bottom">
            {{ item.menuName }}
          </div>
        </div>
      </div>
    </div>
    <div class="detail-box" v-show="onit">
      <span class="layui-layer-setwin">
        <a
          class="layui-layer-ico layui-layer-close layui-layer-close1"
          href="javascript:;"
          id="close"
        ></a>
      </span>
      <div class="layui-layer-title" style="height: 40px; line-height: 40px">
        保安服务公司许可证
      </div>
      <span class="layui-layer-setwin"
        ><a
          class="layui-layer-ico layui-layer-close layui-layer-close1"
          href="javascript:;"
          @click="js_method"
        ></a
      ></span>
      <div id="" class="layui-layer-content" style="height: 298px">
        <div class="radio-custom radio-primary">
          <label for="sponsorlicenseType1">
            <input
              id="sponsorlicenseType1"
              type="radio"
              value="0"
              name="sponsorlicenseType"
              ref="name"
              checked=""
            />保安服务公司设立许可</label
          >
          <div class="handling-guideline">
            <p>
              材料说明：普通保安服务公司是指申请服务范围为：门卫、巡逻、守护、随身护卫、安全检查、安全技术防范、安全风险评估、区域秩序维护的公司。
            </p>
          </div>
        </div>
        <div class="radio-custom radio-primary">
          <label for="sponsorlicenseType2"
            ><input
              id="sponsorlicenseType2"
              type="radio"
              value="1"
              ref="name"
              name="sponsorlicenseType"
            />保安培训公司设立许可</label
          >
          <div class="handling-guideline">
            <p>
              国务院《保安服务管理条例》（2009年国务院令第564号）第九条：申请设立保安服务公司,应当向所在地设区的市级人民政府公安机关提交申请书以及能够证明其符合本条例第八条规定条件的材料。
            </p>
          </div>
        </div>
      </div>
      <div class="layui-layer-btn" style="margin-left: 260px">
        <button
          class="layui-layer-btn0"
          @click="onNext"
          style="
            position: absolute;
            width: 95px;
            border: 1px solid #2673e5;
            background: rgb(46, 141, 237);
            border-radius: 4px;
            width: 100px;
            height: 38px;
          "
        >
          确认
        </button>
      </div>
    </div>

    <div class="lod" v-if="forms != 0">
      <div class="lod-in">
        <div v-show="forms == 1" class="first-box-outer">
          <div class="first-box-title" style="">设立保安服务公司行政许可证</div>
          <div class="first-box-content">
            <div class="handling-guideline">
              <h2 class="hand-title">保安服务公司许可办理指南</h2>
              <div class="hand-content">
                <p><label>审批依据：</label></p>
                <p>
                  1、《保安服务管理条例》(中华人民共和国国务院令第564号)；<br />

                  2、《公安机关实施保安服务管理条例办法》(中华人民共和国公安部令
                  第 112 号)；<br />

                  3、关于印发《宁夏回族自治区保安服务公司许可备案实施细则（试行）》和《宁夏回族自治区保安培训机构管理办法实施细则（试行）》的通知（宁公通〔2017〕61号）；<br />
                </p>
                <p>
                  <label>申请条件：</label
                  >自然人、法人和其他组织。自然人需要有完全民事行为能力，年满18周岁且不具有精神疾病。
                </p>
                <p><label>申请材料：</label></p>
                <p>
                  1、《申请设立保安服务公司行政许可审批表》。<br />
                  2、设立保安服务公司申请书<br />
                  3、设立保安服务公司可行性分析报告<br />

                  4、保安服务从业单位法定代表人（主要负责人）登记表<br />
                  5、保安服务公司章程<br />
                  6、注册资本认缴金额证明。<br />
                  7、拟任的法定代表人、主要管理人员应提供下列材料：<br />
                  ①有效身份证件；②保安师资格证书原件及复印件；③个人简历及5年以上军队、公安、安全、审判、检察、司法行政或者治保安卫、保安经营管理工作经验证明。<br />
                  8、专业技术人员名单，法律、行政法规有资格要求的资格证明。<br />
                  9、拟设保安服务公司住所的所有权或使用权有效证明文件和提供保安服务所需的有关设备、交通工具等材料并附彩色照片。<br />
                  10、组织机构和保安服务管理制度、岗位责任制度、保安员管理制度材料。<br />
                  11、工商行政管理部门核发的企业名称预先核准通知书。<br />
                </p>

                <p>
                  <label
                    >申请设立中外合资、中外合作或者外资独资保安服务公司除以上1-11项内容外还需另外提供以下材料：</label
                  >
                </p>

                <p>
                  1、中外合资、中外合作合同原件及复印件。<br />

                  2、外方的资信证明和注册登记文件原件及复印件。<br />

                  3、境外法定代表人、主要管理人员所属国家或者地区无被刑事处罚记录证明（原居住地警察机构出具并经公证机关公证）。<br />

                  4、境外法定代表人、主要管理人员5年以上保安经营管理工作经验证明。<br />
                </p>

                <p><label>法定周期：</label>区、市20个工作日</p>
                <p><label>承诺时限：</label>区、市20个工作日</p>

                <p><label>受理部门：</label>市级公安机关</p>

                <p><label>审批机关：：</label>区级公安机关</p>

                <p>
                  <label
                    >申请设立或增设从事武装守护押运业务的保安服务公司还需另外提供以下材料：</label
                  >
                </p>

                <p>
                  1、1000万元人民币以上注册资本。<br />

                  2、出资属国有独资或者国有资本占注册资本总额51%以上的有效证明文件原件及复印件。<br />

                  3、符合国家或者行业标准的专用运输车辆以及通信、报警设备的材料。<br />

                  4、枪支安全管理制度和保管设施情况的材料。<br />
                </p>

                <p><label>法定周期：</label>区、市20个工作日</p>
                <p><label>承诺时限：</label>区、市20个工作日</p>

                <p><label>受理部门：</label>市级公安机关</p>

                <p><label>审批机关：：</label>区级公安机关</p>

                <p><label>审批机关：：</label>公安部</p>
              </div>
            </div>
            <div class="hand-next">
              <el-button type="primary" @click="tip0">下一步</el-button>
              <el-button type="primary" @click="qx">取消</el-button>
            </div>
          </div>
        </div>
        <div v-show="forms == 2" class="first-box-outer">
          <avue-form ref="form1" v-model="obj0" :option="option">
            <template slot="menuForm">
              <el-button type="primary" @click="tip1up1">上一页</el-button>
              <el-button type="primary" @click="tip1">暂存</el-button>
              <el-button type="primary" @click="up()">提交审批</el-button>
              <el-button type="info" @click="tipover">取消</el-button>
            </template>
          </avue-form>
        </div>
      </div>
    </div>

    <div class="lod" v-show="onits">
      <div class="lod-in">
        <div class="first-box-outers">
          <div class="first-box-titles">
            审批进度
            <a
              style="margin-left: 1120px; font-size: 18px"
              href="javascript:;"
              @click="js_methods"
              >X</a
            >
          </div>
          <div class="first-box-content">
            <avue-crud
              :option="option1"
              :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"
              :row-style="rowStyle"
            >
              <template class="tdtype" slot-scope="{ row }" slot="type">
                <el-tag class="dtype">
                  {{
                    row.type == "0"
                      ? "通过"
                      : row.type == "1"
                      ? "不通过"
                      : "待审核"
                  }}
                  <i class="gz" v-if="row.type == '0'"></i>
                  <i class="yj" v-if="row.type == '1'"></i>
                  <i class="zc" v-if="row.type == '2'"></i>
                </el-tag>
              </template>
            </avue-crud>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  add,
  adds,
  getDetail,
  getList,
  getListre,
  getListrek,
  getListrev,
  remove,
  selectIn,
  update,
} from "@/api/permit/permit";
import { mapGetters } from "vuex";
import { resetRouter } from "@/router/router";

export default {
  data() {
    return {
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      obj0: {
        title0: "保安服务公司许可证审批",
      },
      // option0: {
      //   emptyBtn: false,
      //   submitBtn: false,
      //   gutter: 30,
      //   column: column0,
      // },
      option: {
        emptyBtn: false,
        submitBtn: false,
        gutter: 50,
        column: [
          {
            label: "",
            labelWidth: 20,
            type: "title",
            prop: "title0",
            span: 24,
            styles: {
              fontSize: "24px",
            },
          },
          {
            label: "统一社会信用代码",
            prop: "creditcode",
            labelWidth: 160,
            span: 12,
            rules: [
              {
                required: true,
                message: "请输入社会信用代码",
                trigger: "blur",
              },
            ],
          },
          {
            label: "辖区",
            prop: "jurisdiction",
            // type: "tree",
            // disabled: true,
            type: "tree",
            dicUrl: "/api/jurisdiction/lazy-trees",
            props: {
              label: "title",
              value: "id",
            },
            labelWidth: 160,
            span: 12,
          },
          {
            label: "企业类型",
            prop: "ptype",
            hide: true,
            display: false,
          },
          {
            label: "所属单位",
            prop: "deptid",
            hide: true,
            display: false,
          },
          {
            label: "企业名称",
            prop: "enterprisename",
            labelWidth: 160,
            span: 12,
            rules: [
              {
                required: true,
                message: "请输入企业名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "法定代表人",
            prop: "representative",
            labelWidth: 160,
            span: 12,
            rules: [
              {
                required: true,
                message: "请输入法定代表人",
                trigger: "blur",
              },
            ],
          },
          {
            label: "法定代表人电话",
            prop: "representativecell",
            labelWidth: 160,
            span: 12,
            rules: [
              {
                required: true,
                message: "法定代表人电话",
                trigger: "blur",
              },
            ],
          },
          {
            label: "联系人",
            prop: "contacts",
            labelWidth: 160,
            span: 12,
            rules: [
              {
                required: true,
                message: "联系人",
                trigger: "blur",
              },
            ],
          },
          {
            label: "联系人电话",
            prop: "contactscell",
            labelWidth: 160,
            span: 12,
            rules: [
              {
                required: true,
                message: "联系人电话",
                trigger: "blur",
              },
            ],
          },
          {
            label: "成立日期",
            prop: "establishtime",
            labelWidth: 160,
            span: 12,
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "timestamp",
          },
          {
            label: "注册资本(万元人民币)",
            prop: "registeredcapital",
            labelWidth: 160,
            span: 12,
            rules: [
              {
                required: true,
                message: "请输入注册资本",
                trigger: "blur",
              },
            ],
          },
          // {
          //   label: "实缴资本(万元人民币)",
          //   prop: "capital",
          //   labelWidth: 160,
          //   span: 12,
          //   rules: [{
          //     required: true,
          //     message: "请输入实缴资本",
          //     trigger: "blur"
          //   }]
          // },
          {
            label: "组织机构代码",
            prop: "organizationcode",
            labelWidth: 160,
            span: 12,
            rules: [
              {
                required: true,
                message: "请输入组织机构代码",
                trigger: "blur",
              },
            ],
          },
          {
            label: "工商注册号",
            prop: "registrationnumber",

            labelWidth: 160,
            span: 12,
            rules: [
              {
                required: true,
                message: "请输入工商注册号",
                trigger: "blur",
              },
            ],
          },
          // {
          //   label: "纳税人识别号",
          //   prop: "identificationnumber",
          //   labelWidth: 160,
          //   span: 12,
          //   rules: [{
          //     required: true,
          //     message: "请输入纳税人识别号",
          //     trigger: "blur"
          //   }]
          // },
          {
            label: "注册地址",
            prop: "address",
            labelWidth: 160,
            span: 12,
            rules: [
              {
                required: true,
                message: "请输入注册地址",
                trigger: "blur",
              },
            ],
          },
          {
            label: "经营范围",
            prop: "business",
            labelWidth: 160,
            span: 12,
            rules: [
              {
                required: true,
                message: "请输入经营范围",
                trigger: "blur",
              },
            ],
          },
          {
            label: "所属地区",
            prop: "region",
            labelWidth: 160,
            span: 12,
            rules: [
              {
                required: true,
                message: "请输入所属地区",
                trigger: "blur",
              },
            ],
          },
          {
            label: "登记机关",
            prop: "registration",
            labelWidth: 160,
            span: 12,
            rules: [
              {
                required: true,
                message: "请输入登记机关",
                trigger: "blur",
              },
            ],
            // overHidden: true,
          },
          {
            label: "所属行业",
            prop: "industry",
            labelWidth: 160,
            span: 12,
            rules: [
              {
                required: true,
                message: "请输入所属行业",
                trigger: "blur",
              },
            ],
          },
          {
            label: "拖拽上传",
            prop: "imgUrl5",
            type: "upload",
            span: 12,
            drag: true,
            propsHttp: {
              res: "data",
            },
            tip: "只能上传jpg/png文件，且不超过500kb",
            action:
              "/api/blade-resource/oss/endpoint/put-file-attach?deptid=&type=0",
          },
        ],
      },
      option1: {
        delBtn: false,
        editBtn: false,
        addBtn: false,
        height: "auto",
        calcHeight: 260,
        tip: false,
        searchShow: true,
        searchMenuSpan: 8,
        labelWidth: 130,
        headerAlign: "center",
        align: "center",
        border: true,
        index: true,
        viewBtn: true,
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: "企业名称",
            prop: "enterprisename",
            labelWidth: 160,
            span: 12,
            rules: [
              {
                required: true,
                message: "请输入企业名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "许可类型",
            prop: "ptype",
            type: "select",
            dicData: [
              {
                label: "保安服务公司许可",
                value: "0",
              },
              {
                label: "保安培训公司许可",
                value: "1",
              },
              {
                label: "保安服务公司备案",
                value: "2",
              },
              {
                label: "跨区域备案",
                value: "3",
              },
              {
                label: "备案撤销",
                value: "4",
              },
            ],
          },
          {
            label: "审批意见",
            prop: "reason",
          },
          {
            label: "提交时间",
            prop: "permitime",
            addDisplay: false,
            type: "date",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
          },
          {
            label: "审核状态",
            prop: "type",
            addDisplay: false,
            type: "select",
            dicData: [
              {
                label: "通过",
                value: "0",
              },
              {
                label: "不通过",
                value: "1",
              },
              {
                label: "待审核",
                value: "2",
              },
            ],
          },
        ],
      },
      data0: {},
      forms: 0,
      onit: false,
      onits: false,
      menuData: [
        {
          menuName: "保安服务公司许可",
          centerUrl: "/img/logo.png",
          topUrl: "url(/img/permit/服务许可背景图.jpg)",
          targetUrl: "per",
        },
        {
          menuName: "保安服务公司备案",
          centerUrl: "/img/logo.png",
          topUrl: "url(/img/permit/服务许可背景图.jpg)",
        },
        {
          menuName: "自招保安单位备案撤销",
          centerUrl: "/img/logo.png",
          topUrl: "url(/img/permit/服务许可背景图.jpg)",
        },
        {
          menuName: "跨区域经营备案",
          centerUrl: "/img/logo.png",
          topUrl: "url(/img/permit/服务许可背景图.jpg)",
        },
      ],
      userName: "",
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    this.convert();
    this.cc();
  },
  methods: {
    cc: function () {
      this.userName = this.$store.getters.userInfo.user_name;
    },
    convert: function () {
      var caridid = this.$store.getters.userInfo.Id;
      selectIn(caridid).then((res) => {
        this.option.column[1].value = res.data.data.creditCode;
        this.option.column[2].value = res.data.data.jurisdiction;
        this.option.column[3].value = res.data.data.enterpriseName;
        this.option.column[4].value = res.data.data.representative;
        this.option.column[5].value = res.data.data.representativecell;
        this.option.column[6].value = res.data.data.contacts;
        this.option.column[7].value = res.data.data.contactscell;
        this.option.column[8].value = res.data.data.establishTime;
        this.option.column[9].value = res.data.data.registeredCapital;
        this.option.column[10].value = res.data.data.capital;
        this.option.column[11].value = res.data.data.organizationCode;
        this.option.column[12].value = res.data.data.identificationNumber;
        this.option.column[13].value = res.data.data.enterprises;
        this.option.column[14].value = res.data.data.address;
        this.option.column[15].value = res.data.data.business;
        this.option.column[16].value = res.data.data.region;
        this.option.column[17].value = res.data.data.registration;
        this.option.column[18].value = res.data.data.industry;
      });
    },
    ss() {
      this.onits = true;
      //this.$router.push({path: '/homespi'});
    },
    onNext() {
      this.forms = 1;
      this.onit = false;
    },
    targetClick(item) {
      var url = item.targetUrl;
      if (url == "per") {
        this.onit = true;
      }
    },
    tip0() {
      this.forms = 2;
    },
    qx() {
      this.forms = 0;
    },
    up() {
      var d = {};
      for (var k in this.obj0) {
        for (var i in this.option.column) {
          if (k == this.option.column[i].prop && k != "title0") {
            d[k] = this.obj0[k];
          }
        }
      }
      this.data0 = d;
      this.data0.ptype = this.$refs.name.value;
      this.data0.cardid = this.$store.getters.userInfo.Id;
      add(this.data0).then(() => {
        this.tipover();
      });
    },
    tip1() {
      var d = {};
      for (var k in this.obj0) {
        for (var i in this.option.column) {
          if (k == this.option.column[i].prop && k != "title0") {
            d[k] = this.obj0[k];
          }
        }
      }
      this.data0 = d;
      this.data0.ptype = this.$refs.name.value;
      this.data0.deptid = this.$store.getters.userInfo.dept_id;
      adds(this.data0).then(() => {
        this.tipover();
      });
    },
    tip1up1() {
      this.forms = 1;
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        getListre(
          page.currentPage,
          page.pageSize,
          Object.assign(params, this.query)
        ).then((ress) => {
          this.data = this.data.concat(ress.data.data.records);
        });
        getListrek(
          page.currentPage,
          page.pageSize,
          Object.assign(params, this.query)
        ).then((resk) => {
          this.data = this.data.concat(resk.data.data.records);
        });
        getListrev(
          page.currentPage,
          page.pageSize,
          Object.assign(params, this.query)
        ).then((resv) => {
          this.data = this.data.concat(resv.data.data.records);
        });
      });
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          console.log(error);
        }
      );
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then((res) => {
          this.form = res.data.data;
        });
      }
      done();
    },
    tipover() {
      this.forms = 0;
      this.obj0 = {
        title0: "保安单位基本信息",
      };
      this.data0 = {};
    },
    js_method() {
      // this.onit = false;
      this.onNext();
    },
    js_methods() {
      this.onits = false;
    },
    logout() {
      this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        type: "warning",
      }).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          resetRouter();
          this.$router.push({ path: "/login" });
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dtype {
  width: 80px;
}

.dx {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 6px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #dfdfdf;
}

.zc {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 6px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #29c093;
}

.yj {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 6px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #f34a4a;
}

.gz {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  margin-left: 6px;
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: #f48f57;
}

.el-tag {
  display: inline-block;
  width: 80px;
  /*padding-right: 40px !important;*/
}

.layui-layer-setwin {
  position: absolute;
  right: 15px;
  right: 0;
  top: 15px;
  font-size: 0;
  line-height: initial;

  .layui-layer-close1 {
    color: #fff;
    background: url(/img/permit/close-btn.png) no-repeat;
    padding-right: 10px;
  }

  a {
    position: relative;
    width: 16px;
    height: 16px;
    margin-left: 10px;
    font-size: 12px;
    _overflow: hidden;
    display: inline-block;
  }
}

.close {
  position: absolute;
  right: 20px;
  top: 5px;
}

.hand-next {
  text-align: center;
  padding: 15px 0;
}

.first-box-outers {
  position: fixed;
  pointer-events: auto;
  z-index: 999;
  width: 100%;
  height: 80%;
  top: 120px;
  left: 340px;
  background-color: #fff;
  box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
  border-radius: 2px;

  max-height: 790px;
  max-width: 1240px;

  .first-box-titles {
    padding: 0 80px 0 20px;
    height: 42px;
    line-height: 42px;
    overflow: hidden;
    border-radius: 2px 2px 0 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    width: 100%;
  }

  .first-box-content {
    height: calc(100% - 42px);
  }
}

.first-box-outer {
  position: fixed;
  pointer-events: auto;
  z-index: 999;
  width: 100%;
  height: 90%;
  top: 30px;
  left: 340px;
  background-color: #fff;
  box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
  border-radius: 2px;

  max-height: 790px;
  max-width: 1240px;

  .first-box-title {
    padding: 0 80px 0 20px;
    height: 42px;
    line-height: 42px;
    overflow: hidden;
    border-radius: 2px 2px 0 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .first-box-content {
    height: calc(100% - 42px);
    overflow-y: auto;

    .handling-guideline {
      .hand-title {
        text-align: center;
        font-size: 20px;
        line-height: 50px;
        font-weight: 600;
      }

      .hand-content {
        width: 1000px;
        padding: 30px;
        margin: 0 auto;
        margin-bottom: 0px;
        background: #f9f9f9;
        margin-bottom: 15px;

        p {
          font-size: 14px;
          line-height: 28px;

          label {
            font-weight: bold;
          }
        }
      }
    }
  }
}

.layui-layer-setwin {
  position: absolute;
  right: 15px;
  right: 0;
  top: 15px;
  font-size: 0;
  line-height: initial;
}

.detail-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  margin: auto;
  width: 600px;
  height: 420px;
  background: #fff;

  .radio-custom {
    position: relative;

    input {
      position: absolute;
      top: 4px;
      left: 0px;
    }
  }
}

.radio-custom {
  margin-top: 15px;
}

.layui-layer-title {
  background: #2575eb;
  color: #fff;
  border: none;
  font-size: 16px;
  text-align: center;
}

.radio-custom label {
  min-height: 22px;
  line-height: 22px;
  margin-bottom: 0;
  font-weight: 300;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  padding-left: 30px;
  margin-left: 25px;
  color: black;
  font-weight: 700;
}

.radio-custom .handling-guideline {
  margin-left: 50px;
  margin-right: 25px;
  margin-top: 5px;
}

//#barcon {
//  position: fixed;
//  top: calc(50% - 200px);
//  left: calc(50% - 200px);
//  z-index: 10;
//  //top: 0;
//  width: 400px;
//  height: 400px;
//  background-color: red;
//}
.main {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  position: absolute;
  top: 20%;
  right: 0;
  left: 0;
  bottom: auto;
  margin: auto;

  .item-box {
    width: calc(25% - 12px);
    height: 280px;
    position: relative;
    margin: 6px;
    background: rgb(255, 255, 255);
    border-radius: 10px;

    .box-top {
      position: absolute;
      top: 0px;
      left: 0px;
      width: calc(100%);
      height: calc(100% - 36px);
      border-radius: 10px 10px 0 0;

      .img-box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(17, 17, 17, 0.568);

        img {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          width: 24px;
          height: 24px;
        }
      }
    }

    .box-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 36px;
      line-height: 36px;
      text-align: center;
      background: white;
      border-radius: 0 0 10px 10px;
    }
  }
}
</style>

 vue.config.js

@@ -26,9 +26,10 @@
    proxy: {
      '/api': {
        //本地服务接口地址
        target: 'http://localhost:81',
        // target: 'http://localhost:81',
        //远程演示服务地址,可用于直接启动项目
        //target: 'https://saber.bladex.vip/api',
        // target: 'https://saber.bladex.vip/api',
        target: 'http://192.168.0.109:81',
        ws: true,
        pathRewrite: {
          '^/api': '/'