修改

package.json

@@ -42,6 +42,7 @@
     "image-conversion": "2.1.1",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
+    "json-editor-vue3": "^1.1.1",
     "nprogress": "0.2.0",
     "number-precision": "^1.6.0",
     "pinia": "2.2.6",

src/views/components/DateRange.vue

@@ -1,37 +0,0 @@
-<template>
-    <el-date-picker
-        v-model="dateTime"
-        clearable
-        type="daterange"
-        class="flex1"
-        value-format="YYYY-MM-DD"
-        range-separator="至"
-        start-placeholder="开始时间"
-        end-placeholder="结束时间"
-        @change="changeDate"
-    />
-</template>
-
-<script setup name="DateRange" lang="ts">
-import { propTypes } from '@/utils/propTypes';
-const emit = defineEmits(['update:startDate', 'update:endDate', 'update:modelValue', 'change']);
-const dateTime = ref<string[]>([])
-const props = defineProps({
-   modelValue: propTypes.any.def([]),
-   startDate: propTypes.string.def(''),
-   endDate: propTypes.string.def(''),
-});
-const changeDate = (val: string[]) => {
-    emit('update:modelValue', val)
-    emit('update:startDate', val?.[0])
-    emit('update:endDate', val?.[1])
-    emit('change', val)
-}
-watch(() => props.modelValue, (val) => {
-    dateTime.value = val
-    if (!val?.length) {
-        emit('update:startDate', '')
-        emit('update:endDate', '')
-    }
-})
-</script>

src/views/components/FileLook.vue

@@ -1,63 +0,0 @@
-<template>
-    <transition-group class="upload-file-list" name="el-fade-in-linear" tag="div">
-        <el-row :gutter="60">
-            <el-col :span="span" v-for="(file, index) in fileList" :key="index">
-                <div class="upload-list-img d-flex a-c" @click="show2 = true;lookIndex=index">
-                    <img src="@/assets/images/icon_pic.png" alt="" />
-                    <el-tooltip class="box-item" effect="dark" :content="file.fileName" placement="top">
-                        <div class="item-text flex1 sv-1" style="color: #3e7b65;">
-                            {{ file.fileName }}
-                        </div>
-                    </el-tooltip>
-                </div>
-            </el-col>
-        </el-row>
-        <div v-if="!fileList.length">-</div>
-    </transition-group>
-    <ImageViewer v-model:show="show2" :imgs="fileList.map((item: any) => item.url)" :index="lookIndex"></ImageViewer>
-</template>
-
-<script setup lang="ts">
-import { download } from '@/utils/request';
-import { propTypes } from '@/utils/propTypes';
-import { changeByte } from '@/utils/ruoyi';
-import { ImageViewer } from '@/views/components';
-const props = defineProps({
-    modelValue: [String, Object, Array],
-    span: propTypes.number.def(8),
-    isObject: propTypes.bool.def(true),
-    isFile: propTypes.bool.def(true)
-});
-const show2 = ref(false);
-const lookIndex = ref(0);
-const fileList = ref<any>([]);
-watch(
-    () => props.modelValue,
-    async (val) => {
-        if (val) {
-            let list = [];
-            if (Array.isArray(val)) {
-                list = val;
-            } else if (props.isObject) {
-                list = [val];
-            }
-            fileList.value = [...list];
-        } else {
-            fileList.value = [];
-            return [];
-        }
-    },
-    { deep: true, immediate: true }
-);
-</script>
-
-<style scoped lang="scss">
-.upload-list-img {
-    cursor: pointer;
-    margin-top: 10px;
-
-    &:first-child {
-        margin-top: 0;
-    }
-}
-</style>

src/views/components/ImageViewer.vue

@@ -1,24 +0,0 @@
-<template>
-    <el-image-viewer v-if="show" :url-list="(imgs as string[])" :initialIndex="index" @close="close" @cover-click="close"></el-image-viewer>
-</template>
-
-<script setup name="CardItem" lang="ts">
-import { propTypes } from '@/utils/propTypes';
-
-const emit = defineEmits(['update:show']);
-const props = defineProps({
-    show: Boolean,
-    imgs: Array,
-    index: propTypes.number.def(0)
-});
-const close = () => {
-    emit('update:show', false)
-}
-onMounted(() => {
-    document.addEventListener('click',function(e: any){
-        if(e.target.className=="el-image-viewer__mask"){
-            close()
-        }
-    });
-})
-</script>

src/views/components/index.ts

@@ -7,9 +7,7 @@
 
 export { default as DescInfo } from './DescInfo.vue';
 export { default as DescItem } from './DescItem.vue';
-export { default as ImageViewer } from './ImageViewer.vue';
 export { default as DescItemTop } from './DescItemTop.vue';
-export { default as FileLook } from './FileLook.vue';
 export { default as MapContainer } from './MapContainer.vue';
 export { default as Breadcrumb } from './Breadcrumb.vue';
 export { default as VueDrag } from './VueDrag.vue'; // 选择地址
