许可备案系统

tangzy

2021-08-13 af7f59aa953cac8c40921d37d2ba9aac7c4facdb

许可备案系统

 public/img/permit/close-btn.png

 public/img/permit/服务许可背景图.jpg

 public/index.html

@@ -18,6 +18,7 @@
  <link rel="stylesheet" href="<%= BASE_URL %>cdn/avue/2.8.12/index.css">
  <script src="<%= BASE_URL %>cdn/xlsx/FileSaver.min.js"></script>
  <script src="<%= BASE_URL %>cdn/xlsx/xlsx.full.min.js"></script>
  <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
  <link rel="icon" href="<%= BASE_URL %>favicon.png">
  <title>单位许可和备案系统</title>
  <style>

 src/api/permit/permit.js

@@ -1,9 +1,43 @@
import request from '@/router/axios';
import {urls} from '@/api/urls';

export const getList = (current, size, params) => {
  return request({
    url: '/api/permit/list',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}

export const getListre = (current, size, params) => {
  return request({
    url: '/api/record/list',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}
export const getListrev = (current, size, params) => {
  return request({
    url: '/api/revoke/list',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}

export const getListrek = (current, size, params) => {
  return request({
    url: '/api/recordk/list',
    method: 'get',
    params: {
      ...params,
@@ -41,14 +75,25 @@
  })
}

export const addnw = (row) => {
export const adds = (row) => {
  return request({
    url: urls+'/permit/save',
    url: '/api/permit/storage',
    method: 'post',
    data: row
  })
}


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

 src/api/record/record.js

@@ -1,5 +1,4 @@
import request from '@/router/axios';
import {urls} from '@/api/urls';
export const getList = (current, size, params) => {
  return request({
    url: '/api/record/list',
@@ -40,13 +39,13 @@
  })
}

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

export const update = (row) => {
  return request({

 src/api/recordk/recordk.js

@@ -40,13 +40,13 @@
  })
}

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

export const update = (row) => {
  return request({

 src/api/revoke/revoke.js

@@ -39,13 +39,13 @@
    data: row
  })
}
export const addnw = (row) => {
  return request({
    url: urls+'/revoke/save',
    method: 'post',
    data: row
  })
}
// export const addnw = (row) => {
//   return request({
//     url: urls+'/revoke/save',
//     method: 'post',
//     data: row
//   })
// }


export const update = (row) => {

 src/config/website.js

@@ -20,7 +20,7 @@
  isFirstPage: false,
  fistPage: {
    label: "申办许可申请",
    value: "/wel/index",
    value: "/wel",
    params: {},
    query: {},
    meta: {

 src/lang/zh.js

@@ -71,6 +71,8 @@
    tenantId: '请输入租户ID',
    username: '请输入账号',
    password: '请输入密码',
    password2: '请再次输入密码',
    name: '请输入姓名',
    wechat: '微信',
    qq: 'QQ',
    github: 'github',
@@ -78,8 +80,10 @@
    phone: '请输入手机号',
    code: '请输入验证码',
    submit: '登录',
    zc:'注册',
    gb:'关闭',
    userLogin: '账号密码登录',
    phoneLogin: '手机号登录',
    phoneLogin: '账号密码注册',
    thirdLogin: '第三方系统登录',
    msgText: '发送验证码',
    msgSuccess: '秒后重发',

 src/page/index/top/index.vue

@@ -8,16 +8,16 @@
           @click="setCollapse"></i>
      </div>
    </div>
    <div class="top-bar__title">
      <div class="top-bar__item top-bar__item--show"
           v-if="showMenu">
        <top-menu ref="topMenu"></top-menu>
      </div>
      <span class="top-bar__item"
            v-if="showSearch">
        <top-search></top-search>
      </span>
    </div>
<!--    <div class="top-bar__title">-->
<!--      <div class="top-bar__item top-bar__item&#45;&#45;show"-->
<!--           v-if="showMenu">-->
<!--        <top-menu ref="topMenu"></top-menu>-->
<!--      </div>-->
<!--      <span class="top-bar__item"-->
<!--            v-if="showSearch">-->
<!--        <top-search></top-search>-->
<!--      </span>-->
<!--    </div>-->
    <div class="top-bar__right">
      <el-tooltip v-if="showColor"
                  effect="dark"

 src/page/login/codelogin.vue

@@ -5,47 +5,93 @@
           ref="loginForm"
           :model="loginForm"
           label-width="0">
    <el-form-item prop="phone">
    <el-form-item prop="username">
      <el-input size="small"
                @keyup.enter.native="handleLogin"
                v-model="loginForm.username"
                auto-complete="off"
                :placeholder="$t('login.username')">
        <i slot="prefix" class="icon-yonghu"/>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input size="small"
                @keyup.enter.native="handleLogin"
                v-model="loginForm.password"
                auto-complete="off"
                show-password
                :placeholder="$t('login.password')">
        <i slot="prefix" class="icon-mima"/>
      </el-input>
    </el-form-item>
    <el-form-item prop="password2">
      <el-input size="small"
                @keyup.enter.native="handleLogin"
                v-model="loginForm.password2"
                auto-complete="off"
                show-password
                :placeholder="$t('login.password2')">
        <i slot="prefix" class="icon-mima"/>
      </el-input>
    </el-form-item>
    <el-form-item prop="sname">
      <el-input size="small"
                @keyup.enter.native="handleLogin"
                v-model="loginForm.sname"
                auto-complete="off"
                :placeholder="$t('login.name')">
        <i slot="prefix" class="icon-yonghu"/>
      </el-input>
    </el-form-item>
    <el-form-item prop="phone">
      <el-input size="small"
                v-model="loginForm.phone"
                auto-complete="off"
                :placeholder="$t('login.phone')">
        <i slot="prefix"
           class="icon-shouji"/>
        <i slot="prefix" class="icon-shouji"/>
      </el-input>
    </el-form-item>
    <el-form-item prop="code">
      <el-input size="small"
                @keyup.enter.native="handleLogin"
                v-model="loginForm.code"
                auto-complete="off"
                :placeholder="$t('login.code')">
        <i slot="prefix"
           class="icon-yanzhengma"
           style="margin-top:6px;"/>
        <template slot="append">
          <span @click="handleSend"
                class="msg-text"
                :class="[{display:msgKey}]">{{msgText}}</span>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
    <div style="margin-top: 16px">
      <el-radio v-model="loginForm.sex" label="1" border size="medium">男</el-radio>
      <el-radio v-model="loginForm.sex" label="2" border size="medium">女</el-radio>
    </div>
    <el-form-item class="z-login-submit-prv">
      <el-button size="small"
                 type="primary"
                 @click.native.prevent="handleLogin"
                 class="login-submit">{{$t('login.submit')}}</el-button>
                 class="z-login-submit">{{ $t('login.zc') }}
      </el-button>
      <el-button size="small"
                 @click.native.prevent="gbs"
                 class="z-login-submit">{{ $t('login.gb') }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { isvalidatemobile } from "@/util/validate";
import { mapGetters } from "vuex";
import {isvalidatemobile} from "@/util/validate";
import {mapGetters} from "vuex";

export default {
  name: "codelogin",
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.loginForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    const validatePhone = (rule, value, callback) => {
      if (isvalidatemobile(value)[0]) {
        callback(new Error(isvalidatemobile(value)[1]));
@@ -63,22 +109,36 @@
    return {
      msgText: "",
      msgTime: "",
      dic: [],
      msgKey: false,
      loginForm: {
        phone: "",
        code: ""
        username: "",
        sname: "",
        password: "",
        sex: null,
        deptid: '',
        password2: ""
      },
      value: '',
      options: [],
      loginRules: {
        phone: [{ required: true, trigger: "blur", validator: validatePhone }],
        code: [{ required: true, trigger: "blur", validator: validateCode }]
      }
        phone: [{required: true, trigger: "blur", validator: validatePhone}],
        code: [{required: true, trigger: "blur", validator: validateCode}],
        password: [{required: true, validator: validatePass, trigger: 'blur'}],
        password2: [{required: true, validator: validatePass2, trigger: 'blur'}],
        username: [
          {required: true, message: "请输入用户名", trigger: "blur"}
        ],
      },
      passwordType: "password",
      passwordTypes: "password2"
    };
  },
  created() {
    this.msgText = this.config.MSGINIT;
    this.msgTime = this.config.MSGTIME;
  },
  mounted() {},
  computed: {
    ...mapGetters(["tagWel"]),
    config() {
@@ -91,6 +151,73 @@
  },
  props: [],
  methods: {
    ergodicData(val) {
      var arr = [];
      arr.push({label: val[0].title, value: val[0].value, id: val[0].id, parent_id: val[0].parent_id});
      if (val.length > 1) {
        val.forEach((item, index) => {
          if (index > 0) {
            var ind = true;
            var arrInd = 0;
            arr.forEach((it, i) => {
              if (item.parent_id == it.id) {
                ind = false;
                arrInd = i;
                return
              }
            })
            if (ind == false) {
              if (arr[arrInd].children && arr[arrInd].children.length > 0) {
                arr[arrInd].children.push({label: item.title, value: item.value, id: item.id, parent_id: item.parent_id});
              } else {
                arr[arrInd].children = [];
                arr[arrInd].children.push({label: item.title, value: item.value, id: item.id, parent_id: item.parent_id});
              }
            } else {
              arr.push({label: item.title, value: item.value, id: item.id, parent_id: item.parent_id});
            }
          }
        })
      }

      return arr;
    },

    clearValidate(formName) {
      this.$refs[formName].clearValidate();
    },
    refreshCode(row) {
      console.log(this.loginForm)
      inster(row).then(res => {
        this.loginForm.phone = ""
        this.loginForm.username = ""
        this.loginForm.sname = ""
        this.loginForm.sex = null
        this.loginForm.password = ""
        this.loginForm.password2 = ""
        this.loginForm.deptid = ""
        this.$notify({
          title: '注册成功,待审核',
          type: 'warning'
        });
      })
      var z = document.querySelector('.z');
      z.style.display = 'none';
      this.clearValidate('loginForm')
      this.clearValidate('loginForm')
    },
    gb() {
      this.loginForm.phone = ""
      this.loginForm.username = ""
      this.loginForm.sname = ""
      this.loginForm.sex = null
      this.loginForm.password = ""
      this.loginForm.password2 = ""
      this.loginForm.deptid = ""
      var zs = document.querySelector('.z');
      zs.style.display = 'none';
      this.clearValidate('loginForm')
    },
    handleSend() {
      if (this.msgKey) return;
      this.msgText = this.msgTime + this.config.MSGSCUCCESS;
@@ -106,28 +233,70 @@
        }
      }, 1000);
    },
    showPassword() {
      this.passwordType === ""
        ? (this.passwordType = "password")
        : (this.passwordType = "");
    },
    showPasswords() {
      this.passwordType === ""
        ? (this.passwordType = "password2")
        : (this.passwordType = "");
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        console.log(valid)
        if (valid) {
          this.$store.dispatch("LoginByPhone", this.loginForm).then(() => {
            this.$router.push({ path: this.tagWel.value });
          });
          this.refreshCode(this.loginForm);
          this.message('dahsiofhiusa');
          return Promise.reject(new Error("注册成功,待审核"));
        }
      });
    },
    gbs() {
      this.gb();
    }
  }

};
</script>

<style>
.msg-text {
  display: block;
  width: 60px;
  width: 40px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}

.msg-text.display {
  color: #ccc;
}

.z-login-submit-prv {
  margin-top: 20px;
  padding: 0 10%;
  box-sizing: border-box;
}

.z-login-submit-prv > div {
  width: 80%;
  display: flex;
}

.z-login-submit {
  flex: 1;
  height: 45px;
  border: 1px solid #409EFF;
  background: none;
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 300;
  color: #409EFF;
  cursor: pointer;
  font-family: "neo";
  -webkit-transition: 0.25s;
  transition: 0.25s;
}
</style>

 src/page/login/index.vue

@@ -15,19 +15,22 @@
        <div class="login-main">
          <h4 class="login-title">
            {{ $t('login.title') }}
<!--            <top-lang></top-lang>-->
            <!--            <top-lang></top-lang>-->
          </h4>
          <userLogin v-if="activeName==='user'"></userLogin>
          <codeLogin v-else-if="activeName==='code'"></codeLogin>
          <thirdLogin v-else-if="activeName==='third'"></thirdLogin>
          <!--          <h4 class="login-title-child">IoT security cloud service platform</h4>-->
          <userLogin></userLogin>
          <!-- <codeLogin v-else-if="activeName==='code'"></codeLogin>-->
          <!--    <thirdLogin v-else-if="activeName==='third'"></thirdLogin>-->
          <div class="login-menu">
            <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>
            <!--<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>-->
<!--            <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a>-->
            <!--    <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>-->
            <a href="#" @click.stop="zShow">{{ $t('login.phoneLogin') }}</a>
            <!--   <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a>-->
          </div>
        </div>

      </div>
    </div>
    <div class="z" v-show="activeName == 'code'">
      <codeLogin></codeLogin>
    </div>
  </div>
</template>
@@ -109,11 +112,40 @@
            loading.close();
          });
        }
      }
      },
    zShow() {
    document.querySelector('.z').style.display = 'block';
  }
    }
  };
</script>

<style lang="scss">
.z {
  position: fixed;
  margin: auto;
  padding: 10px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 80px;
  width: 600px;
  height: 500px;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 6px 6px 5px #909090;
}

.company-jx {
  position: fixed;
  margin: auto;
  top: auto;
  left: 0px;
  right: 0px;
  bottom: 120px;
  text-align: center;
  color: #fff;
  font-size: 15px;
}
  @import "@/styles/login.scss";
</style>

 src/page/login/userlogin.vue

@@ -5,7 +5,7 @@
           ref="loginForm"
           :model="loginForm"
           label-width="0">
    <el-form-item v-if="tenantMode" prop="tenantId">
    <el-form-item v-if="false" prop="tenantId">
      <el-input size="small"
                @keyup.enter.native="handleLogin"
                v-model="loginForm.tenantId"

 src/router/views/index.js

@@ -1,28 +1,60 @@
import Layout from '@/page/index/'

export default [{
  path: '/wel',
  component: Layout,
  redirect: '/wel/index',
  children: [{
    path: 'index',
    name: '申办许可申请',
    meta: {
      i18n: 'dashboard'
    },
export default [
  {
    path: '/homespi',
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/permit/permit')
  }, {
    path: 'dashboard',
    name: '控制台',
    meta: {
      i18n: 'dashboard',
      menu: false,
    },
      import( /* webpackChunkName: "views" */ '@/views/home/spi')
  },
  {
    path: '/wel',
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/wel/dashboard')
  }]
}, {
      import('@/views/home/index')
    // component: Layout,
    // redirect: '/wel/index',
    // children: [{
    //   path: 'index',
    //   name: '首页',
    //   meta: {
    //     i18n: 'dashboard'
    //   },
    //   component: () =>
    //     import( /* webpackChunkName: "views" */ '@/views/wel/index')
    // }, {
    //   path: 'dashboard',
    //   name: '控制台',
    //   meta: {
    //     i18n: 'dashboard',
    //     menu: false,
    //   },
    //   component: () =>
    //     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',

 src/views/home/data.js

New file
@@ -0,0 +1,570 @@

export var column = [
  {
    label: "统一社会信用代码",
    prop: "creditcode",
    width: 140,
    hide: true,
    labelWidth: 160,
  },
  {
    label: "企业名称",
    prop: "enterprisename",
    search: true,
    searchSpan: 4,
    labelWidth: 160,
    // width: 130,
    overHidden: true
  },
  {
    label: "企业类型",
    prop: "stats",
    type: "tree",
    labelWidth: 160,
    dicUrl: "/api/blade-system/dict-biz/dictionary?code=stats",
    props: {
      label: "dictValue",
      value: "dictKey"
    },
    width: 130,
    rules: [
      {
        required: true,
        message: "请选择企业类型",
        trigger: "click",
      },
    ],
  },
  {
    label: "法定代表人",
    labelWidth: 160,
    prop: "representative",
    width: 80,
    search: true,
    searchSpan: 4,
    searchLabelWidth: 100
  },
  {
    label: "成立日期",
    prop: "establishtime",
    labelWidth: 160,
    width: 130,
    overHidden: true,
    type: "date",
    format: "yyyy-MM-dd",
    valueFormat: "timestamp",
    // addDisplay: true,
    // editDisplay: true,
    // viewDisplay: true,
    // searchSpan: 4,
    // dicUrl: "/api/blade-system/dict-biz/dictionary?code=experienceType",
    // props: {
    //     label: "dictValue",
    //     value: "dictKey"
    // },
    // search: true,
    // type: "select",
    // // rules: [{
    // //     required: true,
    // //     message: "请选择工作经验",
    // //     trigger: "blur"
    // // }],
  },
  {
    label: "注册资本(万元人民币)",
    prop: "registeredcapital",
    labelWidth: 160,
    // search: true,
    width: 140,
    // overHidden: true
  },
  {
    label: "实缴资本(万元人民币)",
    prop: "capital",
    labelWidth: 160,
    // width: 85,
    hide: true,
    // search: true,
    // searchSpan: 4,
    // overHidden: true
  },
  {
    label: "组织机构代码",
    labelWidth: 160,
    prop: "organizationcode",
    // width: 110,
    // search: true,
    // searchSpan: 4,
  },
  {
    label: "工商注册号",
    prop: "registrationnumber",
    labelWidth: 160,
    width: 120,
    // search: true,
    // searchSpan: 4,
  },
  {
    label: "纳税人识别号",
    prop: "identificationnumber",
    labelWidth: 160,
    width: 140,
    // addDisplay: true,
    // editDisplay: true,
    // viewDisplay: true,
    // searchSpan: 4,
    // dicUrl: "/api/blade-system/dict-biz/dictionary?code=unitsNatureType",
    // props: {
    //     label: "dictValue",
    //     value: "dictKey"
    // },
    // // search: true,
    // type: "select",
    // // rules: [{
    // //     required: false,
    // //     message: "请选择单位规模",
    // //     trigger: "blur"
    // // }],
  },
  {
    label: "注册地址",
    prop: "address",
    labelWidth: 160,
    // search: true,
    hide: true,
  },
  {
    label: "经营范围",
    prop: "business",
    // search: true,
    labelWidth: 160,
    hide: true,
    // width: 110,
    overHidden: true
  },
  {
    label: "所属地区",
    prop: "region",
    labelWidth: 160,
    // width: 110,
    // search: true,
    overHidden: true
  },
  {
    label: "登记机关",
    prop: "registration",
    // search: true,
    labelWidth: 160,
    // width: 88,
    overHidden: true,
    hide: true,
  },
  {
    label: "所属行业",
    prop: "industry",
    labelWidth: 160,
    hide: true,
    // search: true,
    // width: 88,
  },
]

var w = 160
  , s = 12;
export var column0 = [
  {
    label: "",
    labelWidth: 20,
    type: 'title',
    prop: "title0",
    span: 24,
    styles: {
      fontSize: '24px'
    }
  },
  {
    label: "统一社会信用代码",
    prop: "creditcode",
    labelWidth: w,
    span: s,
    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: w,
    span: s,
  },
  {
    label: "企业类型",
    prop: "stats",
    type: "tree",
    dicUrl: "/api/blade-system/dict-biz/dictionary?code=stats",
    props: {
      label: "dictValue",
      value: "dictKey"
    },
    labelWidth: w,
    span: s,
  },
  {
    label: "企业名称",
    prop: "enterprisename",
    labelWidth: w,
    span: s,
    rules: [{
      required: true,
      message: "请输入企业名称",
      trigger: "blur"
    }]
  },
  {
    label: "法定代表人",
    prop: "representative",
    labelWidth: w,
    span: s,
    rules: [{
      required: true,
      message: "请输入法定代表人",
      trigger: "blur"
    }]
  },
  {
    label: "成立日期",
    prop: "establishtime",
    labelWidth: w,
    span: s,
    type: "date",
    format: "yyyy-MM-dd",
    valueFormat: "timestamp",
  },
  {
    label: "注册资本(万元人民币)",
    prop: "registeredcapital",
    labelWidth: w,
    span: s,
    rules: [{
      required: true,
      message: "请输入注册资本",
      trigger: "blur"
    }]
  },
  {
    label: "实缴资本(万元人民币)",
    prop: "capital",
    labelWidth: w,
    span: s,
    rules: [{
      required: true,
      message: "请输入实缴资本",
      trigger: "blur"
    }]
  },
  {
    label: "组织机构代码",
    prop: "organizationcode",
    labelWidth: w,
    span: s,
    rules: [{
      required: true,
      message: "请输入组织机构代码",
      trigger: "blur"
    }]
  },
  {
    label: "工商注册号",
    prop: "registrationnumber",

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

export var column1 = [
  {
    label: "",
    labelWidth: 20,
    type: 'title',
    prop: "title1",
    span: 24,
    styles: {
      fontSize: '24px'
    }
  },
  {
    label: "统一社会信用代码",
    prop: "creditcode",
    disabled: true,
    labelWidth: w,
    span: s,
    rules: [{
      required: true,
      message: "请输入统一社会信用代码",
      trigger: "blur"
    }]
  },
  {
    label: "股东",
    prop: "shareholder",
    labelWidth: w,
    span: s,
    rules: [{
      required: true,
      message: "请输入法定代表人",
      trigger: "blur"
    }]
  }, {
    label: "持股比例(%)",
    prop: "shareholdingratio",
    labelWidth: w,
    span: s,
    rules: [{
      required: true,
      message: "请输入持股比例",
      trigger: "blur"
    }]
  },
  {
    label: "出资金额",
    prop: "capital2",
    labelWidth: w,
    span: s,
    rules: [{
      required: true,
      message: "请输入出资金额",
      trigger: "blur"
    }]
  },
  {
    label: "出资时间",
    prop: "capitaltime",
    type: "date",
    format: "yyyy-MM-dd",
    valueFormat: "timestamp",
    labelWidth: w,
    span: s,
    rules: [{
      required: true,
      message: "请输入法定代表人",
      trigger: "blur"
    }]
  }, {
    label: "身份证",
    prop: "cardid",
    labelWidth: w,
    span: s,
    rules: [{
      required: true,
      message: "请输入身份证",
      trigger: "blur"
    }]
  }, {
    label: "联系电话",
    prop: "cell",
    labelWidth: w,
    span: s,
    rules: [{
      required: true,
      message: "请输入联系电话",
      trigger: "blur"
    }]
  },
]

export var column2 = [
  {
    label: "",
    labelWidth: 20,
    type: 'title',
    prop: "title2",
    span: 24,
    styles: {
      fontSize: '24px'
    }
  },
  {
    label: "统一社会信用代码",
    prop: "creditcode",
    disabled: true,
    labelWidth: w,
    span: s,
    rules: [{
      required: true,
      message: "请输入统一社会信用代码",
      trigger: "blur"
    }]
  },
  // {
  //     label: "部门",
  //     prop: "departmentid",
  //     // type: "tree",
  //     disabled: true,
  //     dicData: [],
  //     labelWidth: w,
  //     span: s,
  //     props: {
  //         label: "title",
  //     },
  //     rules: [
  //         {
  //             required: true,
  //             message: "请选择所属部门",
  //             trigger: "click",
  //         },
  //     ],
  // },
  {
    label: "姓名",
    prop: "name",
    labelWidth: w,
    span: s,
    rules: [{
      required: true,
      message: "请输入姓名",
      trigger: "blur"
    }]
  }, {
    label: "职务",
    prop: "post",
    labelWidth: w,
    span: s,
    rules: [{
      required: true,
      message: "请输入职务",
      trigger: "blur"
    }]
  }, {
    label: "身份证",
    prop: "cardid2",
    labelWidth: w,
    span: s,
    rules: [{
      required: true,
      message: "请输入身份证",
      trigger: "blur"
    }]
  }, {
    label: "联系电话",
    prop: "cell2",
    labelWidth: w,
    span: s,
    rules: [{
      required: true,
      message: "请输入联系电话",
      trigger: "blur"
    }]
  }
  // , {
  //     label: "持股比例(%)",
  //     prop: "shareholdingratio2",
  //     labelWidth: w,
  //     span: s
  // }
]

 src/views/home/index.vue

New file
@@ -0,0 +1,1136 @@
<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.dept_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.deptid = this.$store.getters.userInfo.dept_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;
    },
    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, .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, .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>

 src/views/home/spi.vue

New file
@@ -0,0 +1,367 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad"
               :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>
</template>

<script>
import {getList, getDetail, add, update, remove} from "@/api/permit/permit";
import {mapGetters} from "vuex";

export default {
  data() {
    return {
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {
        height: 'auto',
        calcHeight: 30,
        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: "creditcode",
            hide: true,
            rules: [{
              required: true,
              message: "请输入统一社会信用代码",
              trigger: "blur"
            }]
          },
          {
            label: "许可类型",
            prop: "ptype",
            type: "select",
            dicData: [
              {
                label: "保安服务许可",
                value: '0'
              },
              {
                label: "保安培训许可",
                value: '1'
              },
            ],
          },
          {
            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'
              }
            ],
          },

        ]
      },
      data: []
    };
  },
  computed: {
    ...
      mapGetters(["permission", "userInfo"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.permit_add, true),
        viewBtn: this.vaildData(this.permission.permit_view, true),
        delBtn: this.vaildData(this.permission.permit_delete, true),
        editBtn: this.vaildData(this.permission.permit_edit, true)
      };
    }
    ,
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
    ,
  }
  ,
  // mounted() {
  //     console.log(this.userInfo.dept_id);
  // },
  methods: {
    handleCredentials(row) {
      this.$router.push({
        path: "/attach/index",
        // redirect: { name: "foo" },
        // query: { row: row },
        query: {deptid: row.deptid, type: '0'},
        // params: { row: row.identificationnumber },
      });
    },
    rowSave(row, done, loading) {
      row.deptid = this.userInfo.dept_id
      add(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
      // addnw(row).then(() => {
      //   this.onLoad(this.page);
      //   this.$message({
      //     type: "success",
      //     message: "操作成功!"
      //   });
      //   done();
      // }, error => {
      //   loading();
      //   window.console.log(error);
      // });
    }
    ,
    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: "操作成功!"
          });
        });
    }
    ,
    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 = {}) {
      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();
      });
    },
    rowStyle({row}) {
      if (row.dtype != null && row.dtype != "") {
        if (row.dtype == '2') {
          return {
            color: "#F34A4A"
          };
        }
        if(row.dtype=='1'){
          return {
            color: "#F48F57"
          };
        }

      }
    }
  }
};

