1

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@stomp/stompjs": "^6.1.0",
+    "animate.css": "^4.1.1",
     "axios": "^0.21.1",
     "babel-polyfill": "^6.26.0",
     "core-js": "^3.6.5",

src/main.js

@@ -13,6 +13,7 @@ import '@/plugins/methods';
 import '@/plugins/setting';
 import '@/plugins/components';
 import '@common/src/assets/icon/iconfont.css';
+import 'animate.css';
 // 管理中心页面效果布局所需插件
 import ElementUI from 'element-ui';
 import VueI18n from 'vue-i18n';

src/views/adminCenter/homeIndex/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24" class="main"> test </el-col>
+      <el-col :span="24" class="main animate__animated animate__backInRight"> test </el-col>
     </el-row>
   </div>
 </template>

src/views/adminCenter/test/detail.vue

@@ -1,15 +1,9 @@
 <template>
   <div id="detail">
     <el-row>
-      <el-col :span="24" class="main">
+      <el-col :span="24" class="main animate__animated animate__backInRight">
         <el-col :span="24" class="one">
-          <data-form :fields="fields" :data="form" @save="toSave" returns="/adminCenter/test/index">
-            <template #custom="{ item, form }">
-              <template v-if="item.model == 'img_url'">
-                <e-upload :limit="1" url="/files/study/test_imgurl/upload" type="img_url" v-model="form[item.model]"></e-upload>
-              </template>
-            </template>
-          </data-form>
+          <data-form :fields="fields" :data="form" @save="toSave" returns="/adminCenter/test/index"> </data-form>
         </el-col>
       </el-col>
     </el-row>
@@ -30,7 +24,6 @@ export default {
       },
       fields: [
         { label: '标题', model: 'title' },
-        { label: '图片文件', model: 'img_url', custom: true },
         { label: '内容', model: 'content', type: 'editor', url: '/files/study/news_editor/upload' },
       ],
     };

src/views/adminCenter/test/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24" class="main">
+      <el-col :span="24" class="main animate__animated animate__backInRight">
         <el-col :span="24" class="one">
           <data-table :fields="fields" :opera="opera" :data="list" :total="total" @query="search" @edit="toEdit" @delete="toDelete">
             <template #selfbtn>

src/views/adminCenter/test/parts/list-1.vue