@@ -17,5 +15,3 @@ export { default as AreaCascader } from './AreaCascader.vue'; // 行政区划选
 export { default as UploadAvatar } from './UploadAvatar.vue'; // 头像选择器
 export { default as AreaView } from './AreaView.vue'; // 地址显示
 export { default as H5ModelLook } from './H5ModelLook.vue'; // 地址显示
-export { default as searchTabs } from './searchTabs.vue'; // tabs切换
-export { default as DateRange } from './DateRange.vue'; // 时间范围选择

src/views/components/searchTabs.vue

@@ -1,54 +0,0 @@
-<template>
-    <div class="ridio-info d-flex f-w-w">
-        <!-- <div class="ridio-item f-12" @click="change('')" :class="{ checked: !activeName }">全部（{{ total }}）</div> -->
-        <template v-for="item in countList" :key="item.classType">
-            <div class="ridio-item f-12 f-w-5" @click="change(item.classType)" :class="{ checked: item.classType === activeName }">
-                <template v-if="isNum"> {{ item.className }}（{{ item.classTypeNum }}） </template>
-                <template v-else> {{ item.className }} </template>
-            </div>
-        </template>
-    </div>
-</template>
-<script setup name="searchTabs" lang="ts">
-import { propTypes } from '@/utils/propTypes';
-const emit = defineEmits(['update:modelValue', 'change']);
-const activeName = ref('');
-const props = defineProps({
-    modelValue: propTypes.string.def(''),
-    countList: propTypes.any.def([]),
-    isNum: propTypes.bool.def(true)
-});
-const change = (event: any) => {
-    activeName.value = event;
-    emit('update:modelValue', event);
-    emit('change', event);
-};
-watch(
-    () => props.modelValue,
-    async (val) => {
-        if (val) {
-            activeName.value = val as string;
-        }
-    },
-    { deep: true, immediate: true }
-);
-</script>
-<style lang="scss" scoped>
-.ridio-info {
-    margin-left: -10px;
-    .ridio-item {
-        margin: 5px;
-        padding: 8px 10px;
-        line-height: 1.2;
-        border-radius: 15px;
-        user-select: none;
-        background-color: #f1f1f2;
-        cursor: pointer;
-
-        &.checked {
-            color: var(--el-color-primary);
-            background-color: var(--el-color-primary-light-9);
-        }
-    }
-}
-</style>

src/views/settled/cpy/index.vue

@@ -51,7 +51,8 @@
 </template>
 <script setup name="Staff" lang="ts">
 import { companyDetail } from '@/api/settled';
-import { FileLook, AreaView } from '@/views/components';
+import { AreaView } from '@/views/components';
+import { FileLook } from '@/views/models';
 import { editCpy, baseAuthInfo, specialAuthInfo, authApp } from '@/views/settled';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { cpy_res_status, cpy_type } = toRefs<any>(proxy?.useDict('cpy_res_status', 'cpy_type'));

src/views/settled/model/CpyAuthDetail.vue

@@ -115,7 +115,8 @@
 import nodata from '@/assets/images/nodata.jpg';
 import { propTypes } from '@/utils/propTypes';
 import useUserStore from '@/store/modules/user';
-import { ImageViewer, FileLook } from '@/views/components';
+import { FileLook, ImageViewer } from '@/views/models';
+
 const emit = defineEmits(['update:show']);
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const userStore = useUserStore();

src/views/settled/model/CpyCheckDetail.vue

@@ -40,8 +40,8 @@
 <script setup name="CpyCheckDetail" lang="ts">
 import { propTypes } from '@/utils/propTypes';
 import useUserStore from '@/store/modules/user';
-import { FileLook } from '@/views/components';
 import up_rzbslogo from '@/assets/images/up_rzbslogo.png';
+import { FileLook } from '@/views/models';
 const emit = defineEmits(['update:show', 'change']);
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;

src/views/smarttrace/companyCertificate/certMaterials.vue

@@ -94,8 +94,9 @@
     </template>
 </template>
 <script setup name="CertMaterials" lang="ts">
-import FileLook from '@/views/components/FileLook.vue';
+
 import { propTypes } from '@/utils/propTypes';
+import { FileLook } from '@/views/models';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const props = defineProps({
     data: propTypes.array.def([])

src/views/smarttrace/companyCertificate/otherCertMaterials.vue

@@ -27,8 +27,8 @@
     </el-form>
 </template>
 <script setup name="OtherCertMaterials" lang="ts">
-import FileLook from '@/views/components/FileLook.vue';
 import { propTypes } from '@/utils/propTypes';
+import { FileLook } from '@/views/models';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const props = defineProps({
     data: propTypes.any.def({})

src/views/zycp-app/swyq-code/index.vue

@@ -90,10 +90,9 @@
 import { approvalSwyqCodeLog, swyqCodeLogList } from '@/api/gb';
 import { debounce } from 'lodash';
 import { RowProGB } from './model';
-import { DateRange, searchTabs } from '@/views/components';
-
 import { CircleCheck, CircleClose } from '@element-plus/icons-vue';
 import { colNoData } from '@/utils/models';
+import { DateRange, searchTabs } from '@/views/models';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const dict = proxy?.useDict('class_type', 'expiration_unit', 'code_type', 'ref_type', 'pack_status', 'trace_level', 'check_status');