</script>

<style 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;*/

}
</style>

 src/views/permit/permit.vue

@@ -336,17 +336,17 @@
        loading();
        window.console.log(error);
      });
      addnw(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
      // addnw(row).then(() => {
      //   this.onLoad(this.page);
      //   this.$message({
      //     type: "success",
      //     message: "操作成功!"
      //   });
      //   done();
      // }, error => {
      //   loading();
      //   window.console.log(error);
      // });
    }
    ,
    rowUpdate(row, index, done, loading) {

 src/views/record/record.vue

@@ -334,17 +334,17 @@
          loading();
          window.console.log(error);
        });
        addnw(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          loading();
          window.console.log(error);
        });
        // addnw(row).then(() => {
        //   this.onLoad(this.page);
        //   this.$message({
        //     type: "success",
        //     message: "操作成功!"
        //   });
        //   done();
        // }, error => {
        //   loading();
        //   window.console.log(error);
        // });
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {

 src/views/recordk/recordk.vue

@@ -331,17 +331,17 @@
          loading();
          window.console.log(error);
        });
        addnw(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          loading();
          window.console.log(error);
        });
        // addnw(row).then(() => {
        //   this.onLoad(this.page);
        //   this.$message({
        //     type: "success",
        //     message: "操作成功!"
        //   });
        //   done();
        // }, error => {
        //   loading();
        //   window.console.log(error);
        // });
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {

 src/views/revoke/revoke.vue

@@ -309,17 +309,17 @@
          loading();
          window.console.log(error);
        });
        addnw(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          loading();
          window.console.log(error);
        });
        // addnw(row).then(() => {
        //   this.onLoad(this.page);
        //   this.$message({
        //     type: "success",
        //     message: "操作成功!"
        //   });
        //   done();
        // }, error => {
        //   loading();
        //   window.console.log(error);
        // });
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {

 vue.config.js

@@ -1,6 +1,6 @@
module.exports = {
  //路径前缀
  publicPath: "/application/",
  publicPath: "/",
  lintOnSave: true,
  productionSourceMap: false,
  chainWebpack: (config) => {
@@ -26,7 +26,7 @@
    proxy: {
      '/api': {
        //本地服务接口地址
        target: 'http://localhost:82',
        target: 'http://localhost:81',
        //远程演示服务地址,可用于直接启动项目
        //target: 'https://saber.bladex.vip/api',
        ws: true,