@@ -1,236 +0,0 @@
-<template>
-  <div id="list-1">
-    <el-row>
-      <el-col :span="24" class="main">
-        <el-col :span="24" class="one">
-          <el-col
-            :span="24"
-            class="list"
-            :style="{ width: company_cert_size.p0.width + 'px', height: company_cert_size.p0.height + 'px' }"
-            v-for="(item, index) in list"
-            :key="index"
-          >
-            <el-col :span="24" class="p1">
-              <span
-                class="p1_txt1"
-                :style="{
-                  top: company_cert_size.p1.top + 'px',
-                  right: company_cert_size.p1.right + 'px',
-                  bottom: company_cert_size.p1.bottom + 'px',
-                  left: company_cert_size.p1.left + 'px',
-                }"
-                >20210012</span
-              >
-            </el-col>
-            <el-col :span="24" class="p1">
-              <span
-                class="p1_txt2"
-                :style="{
-                  top: company_cert_size.p2.top + 'px',
-                  right: company_cert_size.p2.right + 'px',
-                  bottom: company_cert_size.p2.bottom + 'px',
-                  left: company_cert_size.p2.left + 'px',
-                }"
-                >长春市福瑞科技有限公司</span
-              >
-            </el-col>
-            <el-col :span="24" class="p1">
-              <span
-                class="p1_txt3"
-                :style="{
-                  top: company_cert_size.p3.top + 'px',
-                  right: company_cert_size.p3.right + 'px',
-                  bottom: company_cert_size.p3.bottom + 'px',
-                  left: company_cert_size.p3.left + 'px',
-                }"
-                >长春市朝阳区前进大街1244号一号楼南小二楼</span
-              >
-            </el-col>
-            <el-col :span="24" class="p1">
-              <span
-                class="p1_txt4"
-                :style="{
-                  top: company_cert_size.p4.top + 'px',
-                  right: company_cert_size.p4.right + 'px',
-                  bottom: company_cert_size.p4.bottom + 'px',
-                  left: company_cert_size.p4.left + 'px',
-                }"
-                >不知道</span
-              >
-            </el-col>
-            <el-col :span="24" class="p1">
-              <span
-                class="p1_txt5"
-                :style="{
-                  top: company_cert_size.p5.top + 'px',
-                  right: company_cert_size.p5.right + 'px',
-                  bottom: company_cert_size.p5.bottom + 'px',
-                  left: company_cert_size.p5.left + 'px',
-                }"
-                >门卫，巡逻，守护，随身收尾，安全检查，安全技术防范</span
-              >
-            </el-col>
-            <el-col :span="24" class="p1">
-              <span
-                class="p1_txt6"
-                :style="{
-                  top: company_cert_size.p6.top + 'px',
-                  right: company_cert_size.p6.right + 'px',
-                  bottom: company_cert_size.p6.bottom + 'px',
-                  left: company_cert_size.p6.left + 'px',
-                }"
-                >壹佰万元</span
-              >
-            </el-col>
-            <el-col :span="24" class="p1">
-              <span
-                class="p1_txt7"
-                :style="{
-                  top: company_cert_size.p7.top + 'px',
-                  right: company_cert_size.p7.right + 'px',
-                  bottom: company_cert_size.p7.bottom + 'px',
-                  left: company_cert_size.p7.left + 'px',
-                }"
-                >吉林省公保服20210012号</span
-              >
-            </el-col>
-            <el-col :span="24" class="p1">
-              <el-col
-                :span="12"
-                class="p1_txt8"
-                :style="{
-                  top: company_cert_size.p8.top + 'px',
-                  right: company_cert_size.p8.right + 'px',
-                  bottom: company_cert_size.p8.bottom + 'px',
-                  left: company_cert_size.p8.left + 'px',
-                }"
-              >
-                <p>温馨提示：此证有效期至2022年02月12日。</p>
-                <p>到期年检合格后，予以换证。</p>
-              </el-col>
-              <el-col
-                :span="6"
-                class="p1_txt9"
-                :style="{
-                  top: company_cert_size.p9.top + 'px',
-                  right: company_cert_size.p9.right + 'px',
-                  bottom: company_cert_size.p9.bottom + 'px',
-                  left: company_cert_size.p9.left + 'px',
-                }"
-              >
-                <span>2021</span><span>12</span><span>12</span>
-              </el-col>
-            </el-col>
-          </el-col>
-        </el-col>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapState, createNamespacedHelpers } from 'vuex';
-export default {
-  name: 'list-1',
-  props: { list: { type: Array }, company_cert_size: { type: Object } },
-  components: {},
-  data: function () {
-    return {};
-  },
-  created() {},
-  methods: {},
-  computed: {
-    ...mapState(['user']),
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-  watch: {
-    test: {
-      deep: true,
-      immediate: true,
-      handler(val) {},
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.main {
-  .one {
-    .list {
-      border: 1px solid #ff0000;
-      .p1 {
-        position: relative;
-        .p1_txt1 {
-          position: absolute;
-          font-family: monospace;
-          font-size: 20px;
-          font-weight: bold;
-        }
-        .p1_txt2 {
-          position: absolute;
-          font-family: monospace;
-          font-size: 20px;
-          font-weight: bold;
-        }
-        .p1_txt3 {
-          position: absolute;
-          font-family: monospace;
-          font-size: 20px;
-          font-weight: bold;
-        }
-        .p1_txt4 {
-          position: absolute;
-          font-family: monospace;
-          font-size: 20px;
-          font-weight: bold;
-        }
-        .p1_txt5 {
-          position: absolute;
-          font-family: monospace;
-          font-size: 20px;
-          font-weight: bold;
-        }
-        .p1_txt6 {
-          position: absolute;
-          font-family: monospace;
-          font-size: 20px;
-          font-weight: bold;
-        }
-        .p1_txt7 {
-          position: absolute;
-          font-family: monospace;
-          font-size: 20px;
-          font-weight: bold;
-        }
-        .p1_txt8 {
-          position: absolute;
-          top: 625px;
-          right: 0;
-          bottom: 0;
-          left: 165px;
-          font-family: monospace;
-          font-size: 12px;
-          font-weight: bold;
-          text-align: center;
-          p {
-            margin: 0 0 5px 0;
-          }
-        }
-        .p1_txt9 {
-          position: relative;
-
-          font-family: monospace;
-          font-size: 20px;
-          font-weight: bold;
-          span {
-            display: inline-block;
-            margin: 0 0 0 50px;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

src/views/adminCenter/test/parts/size-1.vue

@@ -1,292 +0,0 @@
-<template>
-  <div id="size-1">
-    <el-row>
-      <el-col :span="24" class="main">
-        <el-form ref="company_cert_size" :model="company_cert_size" label-width="100px">
-          <el-col :span="24" class="one">
-            <el-col :span="24" class="one_1">服务许可证尺寸</el-col>
-            <el-col :span="12">
-              <el-form-item label="宽度">
-                <el-input v-model="company_cert_size.p0.width"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="高度">
-                <el-input v-model="company_cert_size.p0.height"></el-input>
-              </el-form-item>
-            </el-col>
-          </el-col>
-          <el-col :span="24" class="one">
-            <el-col :span="24" class="one_1">吉公保服</el-col>
-            <el-col :span="6">
-              <el-form-item label="上间距">
-                <el-input v-model="company_cert_size.p1.top"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="右间距">
-                <el-input v-model="company_cert_size.p1.right"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="下间距">
-                <el-input v-model="company_cert_size.p1.bottom"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="左间距">
-                <el-input v-model="company_cert_size.p1.left"></el-input>
-              </el-form-item>
-            </el-col>
-          </el-col>
-          <el-col :span="24" class="one">
-            <el-col :span="24" class="one_1">名称</el-col>
-            <el-col :span="6">
-              <el-form-item label="上间距">
-                <el-input v-model="company_cert_size.p2.top"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="右间距">
-                <el-input v-model="company_cert_size.p2.right"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="下间距">
-                <el-input v-model="company_cert_size.p2.bottom"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="左间距">
-                <el-input v-model="company_cert_size.p2.left"></el-input>
-              </el-form-item>
-            </el-col>
-          </el-col>
-          <el-col :span="24" class="one">
-            <el-col :span="24" class="one_1">住所</el-col>
-            <el-col :span="6">
-              <el-form-item label="上间距">
-                <el-input v-model="company_cert_size.p3.top"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="右间距">
-                <el-input v-model="company_cert_size.p3.right"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="下间距">
-                <el-input v-model="company_cert_size.p3.bottom"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="左间距">
-                <el-input v-model="company_cert_size.p3.left"></el-input>
-              </el-form-item>
-            </el-col>
-          </el-col>
-          <el-col :span="24" class="one">
-            <el-col :span="24" class="one_1">法定代表人</el-col>
-            <el-col :span="6">
-              <el-form-item label="上间距">
-                <el-input v-model="company_cert_size.p4.top"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="右间距">
-                <el-input v-model="company_cert_size.p4.right"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="下间距">
-                <el-input v-model="company_cert_size.p4.bottom"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="左间距">
-                <el-input v-model="company_cert_size.p4.left"></el-input>
-              </el-form-item>
-            </el-col>
-          </el-col>
-          <el-col :span="24" class="one">
-            <el-col :span="24" class="one_1">服务范围</el-col>
-            <el-col :span="6">
-              <el-form-item label="上间距">
-                <el-input v-model="company_cert_size.p5.top"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="右间距">
-                <el-input v-model="company_cert_size.p5.right"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="下间距">
-                <el-input v-model="company_cert_size.p5.bottom"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="左间距">
-                <el-input v-model="company_cert_size.p5.left"></el-input>
-              </el-form-item>
-            </el-col>
-          </el-col>
-          <el-col :span="24" class="one">
-            <el-col :span="24" class="one_1">注册资本</el-col>
-            <el-col :span="6">
-              <el-form-item label="上间距">
-                <el-input v-model="company_cert_size.p6.top"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="右间距">
-                <el-input v-model="company_cert_size.p6.right"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="下间距">
-                <el-input v-model="company_cert_size.p6.bottom"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="左间距">
-                <el-input v-model="company_cert_size.p6.left"></el-input>
-              </el-form-item>
-            </el-col>
-          </el-col>
-          <el-col :span="24" class="one">
-            <el-col :span="24" class="one_1">批准文号</el-col>
-            <el-col :span="6">
-              <el-form-item label="上间距">
-                <el-input v-model="company_cert_size.p7.top"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="右间距">
-                <el-input v-model="company_cert_size.p7.right"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="下间距">
-                <el-input v-model="company_cert_size.p7.bottom"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="左间距">
-                <el-input v-model="company_cert_size.p7.left"></el-input>
-              </el-form-item>
-            </el-col>
-          </el-col>
-          <el-col :span="24" class="one">
-            <el-col :span="24" class="one_1">温馨提示</el-col>
-            <el-col :span="6">
-              <el-form-item label="上间距">
-                <el-input v-model="company_cert_size.p8.top"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="右间距">
-                <el-input v-model="company_cert_size.p8.right"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="下间距">
-                <el-input v-model="company_cert_size.p8.bottom"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="左间距">
-                <el-input v-model="company_cert_size.p8.left"></el-input>
-              </el-form-item>
-            </el-col>
-          </el-col>
-          <el-col :span="24" class="one">
-            <el-col :span="24" class="one_1">发证日期</el-col>
-            <el-col :span="6">
-              <el-form-item label="上间距">
-                <el-input v-model="company_cert_size.p9.top"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="右间距">
-                <el-input v-model="company_cert_size.p9.right"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="下间距">
-                <el-input v-model="company_cert_size.p9.bottom"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="左间距">
-                <el-input v-model="company_cert_size.p9.left"></el-input>
-              </el-form-item>
-            </el-col>
-          </el-col>
-          <el-col :span="24" class="btn">
-            <el-button type="danger" size="mini" @click="close">取消保存</el-button>
-            <el-button type="primary" size="mini" @click="onSubmit">提交保存</el-button>
-          </el-col>
-        </el-form>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapState, createNamespacedHelpers } from 'vuex';
-export default {
-  name: 'size-1',
-  props: {
-    company_cert_size: { type: Object },
-  },
-  components: {},
-  data: function () {
-    return {};
-  },
-  created() {},
-  methods: {
-    close() {
-      this.$emit('close');
-    },
-    onSubmit() {
-      this.$emit('onSubmit', { data: this.company_cert_size });
-    },
-  },
-  computed: {
-    ...mapState(['user']),
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-  watch: {
-    test: {
-      deep: true,
-      immediate: true,
-      handler(val) {},
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.main {
-  .one {
-    .one_1 {
-      padding: 10px 0;
-      margin: 0 0 10px 0;
-      color: #000000;
-      font-size: 18px;
-      font-weight: bold;
-      border-bottom: 1px dashed #000000;
-    }
-    /deep/.el-form-item {
-      margin: 0;
-    }
-  }
-  .btn {
-    text-align: center;
-    margin: 20px 0 0 0;
-  }
-}
-</style>

src/views/print.js

@@ -1,163 +0,0 @@
-// 打印类属性、方法定义
-/* eslint-disable */
-const Print = function (dom, options) {
-  if (!(this instanceof Print)) return new Print(dom, options);
-
-  this.options = this.extend({
-    'noPrint': '.no-print'
-  }, options);
-
-  if ((typeof dom) === "string") {
-    this.dom = document.querySelector(dom);
-  } else {
-    this.isDOM(dom)
-    this.dom = this.isDOM(dom) ? dom : dom.$el;
-  }
-
-  this.init();
-};
-Print.prototype = {
-  init: function () {
-    var content = this.getStyle() + this.getHtml();
-    this.writeIframe(content);
-  },
-  extend: function (obj, obj2) {
-    for (var k in obj2) {
-      obj[k] = obj2[k];
-    }
-    return obj;
-  },
-
-  getStyle: function () {
-    var str = "",
-      styles = document.querySelectorAll('style,link');
-    for (var i = 0; i < styles.length; i++) {
-      str += styles[i].outerHTML;
-    }
-    str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
-
-    return str;
-  },
-
-  getHtml: function () {
-    var inputs = document.querySelectorAll('input');
-    var textareas = document.querySelectorAll('textarea');
-    var selects = document.querySelectorAll('select');
-
-    for (var k = 0; k < inputs.length; k++) {
-      if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
-        if (inputs[k].checked == true) {
-          inputs[k].setAttribute('checked', "checked")
-        } else {
-          inputs[k].removeAttribute('checked')
-        }
-      } else if (inputs[k].type == "text") {
-        inputs[k].setAttribute('value', inputs[k].value)
-      } else {
-        inputs[k].setAttribute('value', inputs[k].value)
-      }
-    }
-
-    for (var k2 = 0; k2 < textareas.length; k2++) {
-      if (textareas[k2].type == 'textarea') {
-        textareas[k2].innerHTML = textareas[k2].value
-      }
-    }
-
-    for (var k3 = 0; k3 < selects.length; k3++) {
-      if (selects[k3].type == 'select-one') {
-        var child = selects[k3].children;
-        for (var i in child) {
-          if (child[i].tagName == 'OPTION') {
-            if (child[i].selected == true) {
-              child[i].setAttribute('selected', "selected")
-            } else {
-              child[i].removeAttribute('selected')
-            }
-          }
-        }
-      }
-    }
-    // 包裹要打印的元素
-    // fix: https://github.com/xyl66/vuePlugs_printjs/issues/36
-    let outerHTML = this.wrapperRefDom(this.dom).outerHTML
-    return outerHTML;
-  },
-  // 向父级元素循环，包裹当前需要打印的元素
-  // 防止根级别开头的 css 选择器不生效
-  wrapperRefDom: function (refDom) {
-    let prevDom = null
-    let currDom = refDom
-    // 判断当前元素是否在 body 中，不在文档中则直接返回该节点
-    if (!this.isInBody(currDom)) return currDom
-
-    while (currDom) {
-      if (prevDom) {
-        let element = currDom.cloneNode(false)
-        element.appendChild(prevDom)
-        prevDom = element
-      } else {
-        prevDom = currDom.cloneNode(true)
-      }
-
-      currDom = currDom.parentElement
-    }
-
-    return prevDom
-  },
-
-  writeIframe: function (content) {
-    var w, doc, iframe = document.createElement('iframe'),
-      f = document.body.appendChild(iframe);
-    iframe.id = "myIframe";
-    //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
-    iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
-    w = f.contentWindow || f.contentDocument;
-    doc = f.contentDocument || f.contentWindow.document;
-    doc.open();
-    doc.write(content);
-    doc.close();
-    var _this = this
-    iframe.onload = function(){
-      _this.toPrint(w);
-      setTimeout(function () {
-        document.body.removeChild(iframe)
-      }, 100)
-    }
-  },
-
-  toPrint: function (frameWindow) {
-    try {
-      setTimeout(function () {
-        frameWindow.focus();
-        try {
-          if (!frameWindow.document.execCommand('print', false, null)) {
-            frameWindow.print();
-          }
-        } catch (e) {
-          frameWindow.print();
-        }
-        frameWindow.close();
-      }, 10);
-    } catch (err) {
-      console.log('err', err);
-    }
-  },
-  // 检查一个元素是否是 body 元素的后代元素且非 body 元素本身
-  isInBody: function (node) {
-    return (node === document.body) ? false : document.body.contains(node);
-  },
-  isDOM: (typeof HTMLElement === 'object') ?
-    function (obj) {
-      return obj instanceof HTMLElement;
-    } :
-    function (obj) {
-      return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
-    }
-};
-const MyPlugin = {}
-MyPlugin.install = function (Vue, options) {
-  // 4. 添加实例方法
-  Vue.prototype.$print = Print
-}
-export default MyPlugin