2023-5-29

package.json

@@ -21,6 +21,7 @@
     "core-js": "3.6.5",
     "echarts": "^4.2.1",
     "element-ui": "2.15.13",
+    "file-saver": "^2.0.5",
     "js-cookie": "2.2.0",
     "less-loader": "^5.0.0",
     "moment": "^2.29.2",
@@ -33,7 +34,8 @@
     "vue-count-to": "^1.0.13",
     "vue-router": "3.0.6",
     "vuedraggable": "^2.24.3",
-    "vuex": "3.1.0"
+    "vuex": "3.1.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.4",

src/api/system/baseForm.js

@@ -49,3 +49,10 @@ export function destroy(params) {
   })
 }
 
+export function imports(data) {
+  return request({
+    method: "post",
+    url: "/api/admin/base-form/import",
+    data
+  })
+}

src/api/system/customForm.js

@@ -9,11 +9,12 @@ export function index(params,isLoading = false) {
   })
 }
 
-export function show(params) {
+export function show(params,isLoading = true) {
   return request({
     method: "get",
     url: "/api/admin/custom-form/show",
-    params
+    params,
+    isLoading
   })
 }
 

src/components/XyMap/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <avue-map v-model="map" placeholder="请选择地图"></avue-map>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: [String, Object, Array, Number, Boolean],
+    resultFormat: {
+      type: [String, Object, Array],
+      default: () => ['latitude', 'longitude'] //latitude纬度，longitude经度,formattedAddress地址
+    }
+  },
+  data() {
+    return {
+      map: {},
+
+    }
+  },
+  methods: {},
+  computed: {},
+  watch: {
+    map(newVal) {
+      if(!newVal) return
+      let res = ''
+      if(typeof this.resultFormat === 'string') {
+        res = newVal[this.resultFormat]
+      }
+      if(this.resultFormat instanceof Array) {
+        res = this.resultFormat.map(i => newVal[i])?.toString()
+      }
+      if(typeof this.resultFormat === 'object' && (!this.resultFormat instanceof Array)) {
+        let obj = {}
+        for(let key in this.resultFormat) {
+          obj[key] = newVal[this.resultFormat[key]]
+        }
+        res = obj;
+      }
+      this.$emit('input', res)
+    },
+    value(newVal) {
+      if(typeof this.resultFormat === 'string') {
+        this.map[this.resultFormat] = Number(newVal)
+      }
+      if(this.resultFormat instanceof Array && newVal) {
+        let valArr = newVal.split(',')
+        this.resultFormat.forEach((i,index) => {
+          this.map[i] = Number(valArr[index])
+        })
+      }
+      if(typeof this.resultFormat === 'object' && (!this.resultFormat instanceof Array)) {
+        for(let key in this.resultFormat) {
+          this.map[key] = Number(newVal[key])
+        }
+      }
+
+      console.log(this.map)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/const/inputType.js

@@ -10,5 +10,5 @@ export const domMap = new Map([
   ["textarea", "el-input"],
 
 
-  ["map", "el-input"],
+  ["map", "my-map"],
 ])

src/main.js

@@ -46,9 +46,12 @@ import Message from 'element-ui/lib/message';
 
 Vue.config.productionTip = false
 
-import avue from '@smallwei/avue'
+import avue from '@smallwei/avue';
 import '@smallwei/avue/lib/index.css';
 Vue.use(avue)
+import AvueMap from 'avue-plugin-map'
+Vue.use(AvueMap);
+
 Vue.directive('loadMore', {
   bind(el, binding) {
     const selectWrap = el.querySelector('.el-scrollbar__wrap')
@@ -72,6 +75,10 @@ import XySelectors from '@/components/XySelectors'
 Vue.component('xy-selectors',XySelectors)
 import draggable from 'vuedraggable';
 Vue.component('draggable',draggable)
+import tinymce from '@/components/XyTinymce'
+Vue.component('my-tinymce',tinymce)
+import myMap from "@/components/XyMap"
+Vue.component('my-map',myMap)
 
 Vue.prototype.$integrateData = (target,value) => {
   for(let i in target){

src/views/component/data.js

@@ -1,66 +0,0 @@
-const data = [
-  {
-    id:1,
-    name:'a',
-    age:10,
-    birth:'2022-01-01'
-  },
-  {
-    id:2,
-    name:'b',
-    age:11,
-    birth:'2022-01-01'
-  },
-  {
-    id:3,
-    name:'c',
-    age:14,
-    birth:'2022-01-01'
-  },
-  {
-    id:4,
-    name:'b',
-    age:11,
-    birth:'2022-01-01'
-  },
-  {
-    id:5,
-    name:'e',
-    age:20,
-    birth:'2022-01-02'
-  },
-  {
-    id:6,
-    name:'f',
-    age:20,
-    birth:'2022-01-02'
-  },
-  {
-    id:7,
-    name:'g',
-    age:20,
-    birth:'2022-01-02'
-  },
-  {
-    id:8,
-    name:'h',
-    age:20,
-    birth:'2022-01-02'
-  }
-]
-
-const getData = (params) => {
-  const { page,page_size } = params
-  let start = (page - 1) * page_size
-  let res = data.slice(start,start + page_size)
-  return {
-    per_page:page_size,
-    total:data.length,
-    data:res,
-    current_page:page
-  }
-}
-
-export {
-  getData
-}

src/views/component/dialog.vue

@@ -63,7 +63,7 @@ export default {
                           ref: `elEdit_${i.field}`,
                           props: {
                             ...addPropsMap.get(i.edit_input),
-                            ...this.extraProps(i.edit_input),
+                            ...this.extraProps(i),
                             placeholder: i.help,
                             value: this.form[i.field],
                           },
@@ -136,6 +136,9 @@ export default {
       dialogVisible: false,
       form: {},
       rules: {},
+      file: {
+
+      }
     };
   },
   methods: {
@@ -217,6 +220,7 @@ export default {
     extraProps(info) {
       let props = {};
       if (info.edit_input === "file" || info.edit_input === "files") {
+        props.fileList = this.file[info.field];
         props.beforeUpload = (file) => {
           if (file.size / 1000 > 500) {
             this.$message({
@@ -228,11 +232,11 @@ export default {
         };
 
         props.onSuccess = (response, file, fileList) => {
-          info._fileList = fileList;
+          this.file[info.field] = fileList;
         };
 
         props.onRemove = (file, fileList) => {
-          info._fileList = fileList;
+          this.file[info.field] = fileList;
         };
       }
       return props;
@@ -298,6 +302,9 @@ export default {
                 (i) => i?.response?.id
               );
             }
+            if(info.edit_input === "file") {
+              this.form[info.field] = this.file[info.field][0]?.response?.id
+            }
           });
           console.log(this.form);
           save(Object.assign(this.form, { table_name: this.tableName })).then(
@@ -319,6 +326,7 @@ export default {
       handler: function (newVal) {
         this.form = {};
         this.rules = {};
+        this.file = {};
         newVal.forEach((i) => {
           if (i.field) {
             this.form[i.field] = "";
@@ -327,9 +335,12 @@ export default {
                 { required: true, message: `请填写${i.name}` },
               ];
             }
-            if (i.edit_input === "file" || i.edit_input === "files") {
+            if (i.edit_input === "files") {
               this.form[i.field] = [];
             }
+            if(i.edit_input === "files" || i.edit_input === "file") {
+              this.file[i.field] = [];
+            }
             if (i.edit_input === "checkbox") {
               this.form[i.field] = [];
             }

src/views/component/imports.vue

@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <el-dialog :visible.sync="dialogVisible" title="数据导入" width="740px">
+      <div class="title">模板下载</div>
+      <el-button
+        style="margin-top: 10px"
+        size="small"
+        type="primary"
+        @click="exportExcel(new Date().getTime().toString())"
+        >模板下载</el-button
+      >
+      <div style="color: red; margin-top: 10px">
+        导入的时候请勿修改模版的标题名称
+      </div>
+
+      <el-upload
+        style="margin-top: 10px"
+        drag
+        :action="action"
+        :data="{
+          table_name: tableName,
+        }"
+        :headers="{
+          Authorization: `Bearer ${getToken()}`,
+        }"
+        :on-success="uploadSuccess"
+        :on-error="uploadFail"
+      >
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件</div>
+      </el-upload>
+
+      <div class="title" style="margin-top: 10px;">数据预览</div>
+      <Table :data="tableList" :columns="table" style="margin-top: 10px;"></Table>
+      <div style="font-size: 12px;zoom: 0.8;">总共数据：{{ tableList.length }}条</div>
+      <el-button type="primary" size="small" style="margin-top: 10px;" @click="imports">确认导入</el-button>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as XLSX from "xlsx";
+import { saveAs } from "file-saver";
+import { getToken } from "@/utils/auth";
+import { imports } from "@/api/system/baseForm"
+export default {
+  props: {
+    formInfo: {
+      type: Array,
+      default: () => [],
+    },
+    tableName: String,
+  },
+  data() {
+    return {
+      action: `${process.env.VUE_APP_BASE_API}/api/admin/base-form/excel-show`,
+      dialogVisible: false,
+      headers: [],
+
+      tableList: [],
+      table: [],
+    };
+  },
+  methods: {
+    getToken,
+    show() {
+      this.dialogVisible = true;
+    },
+    hidden() {
+      this.dialogVisible = false;
+    },
+
+    //上传
+    uploadFail(err) {
+      console.log(err);
+      this.$message({
+        message: "上传失败",
+        type: "error",
+      });
+    },
+    uploadSuccess(response) {
+      this.tableList = response;
+      this.$message({
+        message: `上传成功`,
+        type: "success",
+      });
+    },
+
+    exportExcel(sheetName) {
+      const data = [this.headers.map((header) => header.title)];
+      const wb = XLSX.utils.book_new();
+      const ws = XLSX.utils.aoa_to_sheet(data);
+      XLSX.utils.book_append_sheet(wb, ws, sheetName);
+      const wbout = XLSX.write(wb, {
+        bookType: "xlsx",
+        bookSST: true,
+        type: "array",
+      });
+      saveAs(
+        new Blob([wbout], { type: "application/octet-stream" }),
+        `${sheetName}.xlsx`
+      );
+    },
+
+    imports() {
+      imports({
+        table_name: this.tableName,
+        data: this.tableList
+      }).then(res => {
+        console.log(res)
+        this.$message({
+          type: 'success',
+          message: `成功导入${res.total}条`
+        })
+      })
+      this.hidden();
+      this.$emit('refresh')
+    }
+  },
+  computed: {},
+  watch: {
+    formInfo(newVal) {
+      if (newVal && newVal instanceof Array) {
+        this.table = this.headers = newVal.map((i) => {
+          return {
+            key: i.field,
+            title: i.name,
+          };
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.title {
+  font-size: 15px;
+  font-weight: 600;
+
+  padding: 8px 4px;
+  position: relative;
+
+  &::before {
+    content: '';
+    width: 4px;
+    background: $primaryColor;
+
+    position: absolute;
+    top: 8px;
+    bottom: 8px;
+    left: -8px;
+  }
+}
+</style>

src/views/component/table.vue

@@ -3,7 +3,7 @@
     <!-- 查询配置 -->
     <div>
       <div ref="lxHeader">
-        <LxHeader icon="md-apps" :text="customForm.tableName" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+        <LxHeader icon="md-apps" :text="title || customForm.tableName" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
           <div slot="content"></div>
           <slot>
             <header-content :auths="auths_auth_mixin">
@@ -93,6 +93,13 @@
                 >新增</Button
                 >
               </template>
+              <template #import>
+                <Button
+                  type="primary"
+                  @click="$refs['imports'].show()"
+                >导入</Button
+                >
+              </template>
               <template #export>
                 <Button
                   type="primary"
@@ -129,6 +136,7 @@
 
     <dialoger :table-name="customForm.tableName" :form-info="form" ref="dialog" @refresh="$refs['xyTable'].getTableData()"></dialoger>
     <drawer :table-name="customForm.tableName" :form-info="form" ref="drawer"></drawer>
+    <imports :table-name="customForm.tableName" :form-info="form" ref="imports" @refresh="$refs['xyTable'].getTableData()"></imports>
   </div>
 </template>
 
@@ -139,21 +147,25 @@ import { index,destroy } from "@/api/system/baseForm";
 import { op } from "@/const/op";
 import { download } from "@/utils/downloadRequest";
 import { getparameter } from "@/api/system/dictionary";
+import { show } from "@/api/system/customForm";
 
 import dialoger from './dialog.vue';
 import LxHeader from "@/components/LxHeader/index.vue";
 import headerContent from "@/components/LxHeader/XyContent.vue";
 import drawer from "@/views/component/drawer.vue";
+import imports from "./imports.vue"
 export default {
   components:{
     LxHeader,
     dialoger,
     headerContent,
     drawer,
+    imports
   },
   mixins: [authMixin],
   data() {
     return {
+      title: "",
       op,
       select: {
         table_name: "",
@@ -195,6 +207,11 @@ export default {
       target.value = `${temp ? temp : ""},${e}`
     },
 
+    async getFormDetail() {
+      const res = await show({ id: this.customForm.customFormId },false)
+      this.title = res.name
+    },
+
     async getField() {
       if(this.$route.meta.params?.custom_form) {
         let decode = decodeURIComponent(this.$route.meta.params?.custom_form)
@@ -218,9 +235,6 @@ export default {
       if(res.data && res.data instanceof Array) {
         res.data.forEach(i => {
           if (i.field) {
-            if (i.edit_input === "file" || i.edit_input === "files") {
-              i._fileList = [];
-            }
             if (
               (i.edit_input === "checkbox" || i.edit_input === "radio") &&
               i.parameter_id
@@ -294,7 +308,7 @@ export default {
   },
   created() {
     this.getField()
-
+    this.getFormDetail()
   }
 }
 </script>

src/views/system/components/editPane.vue

@@ -76,7 +76,7 @@
         <el-form-item
           prop="link_relation"
           label="关联类型"
-          v-show="linkType === '关联表'"
+          v-show="linkType === '关联表' || linkType === '数据字典'"
         >
           <el-select
             v-model="selectedForm.link_relation"

src/views/system/components/formEditor.vue

@@ -14,7 +14,7 @@
             type="primary"
             icon="el-icon-refresh-right"
             circle
-            @click="$store.dispatch('form/getFormList')"
+            @click="$store.dispatch('form/getFormList', custom_form_id)"
           ></el-button>
           <el-button
             size="small"