Merge branch 'master' of https://gitee.com/dmc_qq/etc-project

.idea/codeStyles/Project.xml

@@ -0,0 +1,11 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <codeStyleSettings language="JavaScript">
+      <option name="METHOD_CALL_CHAIN_WRAP" value="2" />
+      <option name="IF_BRACE_FORCE" value="3" />
+      <option name="DOWHILE_BRACE_FORCE" value="3" />
+      <option name="WHILE_BRACE_FORCE" value="3" />
+      <option name="FOR_BRACE_FORCE" value="3" />
+    </codeStyleSettings>
+  </code_scheme>
+</component>

.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>

.idea/etcProject.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="JSHint" enabled="true" level="ERROR" enabled_by_default="true" />
+  </profile>
+</component>

.idea/jsLinters/jshint.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JSHintConfiguration" version="2.11.1" use-config-file="true" use-custom-config-file="true" custom-config-file-path="$PROJECT_DIR$/.jshintrc">
+    <option bitwise="true" />
+    <option browser="true" />
+    <option curly="true" />
+    <option eqeqeq="true" />
+    <option forin="true" />
+    <option maxerr="50" />
+    <option noarg="true" />
+    <option noempty="true" />
+    <option nonew="true" />
+    <option strict="true" />
+    <option undef="true" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/etcProject.iml" filepath="$PROJECT_DIR$/.idea/etcProject.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

.idea/workspace.xml

@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="BranchesTreeState">
+    <expand>
+      <path>
+        <item name="ROOT" type="e8cecc67:BranchNodeDescriptor" />
+        <item name="LOCAL_ROOT" type="e8cecc67:BranchNodeDescriptor" />
+      </path>
+      <path>
+        <item name="ROOT" type="e8cecc67:BranchNodeDescriptor" />
+        <item name="REMOTE_ROOT" type="e8cecc67:BranchNodeDescriptor" />
+      </path>
+      <path>
+        <item name="ROOT" type="e8cecc67:BranchNodeDescriptor" />
+        <item name="REMOTE_ROOT" type="e8cecc67:BranchNodeDescriptor" />
+        <item name="GROUP_NODE:origin" type="e8cecc67:BranchNodeDescriptor" />
+      </path>
+    </expand>
+    <select />
+  </component>
+  <component name="ChangeListManager">
+    <list default="true" id="d36c93ea-a19e-418b-88d5-48ec1055ba75" name="Default Changelist" comment="">
+      <change beforePath="$PROJECT_DIR$/src/layout/components/SidebarItem.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/layout/components/SidebarItem.vue" afterDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="ProjectId" id="293OSK13Yw2cGXvJ0VL5NTQ3PiW" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent">
+    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
+    <property name="node.js.detected.package.eslint" value="true" />
+    <property name="node.js.detected.package.standard" value="true" />
+    <property name="node.js.path.for.package.eslint" value="project" />
+    <property name="node.js.path.for.package.standard" value="project" />
+    <property name="node.js.selected.package.eslint" value="(autodetect)" />
+    <property name="node.js.selected.package.standard" value="" />
+    <property name="nodejs_package_manager_path" value="yarn" />
+    <property name="ts.external.directory.path" value="G:\vue-cli\1.0.1\etcProject\node_modules\typescript\lib" />
+    <property name="vue.rearranger.settings.migration" value="true" />
+  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="d36c93ea-a19e-418b-88d5-48ec1055ba75" name="Default Changelist" comment="" />
+      <created>1652338300644</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1652338300644</updated>
+      <workItem from="1652338303660" duration="93000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+  <component name="Vcs.Log.Tabs.Properties">
+    <option name="TAB_STATES">
+      <map>
+        <entry key="MAIN">
+          <value>
+            <State />
+          </value>
+        </entry>
+      </map>
+    </option>
+  </component>
+  <component name="WindowStateProjectService">
+    <state x="630" y="299" key="#ESLint" timestamp="1652338371696">
+      <screen x="0" y="0" width="1536" height="816" />
+    </state>
+    <state x="630" y="299" key="#ESLint/0.0.1536.816@0.0.1536.816" timestamp="1652338371696" />
+  </component>
+</project>

src/api/index.ts

@@ -80,7 +80,7 @@ export function get(url: string, data = {}, options = {}) {
  * post 请求
  * @param url 路径 
  * @param data 参数 
- * @param options 实例对象 
+ * @param options 实例对象
  * @returns 
  */
 export function post(url: string, data = {}, options = {}) {
@@ -94,7 +94,7 @@ export function post(url: string, data = {}, options = {}) {
   return common(options)
 }
 
-function common(options: any) {
+function common(options: {}) {
   return new Promise((resolve, reject) => {
     service(options).then(function (data) {
       //此处编写拦截器返回处理

src/components/SlidingBlockVerifyTwo/SlidingBlockVerifyTwo.vue

@@ -61,7 +61,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import SlideImgThreePng from '@/assets/image/slide_img_three.png';
     //md开撸第二版
     export default {

src/crud/components/CRUD.operation.vue

@@ -21,7 +21,7 @@
         </el-button-group>
     </div>
 </template>
-<script>
+<script lang="ts">
     import CRUD, {
         crudConfig
     } from "@/crud/crud"

src/crud/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div style="opacity: 1;background-color: #FFF;padding:20px">
+    <div style="opacity: 1; background-color: #fff; padding: 20px">
         <!-- 搜索框组件 -->
         <search-operation v-show="SSearch" :searchCondition="searchCondition" @RefreshLeft="RefreshLeft">
             <!-- 具名插槽 -->
@@ -7,18 +7,18 @@
         </search-operation>
 
         <!-- CRUD组件 -->
-        <crud-operation v-if="false" style="margin-top:10px" @add="add" @edit="edit" @remove="remove" @refresh="refresh"
-            @search="search" :DEdit="EStart" :DDelete="DStart" :SSearch="SSearch">
+        <crud-operation v-if="false" style="margin-top: 10px" @add="add" @edit="edit" @remove="remove"
+            @refresh="refresh" @search="search" :DEdit="EStart" :DDelete="DStart" :SSearch="SSearch">
         </crud-operation>
 
         <!-- 表单组件 -->
         <el-table ref="multipleTableRef" :data="testData" @selection-change="handleSelectionChange"
-            style="width: 100%;margin: 20px 0 20px 0" :border="tableFrom.border">
+            style="width: 100%; margin: 20px 0 20px 0" :border="tableFrom.border">
             <!-- 表头拓展 -->
-            <el-table-column v-for="(item,index) in tableFrom.extend" :key="index" :type="item.type" :width="item.width"
-                :label="item.label" />
+            <el-table-column v-for="(item, index) in tableFrom.extend" :key="index" :type="item.type"
+                :width="item.width" :label="item.label" />
             <!-- 字段内容 -->
-            <el-table-column v-for="(item,index) in tableFrom.field" :key="index" :prop="item.prop" :label="item.label"
+            <el-table-column v-for="(item, index) in tableFrom.field" :key="index" :prop="item.prop" :label="item.label"
                 :width="item.width" :show-overflow-tooltip="!item.overflow" />
 
             <el-table-column :fixed="tableFrom.operateFixed ? 'right' : 'false'" :label="tableFrom.operateTitle"
@@ -44,29 +44,28 @@
             <div v-else>
                 <!-- 系统内容 -->
                 <el-form ref="ruleFormRef" :rules="rules" :model="form">
-                    <el-form-item v-for="(item,index) in tableFrom.field" :label="item.label" :prop="item.prop"
-                        :label-width="formLabelWidth">
+                    <el-form-item v-for="(item, index) in tableFrom.field" :key="index" :label="item.label"
+                        :prop="item.prop" :label-width="formLabelWidth">
                         <!-- 输入框 -->
-                        <div style="width: 100%;" v-if="item.form.type === 'input'">
+                        <div style="width: 100%" v-if="item.form.type === 'input'">
                             <el-input :disabled="item.form.disabled" v-model="form[item.prop]" :type="item.itemType"
                                 :placeholder="item.form.placeholder" />
                         </div>
                         <!-- 选择框 -->
-                        <div style="width: 100%;" v-else-if="item.form.type === 'select'">
-                            <el-select style="width: 100%;" v-model="form[item.prop]" :disabled="item.form.disabled"
+                        <div style="width: 100%" v-else-if="item.form.type === 'select'">
+                            <el-select style="width: 100%" v-model="form[item.prop]" :disabled="item.form.disabled"
                                 :placeholder="item.form.placeholder">
-                                <el-option v-for="(itemData,index) in item.form.listData" :label="itemData.label"
-                                    :value="itemData.value" />
+                                <el-option v-for="(itemData, index) in item.form.listData" :key="index"
+                                    :label="itemData.label" :value="itemData.value" />
                             </el-select>
                         </div>
                         <!-- 日期框 -->
-                        <div style="width: 100%;" v-else-if="item.form.type === 'date'">
-                            <el-date-picker style="width: 100%;" v-model="form[item.prop]" :disabled="item.form.disabled"
+                        <div style="width: 100%" v-else-if="item.form.type === 'date'">
+                            <el-date-picker style="width: 100%" v-model="form[item.prop]" :disabled="item.form.disabled"
                                 :value-format="item.form.valueFormat" :type="item.form.itemType"
                                 :placeholder="item.form.placeholder" />
                         </div>
                     </el-form-item>
-
                 </el-form>
             </div>
 
@@ -78,33 +77,40 @@
                 <slot name="footer" />
             </template>
         </el-dialog>
-
     </div>
 </template>
 <script lang="ts" setup>
-    import crudOperation from '@/crud/components/CRUD.operation.vue'
-    import searchOperation from '@/crud/components/Search.operation.vue'
-    import udOperation from '@/crud/components/UD.operation.vue'
-    import {
-        reactive,
-        ref,
-        toRaw
-    } from 'vue'
+import crudOperation from '@/crud/components/CRUD.operation.vue'
+import searchOperation from '@/crud/components/Search.operation.vue'
+import udOperation from '@/crud/components/UD.operation.vue'
+import { reactive, ref, toRaw } from 'vue'
 
-    // 声明事件
-    const emit = defineEmits(['add', 'remove', 'refresh', 'edit', 'search', 'submit', 'handleEdit', 'handleDelete'])
-    // 声明props
-    const props = defineProps({
-        homeData: { //表单配置
-            type: Object,
-            default: function () {
-                return {}
-            }
+// 声明事件
+const emit = defineEmits([
+    'add',
+    'remove',
+    'refresh',
+    'edit',
+    'search',
+    'submit',
+    'handleEdit',
+    'handleDelete',
+])
+// 声明props
+const props = defineProps({
+    homeData: {
+        //表单配置
+        type: Object,
+        default: function () {
+            return {}
         },
-        tableData: { //表单数据
-            type: Array,
-            default: function () {
-                return [{
+    },
+    tableData: {
+        //表单数据
+        type: Array,
+        default: function () {
+            return [
+                {
                     one: '范晓东',
                     two: '贵ZEY123',
                     three: '蓝色',
@@ -113,8 +119,9 @@
                     six: '储值卡',
                     seven: '52011328220201499572',
                     eight: '正常',
-                    data: '2020-12-24'
-                }, {
+                    data: '2020-12-24',
+                },
+                {
                     one: '李丽霞',
                     two: '贵ANS989',
                     three: '蓝色',
@@ -123,8 +130,9 @@
                     six: '储值卡',
                     seven: '52011328220200034040',
                     eight: '正常',
-                    data: '2021-08-24'
-                }, {
+                    data: '2021-08-24',
+                },
+                {
                     one: '沈波',
                     two: '贵ABB123',
                     three: '蓝色',
@@ -133,164 +141,168 @@
                     six: '储值卡',
                     seven: '52011328220201499572',
                     eight: '正常',
-                    data: '2022-01-22'
-                }]
-            }
-        }
-    })
+                    data: '2022-01-22',
+                },
+            ]
+        },
+    },
+})
 
-    const tableFrom = props.homeData ? props.homeData.table : [] //表单字段
-    const multipleTableRef = ref() //表单ref(清空全选)
-    const testData = ref(props.tableData) //表单数据
-    const visible = ref(false) //删除提示框是否显示
-    const dialogFormVisible = ref(false) //表单弹框是否显示
-    const formLabelWidth = '100px' //默认表单宽度
-    const title = ref('添加') //表单标题
-    const DStart = ref(true) //删除按钮状态
-    const EStart = ref(true) //编辑按钮状态
-    const SSearch = ref(true) //是否打开搜索框
-    let index = -1
-    let indexs = []
-    //表单校验
-    const ruleFormRef = ref()
-    let initRules = {}
-    let initForm = {}
-    //初始化数据
-    if (tableFrom) {
-        tableFrom.field.forEach(element => {
-            initForm[element.prop] = ''
-            if (element.form.required) {
-                initRules[element.prop] = [{
+const tableFrom = props.homeData ? props.homeData.table : [] //表单字段
+const multipleTableRef = ref() //表单ref(清空全选)
+const testData = ref(props.tableData) //表单数据
+const visible = ref(false) //删除提示框是否显示
+const dialogFormVisible = ref(false) //表单弹框是否显示
+const formLabelWidth = '100px' //默认表单宽度
+const title = ref('添加') //表单标题
+const DStart = ref(true) //删除按钮状态
+const EStart = ref(true) //编辑按钮状态
+const SSearch = ref(true) //是否打开搜索框
+let index = -1
+let indexs = []
+//表单校验
+const ruleFormRef = ref()
+let initRules: any = {}
+let initForm: any = {}
+//初始化数据
+if (tableFrom) {
+    tableFrom.field.forEach((element: any) => {
+        initForm[element.prop] = ''
+        if (element.form.required) {
+            initRules[element.prop] = [
+                {
                     required: true,
                     message: element.label + '不能为空',
-                    trigger: 'blur'
-                }]
-            }
-        });
-    }
-    const rules = reactive(initRules)
+                    trigger: 'blur',
+                },
+            ]
+        }
+    })
+}
+const rules = reactive(initRules)
 
-    //搜索条件
-    let searchCondition = reactive(props.homeData ? props.homeData.search : [])
+//搜索条件
+let searchCondition = reactive(props.homeData ? props.homeData.search : [])
 
-    //表单字段
-    const form = ref(initForm)
-    form.value.four = '52011328220201499572' //赋值一条测试数据
+//表单字段
+const form: any = ref(initForm)
+form.value.four = '52011328220201499572' //赋值一条测试数据
 
-    //重置
-    const RefreshLeft = () => {
-        Object.keys(searchCondition).forEach(key => (searchCondition[key] = ''));
-    }
+//重置
+const RefreshLeft = () => {
+    Object.keys(searchCondition).forEach((key) => (searchCondition[key] = ''))
+}
 
-    //添加
-    const add = () => {
-        console.log('点击了添加按钮');
-        form.value = {}
-        title.value = '添加'
-        dialogFormVisible.value = true
-        emit('add')
-    }
+//添加
+const add = () => {
+    console.log('点击了添加按钮')
+    form.value = {}
+    title.value = '添加'
+    dialogFormVisible.value = true
+    emit('add')
+}
 
-    //删除
-    const remove = () => {
-        console.log('点击了删除按钮');
-        emit('remove')
-    }
+//删除
+const remove = () => {
+    console.log('点击了删除按钮')
+    emit('remove')
+}
 
-    //刷新
-    const refresh = () => {
-        console.log('点击了刷新按钮');
-        emit('refresh')
-    }
+//刷新
+const refresh = () => {
+    console.log('点击了刷新按钮')
+    emit('refresh')
+}
 
-    //编辑
-    const edit = () => {
-        console.log('点击了修改按钮');
-        if (index != -1) {
-            title.value = '编辑'
-            form.value = JSON.parse(JSON.stringify(testData.value[index]))
-            dialogFormVisible.value = true
-            emit('edit')
-        }
+//编辑
+const edit = () => {
+    console.log('点击了修改按钮')
+    if (index != -1) {
+        title.value = '编辑'
+        form.value = JSON.parse(JSON.stringify(testData.value[index]))
+        dialogFormVisible.value = true
+        emit('edit')
     }
+}
 
-    //搜索
-    const search = () => {
-        console.log('点击了搜索按钮');
-        SSearch.value = !SSearch.value
-        emit('search')
-    }
+//搜索
+const search = () => {
+    console.log('点击了搜索按钮')
+    SSearch.value = !SSearch.value
+    emit('search')
+}
 
-    //头部多选处理
-    const handleSelectionChange = (val) => {
-        if (val) {
-            index = -1
-            DStart.value = true
-            EStart.value = true
-            if (val.length === 1) {
-                testData.value.forEach((element, idx) => {
-                    if (element === val[0]) {
-                        index = idx
-                    }
-                });
-                EStart.value = false
-                DStart.value = false
-            } else if (val.length > 0) {
-                DStart.value = false
-            }
+//头部多选处理
+const handleSelectionChange = (val: any) => {
+    if (val) {
+        index = -1
+        DStart.value = true
+        EStart.value = true
+        if (val.length === 1) {
+            testData.value.forEach((element, idx) => {
+                if (element === val[0]) {
+                    index = idx
+                }
+            })
+            EStart.value = false
+            DStart.value = false
+        } else if (val.length > 0) {
+            DStart.value = false
         }
     }
+}
 
-    //表单提交
-    const affirm = (formEl) => {
-        if (!formEl) {
-            return
-        }
-        formEl.validate((valid, fields) => {
-            if (valid) { //是否通过表单验证
-                if (index !== -1) {
-                    testData.value.splice(index, 1, form.value)
-                } else {
-                    testData.value.push(form.value)
-                }
-                emit('search', form.value)
-                index = -1 //重置标识
-                dialogFormVisible.value = false
-                multipleTableRef.value.clearSelection() //清空多选
+//表单提交
+const affirm = (formEl: any) => {
+    if (!formEl) {
+        return
+    }
+    formEl.validate((valid: any, fields: any) => {
+        if (valid) {
+            //是否通过表单验证
+            if (index !== -1) {
+                testData.value.splice(index, 1, form.value)
             } else {
-                return false
+                testData.value.push(form.value)
             }
-        })
-    }
+            emit('search', form.value)
+            index = -1 //重置标识
+            dialogFormVisible.value = false
+            multipleTableRef.value.clearSelection() //清空多选
+        } else {
+            return false
+        }
+    })
+}
 
-    //取消
-    const cancel = () => {
-        dialogFormVisible.value = false
-    }
+//取消
+const cancel = () => {
+    dialogFormVisible.value = false
+}
 
-    //编辑
-    const handleEdit = (idx, row) => {
-        console.log('点击了编辑按钮');
-        title.value = '编辑'
-        form.value = JSON.parse(JSON.stringify(toRaw(row)))
-        dialogFormVisible.value = true
-        index = idx
-        emit('handleEdit', idx, row)
-    }
+//编辑
+const handleEdit = (idx: any, row: any) => {
+    console.log('点击了编辑按钮')
+    title.value = '编辑'
+    form.value = JSON.parse(JSON.stringify(toRaw(row)))
+    dialogFormVisible.value = true
+    index = idx
+    emit('handleEdit', idx, row)
+}
 
-    //删除
-    const handleDelete = (idx, row) => {
-        console.log('点击了删除按钮');
-        testData.value.splice(idx, 1)
-        row.visible = false
-        emit('handleDelete', idx, row)
-    }
+//删除
+const handleDelete = (idx: any, row: any) => {
+    console.log('点击了删除按钮')
+    testData.value.splice(idx, 1)
+    row.visible = false
+    emit('handleDelete', idx, row)
+}
 
-    //将需要暴露出去的数据与方法都可以暴露出去
-    defineExpose({
-        dialogFormVisible,
-        title
-    })
+//将需要暴露出去的数据与方法都可以暴露出去
+defineExpose({
+    dialogFormVisible,
+    title,
+})
 </script>
 <style lang="scss">
-</style>
+</style>

src/layout/components/Head.vue

@@ -1,26 +1,34 @@
 <template>
   <!-- 头部选项 -->
-  <div class="as-gravity-center-start" style=" height: 100%">
+  <div class="as-gravity-center-start" style="height: 100%">
     <!-- 图标部分 -->
     <div class="as-weight">
       <el-icon size="24px" color="#FFFFFF" @click="cut">
-        <fold v-if="menuStart.menuIsExpansion" />
-        <expand v-if="!menuStart.menuIsExpansion" />
+        <item-ioc v-if="menuStart.menuIsExpansion" icon="Fold" />
+        <item-ioc v-if="!menuStart.menuIsExpansion" icon="Expand" />
       </el-icon>
     </div>
     <!-- 我的部分 -->
     <div class="as-gravity-center-start" style="height: 100%">
       <!-- 搜索 -->
-      <search id="header-search" />
+      <search-menu />
       <!-- 全屏 -->
       <el-icon @click="fullScreen" style="margin: 0px 20px 0px 20px" size="24px" color="#FFFFFF">
-        <FullScreen />
+        <item-ioc v-if="menuStart.menuIsExpansion" icon="FullScreen" />
       </el-icon>
       <!-- 弹出框提示 -->
       <el-popover v-model:visible="visible" placement="bottom" :width="160">
         <div class="as-layout-vertical">
-          <el-button type="text" @click="hint('个人中心')" class="as-text-14px" style="width: 100%;">个人中心</el-button>
-          <el-button type="text" @click="hint('退出登录')" class="as-text-14px" style="margin-right: 10px;">退出登录</el-button>
+          <el-button type="text" @click="hint('个人中心')" class="as-text-14px" style="width: 100%"
+            >个人中心</el-button
+          >
+          <el-button
+            type="text"
+            @click="hint('退出登录')"
+            class="as-text-14px"
+            style="margin-right: 10px"
+            >退出登录</el-button
+          >
         </div>
         <template #reference>
           <!-- 头像 -->
@@ -30,59 +38,53 @@
         </template>
       </el-popover>
       <!-- 设置 -->
-      <el-icon @click="hint('点击了设置')" style="margin: 0px 30px 0px 30px" size="24px" color="#FFFFFF">
-        <setting />
+      <el-icon
+        @click="hint('点击了设置')"
+        style="margin: 0px 30px 0px 30px"
+        size="24px"
+        color="#FFFFFF"
+      >
+        <item-ioc v-if="menuStart.menuIsExpansion" icon="Setting" />
       </el-icon>
     </div>
-
   </div>
 </template>
 <script setup lang="ts">
-  import screenfull from "screenfull" //引入全屏依赖
-  import ImgHead from '@/assets/image/head.png' //默认头像资源
-  import $store from "@/store/index" // 引入vuex
-  import Search from '@/components/HeaderSearch/index.vue' //搜索组件
-  import {
-    ref,
-    reactive,
-    nextTick
-  } from 'vue'
-  import {
-    useRouter
-  } from 'vue-router'
-  import {
-    ElMessage
-  } from 'element-plus' //消息提示
-  import Cookies from 'js-cookie'
-  const visible = ref(false)
-  const router = useRouter()
-  let menuStart = reactive($store.state.data) //菜单开关
-  //切换菜单开关监听
-  function cut() {
-    $store.dispatch('cutMenu', !menuStart.menuIsExpansion)
-  }
-  //全屏监听
-  function fullScreen() {
-    screenfull.toggle()
-  }
-  //提示点击
-  function hint(msg) {
-    if (msg === '退出登录') {
-      Cookies.remove('token')
-      Cookies.remove('rememberPSWD')
-      Cookies.remove('account')
-      Cookies.remove('password')
-      router.replace('/')
-      location.reload()
-    } else {
-      ElMessage({
-        message: msg,
-        type: 'success'
-      })
-    }
-
+import screenfull from 'screenfull' //引入全屏依赖
+import ImgHead from '@/assets/image/head.png' //默认头像资源
+import $store from '@/store/index' // 引入vuex
+import searchMenu from '@/components/HeaderSearch/index.vue' //搜索组件
+import { ref, reactive, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus' //消息提示
+import Cookies from 'js-cookie'
+const visible = ref(false)
+const router = useRouter()
+let menuStart = reactive($store.state.data) //菜单开关
+//切换菜单开关监听
+function cut() {
+  $store.dispatch('cutMenu', !menuStart.menuIsExpansion)
+}
+//全屏监听
+function fullScreen() {
+  screenfull.toggle()
+}
+//提示点击
+function hint(msg: string) {
+  if (msg === '退出登录') {
+    Cookies.remove('token')
+    Cookies.remove('rememberPSWD')
+    Cookies.remove('account')
+    Cookies.remove('password')
+    router.replace('/')
+    location.reload()
+  } else {
+    ElMessage({
+      message: msg,
+      type: 'success',
+    })
   }
+}
 </script>
 <style lang="scss" scoped>
-
 </style>

src/layout/components/Item.vue

@@ -1,17 +0,0 @@
-<template>
-  <el-icon>
-    <Icon v-if="icon" style="width: 16px;height: 16px;" :icon="icon" ></Icon>
-  </el-icon>
-</template>
-<script>
-  export default {
-    name: 'MenuItem',
-    functional: true,
-    props: {
-      icon: {
-        type: String,
-        default: ''
-      }
-    }
-  }
-</script>

src/layout/components/ItemIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <el-icon>
+    <icon-tab v-if="icon"  :icon="icon"></icon-tab>
+  </el-icon>
+</template>
+<script lang="ts" setup>
+/* props 接收数据 */
+const props = defineProps({
+  icon: String,
+})
+
+//将需要暴露出去的数据与方法都可以暴露出去
+defineExpose({props})
+</script>

src/layout/components/SidebarItem.vue

@@ -1,51 +1,36 @@
 <template>
-  <template v-for="(item, index) in list" :key="item.path">
+  <template v-for="item in list" :key="item.path">
     <!-- 父级菜单 -->
-    <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.title + ',' + item.path">
+    <el-sub-menu
+      v-if="item.children && item.children.length > 0"
+      :index="item.title + ',' + item.path">
       <template #title>
-        <Item :icon="item.icon" />
-        <span style="font-size:14px">{{ item.title }}</span>
+        <item-ioc :icon="item.icon" />
+        <span style="font-size: 14px">{{ item.title }}</span>
       </template>
       <el-menu-item-group>
-        <sidebarItem :list="item.children"></sidebarItem>
+        <sidebar-item :list="item.children"></sidebar-item>
       </el-menu-item-group>
     </el-sub-menu>
 
     <!-- 子项也负责跳转 -->
-    <router-link style="text-decoration: none;" v-else :to="{name:`${item.path}`}">
+    <router-link style="text-decoration: none" v-else :to="{ name: `${item.path}` }">
       <el-menu-item class="el-menu-item" :index="item.title + ',' + item.path">
-        <Item v-if="item.icon" :icon="item.icon"/>
+        <item-ioc v-if="item.icon" :icon="item.icon" />
         <template #title>
-          <span style="font-size:14px">{{ item.title }}</span>
+          <span style="font-size: 14px">{{ item.title }}</span>
         </template>
       </el-menu-item>
     </router-link>
-
   </template>
 </template>
-<script lang="ts">
-  import {
-    Document,
-    Menu as IconMenu,
-    Location,
-    Setting
-  } from '@element-plus/icons-vue'
-  import Item from './Item.vue'
-
-  export default {
-    name: 'SidebarItem',
-    components: {
-      Item
-    },
-    props: {
-      list: {
-        type: Array,
-        default: function () {
-          return []
-        },
-      },
-    },
-  }
+<script lang="ts" setup>
+defineProps({
+  list: {
+    type: <any>Array,
+    default: [],
+  },
+})
 </script>
 <style lang="less" scoped>
 </style>

src/layout/components/TabControl.vue

@@ -1,166 +1,179 @@
 <template>
-    <!-- 标签选项卡模块 :model-value="props.editableTabsValue"(只读) -->
-    <el-tabs v-model="editableTabsValue.index" type="card" @tab-click="tabClick" @tab-remove="removeTab"
-        @contextmenu.prevent.native="openMenu($event)">
-        <el-tab-pane v-for="item in editableTabs" :key="item.name" :closable="item.start" :label="item.title"
-            :name="item.name">
-            <slot></slot>
-        </el-tab-pane>
-    </el-tabs>
-    <ul v-show="data.visible" :style="{left:data.left+'px',top:data.top+'px'}" class="contextmenu">
-        <li @click="updateTabs">刷新</li>
-        <li v-show="data.indexes !== 0" @click="closeTabs">关闭</li>
-        <li @click="closeOtherTabs">关闭其他</li>
-        <li @click="closeAllTabs">关闭全部</li>
-    </ul>
+  <!-- 标签选项卡模块 :model-value="props.editableTabsValue"(只读) -->
+  <el-tabs
+    v-model="editableTabsValue.index"
+    type="card"
+    @tab-click="tabClick"
+    @tab-remove="removeTab"
+    @contextmenu.prevent="openMenu($event)"
+  >
+    <el-tab-pane
+      v-for="item in editableTabs"
+      :key="item.name"
+      :closable="item.start"
+      :label="item.title"
+      :name="item.name"
+    >
+      <slot></slot>
+    </el-tab-pane>
+  </el-tabs>
+  <ul
+    v-show="data.visible"
+    :style="{ left: data.left + 'px', top: data.top + 'px' }"
+    class="contextmenu"
+  >
+    <li @click="updateTabs">刷新</li>
+    <li v-show="data.indexes !== 0" @click="closeTabs">关闭</li>
+    <li @click="closeOtherTabs">关闭其他</li>
+    <li @click="closeAllTabs">关闭全部</li>
+  </ul>
 </template>
 <script setup lang="ts">
-    import $storeTab from '@/store/tabValue' //引入tab vuex
-    import {
-        ref,
-        reactive,
-        nextTick,
-        watch
-    } from 'vue'
-    import {
-        useRouter
-    } from 'vue-router'
-    import $store from "@/store/index" // 引入vuex
+import $storeTab from '@/store/tabValue' //引入tab vuex
+import { ref, reactive, nextTick, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import $store from '@/store/index' // 引入vuex
+import { log } from 'console'
 
-    const router = useRouter() //router 对象
-    let editableTabs = ref($storeTab.state.tabArray)
-    let editableTabsValue = reactive($storeTab.state.editableTabsValue)
-    let data = reactive({
-        visible: false, //默认右键菜单是否打开
-        left: 0, //右键菜单位置
-        top: 0,
-        indexes: -1 //选中tab的坐标
+const router = useRouter() //router 对象
+let editableTabs = ref($storeTab.state.tabArray)
+let editableTabsValue = reactive($storeTab.state.editableTabsValue)
+let data = reactive({
+  visible: false, //默认右键菜单是否打开
+  left: 0, //右键菜单位置
+  top: 0,
+  indexes: -1, //选中tab的坐标
+})
+//监视属性
+watch(
+  () => data.visible,
+  (newVal, oldVal) => {
+    if (newVal) {
+      window.addEventListener('click', onClickOutside)
+    } else {
+      window.removeEventListener('click', onClickOutside)
+    }
+  }
+)
+//点击外部监听
+const onClickOutside = () => {
+  data.visible = false
+}
+//刷新
+function updateTabs() {
+  if (data.indexes !== -1) {
+    nextTick(() => {
+      const tabDatas = editableTabs.value[data.indexes]
+      router.replace({ name: tabDatas.path })
+      $storeTab.dispatch('updateETV', data.indexes + '')
+      sessionStorage.setItem('newTab', JSON.stringify(tabDatas))
     })
-    //监视属性
-    watch(() => data.visible, (newVal, oldVal) => {
-        if (newVal) {
-            window.addEventListener('click', onClickOutside)
-        } else {
-            window.removeEventListener('click', onClickOutside)
-        }
+  }
+}
+//关闭
+function closeTabs() {
+  if (data.indexes !== -1) {
+    nextTick(() => {
+      const tabs = editableTabs.value
+      $storeTab.dispatch('removeTab', data.indexes)
+      const tabDatas = editableTabs.value[editableTabs.value.length - 1]
+      sessionStorage.setItem('newTab', JSON.stringify(tabDatas))
+      router.replace({ name: tabs[editableTabs.value.length - 1].path })
     })
-    //点击外部监听
-    const onClickOutside = () => {
-        data.visible = false
-    }
-    //刷新
-    function updateTabs(event) {
-        if (data.indexes !== -1) {
-            nextTick(() => {
-                const tabDatas = editableTabs.value[data.indexes]
-                router.replace({name: tabDatas.path})
-                $storeTab.dispatch('updateETV', data.indexes + '')
-                sessionStorage.setItem('newTab', JSON.stringify(tabDatas))
-            })
-        }
-    }
-    //关闭
-    function closeTabs() {
-        if (data.indexes !== -1) {
-            nextTick(() => {
-                const tabs = editableTabs.value
-                $storeTab.dispatch('removeTab', data.indexes)
-                const tabDatas = editableTabs.value[editableTabs.value.length - 1]
-                sessionStorage.setItem('newTab', JSON.stringify(tabDatas))
-                router.replace({name: tabs[editableTabs.value.length - 1].path})
-            })
-        }
-    }
-    //关闭其他
-    function closeOtherTabs() {
-        if (data.indexes !== -1) {
-            nextTick(() => {
-                $storeTab.dispatch('closeTheOther', data.indexes)
-                const tabDatas = editableTabs.value[editableTabs.value.length - 1]
-                sessionStorage.setItem('newTab', JSON.stringify(tabDatas))
-            })
-        }
-    }
-    //关闭全部
-    function closeAllTabs() {
-        nextTick(() => {
-            const tabs = editableTabs.value
-            $storeTab.dispatch('closeTheOther', -1)
-            sessionStorage.removeItem('newTab')
-            router.replace({name: tabs[0].path})
-        })
-    }
-    //关闭其他
-    //右键单击事件
-    const openMenu = (event) => {
-        console.log($store.state.data.menuIsExpansion);
-        event.preventDefault(); //防止默认菜单弹出
-        let obj = event.srcElement ? event.srcElement : event.target;
-        data.indexes = -1
-        if (obj.innerText) {
-            const tabs = editableTabs.value
-            tabs.forEach((item, index) => {
-                if (item.title === obj.innerText) {
-                    data.indexes = index
-                }
-            })
-            data.left = event.clientX - ($store.state.data.menuIsExpansion ? 200 : 50)
-            data.top = event.clientY - 65
-            data.visible = true
-        }
-    }
-    //点击事件监听(路由)
-    const tabClick = (tab, event) => {
-        const tabs = editableTabs.value
-        let sig = -1
-        tabs.forEach((item, index) => {
-            if (item.name === tab.props.name) {
-                sig = index
-            }
-        })
-        if (sig !== -1) {
-            nextTick(() => {
-                //路由跳转
-                router.replace({
-                    name: tabs[sig].path
-                })
-                sessionStorage.setItem('newTab', JSON.stringify(tabs[sig]))
-                //更新菜单索引
-                $storeTab.dispatch('updateMI', `${tabs[sig].title},${tabs[sig].path}`)
-                if (tabs[sig].name === '0') {
-                    sessionStorage.removeItem('newTab')
-                }
-            })
-        }
-    }
-    //删除tab监听
-    const removeTab = (targetName) => {
-        $storeTab.dispatch('removeTab', targetName)
+  }
+}
+//关闭其他
+function closeOtherTabs() {
+  if (data.indexes !== -1) {
+    nextTick(() => {
+      $storeTab.dispatch('closeTheOther', data.indexes)
+      const tabDatas = editableTabs.value[editableTabs.value.length - 1]
+      sessionStorage.setItem('newTab', JSON.stringify(tabDatas))
+    })
+  }
+}
+//关闭全部
+function closeAllTabs() {
+  nextTick(() => {
+    const tabs = editableTabs.value
+    $storeTab.dispatch('closeTheOther', -1)
+    sessionStorage.removeItem('newTab')
+    router.replace({ name: tabs[0].path })
+  })
+}
+//关闭其他
+//右键单击事件
+const openMenu = (event: any) => {
+  console.log($store.state.data.menuIsExpansion)
+  event.preventDefault() //防止默认菜单弹出
+  let obj = event.srcElement ? event.srcElement : event.target
+  data.indexes = -1
+  if (obj.innerText) {
+    const tabs = editableTabs.value
+    tabs.forEach((item: any, index: number) => {
+      if (item.title === obj.innerText) {
+        data.indexes = index
+      }
+    })
+    data.left = event.clientX - ($store.state.data.menuIsExpansion ? 200 : 50)
+    data.top = event.clientY - 65
+    data.visible = true
+  }
+}
+//点击事件监听(路由)
+const tabClick = (tab: any) => {
+  const tabs = editableTabs.value
+  let sig = -1
+  tabs.forEach((item: any, index: number) => {
+    if (item.name === tab.props.name) {
+      sig = index
     }
+  })
+  if (sig !== -1) {
+    nextTick(() => {
+      //路由跳转
+      router.replace({
+        name: tabs[sig].path,
+      })
+      sessionStorage.setItem('newTab', JSON.stringify(tabs[sig]))
+      //更新菜单索引
+      $storeTab.dispatch('updateMI', `${tabs[sig].title},${tabs[sig].path}`)
+      if (tabs[sig].name === '0') {
+        sessionStorage.removeItem('newTab')
+      }
+    })
+  }
+}
+//删除tab监听
+const removeTab = (targetName: any) => {
+  $storeTab.dispatch('removeTab', targetName)
+  const tabs = editableTabs.value
+  router.replace({ name: tabs[editableTabs.value.length - 1].path })
+}
 </script>
 <style lang="scss" scoped>
-    .contextmenu {
-        background: #fff;
-        z-index: 3000;
-        font-size: 12px;
-        font-weight: 400;
-        color: #333;
-        position: absolute;
-        margin: 0;
-        padding: 5px 0;
-        border-radius: 4px;
-        box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
-        /* 去除样式 */
-        list-style-type: none;
+.contextmenu {
+  background: #fff;
+  z-index: 3000;
+  font-size: 12px;
+  font-weight: 400;
+  color: #333;
+  position: absolute;
+  margin: 0;
+  padding: 5px 0;
+  border-radius: 4px;
+  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+  /* 去除样式 */
+  list-style-type: none;
 
-        li {
-            margin: 0;
-            cursor: pointer;
-            padding: 7px 16px;
+  li {
+    margin: 0;
+    cursor: pointer;
+    padding: 7px 16px;
 
-            &:hover {
-                background: #eee
-            }
-        }
+    &:hover {
+      background: #eee;
     }
+  }
+}
 </style>

src/layout/index.vue

@@ -2,24 +2,35 @@
   <!-- :sources="[bgVideo]" -->
 
   <video-bg :sources="[]">
-
-    <div class="as-layout-horizontal" style="width: 100%; height: 100%;opacity: 0.9;">
+    <div class="as-layout-horizontal" style="width: 100%; height: 100%; opacity: 0.9">
       <!-- 此处先划出布局形式(按左右布局划分，左边菜单，右边内容) -->
       <!-- 菜单部分 -->
-      <div class="bg-theme" style="height: 100%;">
+      <div class="bg-theme" style="height: 100%">
         <!-- 菜单头部部分 -->
-        <div class="as-gravity-center-start" style="height: 70px;">
-          <img rel="icon" src="/logo2.png" style="width: 60px;height: 60px;" />
+        <div class="as-gravity-center-start" style="height: 70px">
+          <img rel="icon" src="/logo2.png" style="width: 60px; height: 60px" />
           <!-- D-UI框架模板 -->
-          <span class="as-bold" style="font-size:18px;color: #FFFFFF" v-show="menuStart.menuIsExpansion">黔通智联</span>
+          <span
+            class="as-bold"
+            style="font-size: 18px; color: #ffffff"
+            v-show="menuStart.menuIsExpansion"
+            >黔通智联</span
+          >
         </div>
 
         <!-- 菜单主体部分 -->
-        <div style="height: 100%;background-color: #FFFFFF;">
-          <el-scrollbar class="as-border-width" height="100%" style="background-color: #FFFFFF">
-            <el-menu :default-active="menuIndex.menuIndex" style="height: 100%" mode="vertical" :router="false"
-              @select="select" :collapse="!menuStart.menuIsExpansion" class="el-menu-vertical-demo">
-              <SidebarItem :list="list" />
+        <div style="height: 100%; background-color: #ffffff">
+          <el-scrollbar class="as-border-width" height="100%" style="background-color: #ffffff">
+            <el-menu
+              :default-active="menuIndex.menuIndex"
+              style="height: 100%"
+              mode="vertical"
+              :router="false"
+              @select="select"
+              :collapse="!menuStart.menuIsExpansion"
+              class="el-menu-vertical-demo"
+            >
+              <sidebar-item :list="list" />
             </el-menu>
           </el-scrollbar>
         </div>
@@ -27,18 +38,16 @@
 
       <div class="as-weight as-layout-vertical">
         <!-- 头部选项 -->
-        <div class="bg-theme" style="padding: 0px 10px 0px 10px; height: 70px;">
-
-          <Head style="height: 70px;"></Head>
+        <div class="bg-theme" style="padding: 0px 10px 0px 10px; height: 70px">
+          <Head style="height: 70px"></Head>
         </div>
 
         <el-scrollbar>
           <div class="as-layout-vertical">
             <!-- 头部 height: 8%;-->
-            <div style=" background-color: #ffffff; padding: 10px 0px 10px 0px">
+            <div style="background-color: #ffffff; padding: 10px 0px 10px 0px">
               <!-- 选项卡 -->
-              <TabContainer>
-              </TabContainer>
+              <tab-container> </tab-container>
 
               <!-- 主体内容页面 -->
               <router-view name="key"></router-view>
@@ -52,76 +61,71 @@
             </div>
           </div>
         </el-scrollbar>
-
       </div>
     </div>
   </video-bg>
 </template>
 
 <script setup lang="ts">
-  import SidebarItem from './components/SidebarItem.vue' //选项菜单
-  import Head from './components/Head.vue' //选项头部
-  import TabContainer from './components/TabControl.vue' //Tab选项
-  import VideoBg from '@/components/VideoBackround/VideoBackground.vue' //视频背景组件
-  import BgTwo from '@/assets/video/homeBg.mp4' //视频资源
-  import $store from "@/store/index" // 引入vuex
-  import $storeTab from '@/store/tabValue' //引入tab vuex
-  import {
-    list
-  } from '@/data/menuData.ts'
-  import {
-    ref,
-    reactive,
-    onMounted
-  } from 'vue'
-  import {
-    useRouter
-  } from 'vue-router'
+// @ts-ignore 选项菜单
+import SidebarItem from '@/layout/components/SidebarItem.vue' 
+// @ts-ignore 选项头部
+import Head from '@/layout/components/Head.vue' 
+// @ts-ignore Tab选项
+import TabContainer from '@/layout/components/TabControl.vue' 
+import VideoBg from '@/components/VideoBackround/VideoBackground.vue' //视频背景组件
+import BgTwo from '@/assets/video/homeBg.mp4' //视频资源
+import $store from '@/store/index' // 引入vuex
+import $storeTab from '@/store/tabValue' //引入tab vuex
+import { list } from '@/data/menuData'
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 
-  const bgVideo = BgTwo
-  const router = useRouter()
-  //默认菜单为打开状态
-  let menuStart = ref($store.state.data)
-  let menuIndex = ref($storeTab.state.editableTabsValue)
-  //处理刷新页面重置问题
-  onMounted(() => {
-    const newTab = sessionStorage.getItem('newTab')
-    if (newTab) {
-      let dataTabs = JSON.parse(newTab)
-      dataTabs.name = '1'
-      let value = {
-        type: 1,
-        data: dataTabs
-      }
-      $storeTab.dispatch('addTab', value)
-      $storeTab.dispatch('updateETV', dataTabs.name)
-    } else {
-      router.replace({
-        name: 'home'
-      })
-    }
-    sessionStorage.removeItem('newTab')
-  })
-  //菜单选择监听(添加选项卡成功则添加，有就进行跳转)
-  //data(菜单名称,菜单路径)
-  function select(data) { //这里只负责tab，不负责跳转
+const bgVideo = BgTwo
+const router = useRouter()
+//默认菜单为打开状态
+let menuStart = ref($store.state.data)
+let menuIndex = ref($storeTab.state.editableTabsValue)
+//处理刷新页面重置问题
+onMounted(() => {
+  const newTab = sessionStorage.getItem('newTab')
+  if (newTab) {
+    let dataTabs = JSON.parse(newTab)
+    dataTabs.name = '1'
     let value = {
-      type: 2,
-      data: data
+      type: 1,
+      data: dataTabs,
     }
     $storeTab.dispatch('addTab', value)
+    $storeTab.dispatch('updateETV', dataTabs.name)
+  } else {
+    router.replace({
+      name: 'home',
+    })
   }
+  sessionStorage.removeItem('newTab')
+})
+//菜单选择监听(添加选项卡成功则添加，有就进行跳转)
+//data(菜单名称,菜单路径)
+function select(data: unknown) {
+  //这里只负责tab，不负责跳转
+  let value = {
+    type: 2,
+    data: data,
+  }
+  $storeTab.dispatch('addTab', value)
+}
 </script>
 
 <style lang="scss" scoped>
-  .el-menu-vertical-demo:not(.el-menu--collapse) {
-    width: 248px;
-    min-height: 400px;
-    padding-bottom: 40px;
-    border-width: 0px;
-  }
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 248px;
+  min-height: 400px;
+  padding-bottom: 40px;
+  border-width: 0px;
+}
 
-  .bg-theme {
-    background-color: $test-color;
-  }
+.bg-theme {
+  background-color: $test-color;
+}
 </style>

src/main.ts

@@ -15,6 +15,7 @@ import './style/main.css'
 import { isValidKey } from '@/utils/utils'
 //请求
 import * as request from '@/api/index'
+import itemIoc from '@/layout/components/ItemIcon.vue'
 
 const app = createApp(App)
 
@@ -24,7 +25,7 @@ app.use(router)
   .use(Fragment.Plugin)
   .use(ElementPlus, { // 使用element-plus
     locale: zhCn,
-  }).mount('#app')
+  })
 
 //全局图标组件
 for (const name in EleIcons) {
@@ -35,10 +36,13 @@ for (const name in EleIcons) {
 
 // 下面为全局注册图标组件
 // 创建Icon组件
-const Icon = (props: { icon: string }) => {
+const Icon: any = (props: { icon: string }) => {
   const { icon } = props
   return createVNode(EleIcons[icon as keyof typeof EleIcons])
 }
 // 注册Icon组件
-app.component('Icon', Icon)
+app.component('icon-tab', Icon)
+app.component('item-ioc', itemIoc)
+
+app.mount('#app')
 

src/store/index.js → src/store/index.ts

@@ -19,7 +19,7 @@ import {
  * state、getters、mutations、actions、modules
  **/
 //#endregion
-export default createStore({
+export default createStore<any>({
     //存放的属性（数据变量）。
     state: {
         "name": '初始VueX',

src/store/tabValue.js → src/store/tabValue.ts

@@ -2,7 +2,7 @@ import {
     createStore
 } from "vuex";
 
-export default createStore({
+export default createStore<any>({
     state: {
         "tabArray": [{
             title: '首页', //标题

src/utils/utils.ts

@@ -14,7 +14,7 @@ export function isValidKey(key: string | number | symbol, object: object): key i
  * @param {*} opts 用户配置对象
  * @returns 新的默认对象
  */
- export function mergeOptions(src: any, opts: any) {
+export function mergeOptions(src: any, opts: any) {
     const optsRet = {
         ...src
     };
@@ -24,4 +24,27 @@ export function isValidKey(key: string | number | symbol, object: object): key i
         }
     }
     return optsRet;
+}
+
+export function barkTime() {
+    const nowdate = new Date();
+    const year = nowdate.getFullYear(),
+        month = nowdate.getMonth() + 1,
+        date = nowdate.getDate(),
+        // day = nowdate.getDay(),
+        // week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
+        h = nowdate.getHours(),
+        m = nowdate.getMinutes(),
+        s = nowdate.getSeconds(),
+        hs = checkTime(h),
+        ms = checkTime(m),
+        ss = checkTime(s);
+    return (year + checkTime(month) + checkTime(date) + hs + ms + ss) + ''
+}
+function checkTime(i: number) {
+    let s = i + ''
+    if (i < 10) {
+        s = "0" + i;
+    }
+    return s;
 }

src/views/dengmingcong/TABActivate/TABActivate.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- 卡签注销 -->
-    <CRUD :homeData="Data" text="123">
+    <crud-form :homeData="Data" text="123">
         <template #search="{ searchCondition }">
             <!-- 搜索 监听回车 @keyup.enter.native="search"-->
             <el-input v-model="searchCondition.fileOne" clearable placeholder="卡号" style="width: 200px;" />
@@ -11,59 +11,59 @@
             </el-select>
             <el-button type="primary" icon="CreditCard">读卡</el-button>
         </template>
-    </CRUD>
+    </crud-form>
 </template>
 <script setup lang="ts">
-    import CRUD from "@/crud/index.vue";
-    import {
-        Data
-    } from '@/data/cardAfter/initiativeHangUp' //表单配置
-    import {
-        tableData
-    } from "@/data/tableData" //表单数据
+// @ts-ignore crudFrom模板
+import crudFrom from "@/crud/index.vue"
+import {
+    Data
+} from '@/data/cardAfter/initiativeHangUp' //表单配置
+import {
+    tableData
+} from "@/data/tableData" //表单数据
 
-    const options = [{
-            value: 'Option1',
-            label: '蓝色',
-        },
-        {
-            value: 'Option2',
-            label: '黄色',
-        },
-        {
-            value: 'Option3',
-            label: '黑色',
-        },
-        {
-            value: 'Option4',
-            label: '白色',
-        },
-        {
-            value: 'Option5',
-            label: '渐变绿色',
-        },
-        {
-            value: 'Option6',
-            label: '黄绿双拼色',
-        },
-        {
-            value: 'Option7',
-            label: '蓝白渐变色',
-        },
-        {
-            value: 'Option8',
-            label: '未确定',
-        },
-        {
-            value: 'Option9',
-            label: '绿色',
-        },
-        {
-            value: 'Option10',
-            label: '红色',
-        },
-    ]
+const options = [{
+    value: 'Option1',
+    label: '蓝色',
+},
+{
+    value: 'Option2',
+    label: '黄色',
+},
+{
+    value: 'Option3',
+    label: '黑色',
+},
+{
+    value: 'Option4',
+    label: '白色',
+},
+{
+    value: 'Option5',
+    label: '渐变绿色',
+},
+{
+    value: 'Option6',
+    label: '黄绿双拼色',
+},
+{
+    value: 'Option7',
+    label: '蓝白渐变色',
+},
+{
+    value: 'Option8',
+    label: '未确定',
+},
+{
+    value: 'Option9',
+    label: '绿色',
+},
+{
+    value: 'Option10',
+    label: '红色',
+},
+]
 </script>
 <style lang="scss" scoped>
-
 </style>

src/views/dengmingcong/cardFillDo/cardFillDo.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- 卡签补办 -->
-    <CRUD ref="crudRef" :homeData="datas">
+    <crud-form ref="crudRef" :homeData="datas">
         <!-- 自定义搜索 -->
         <template #search="{ searchCondition }">
             <!-- 搜索 监听回车 @keyup.enter.native="search"-->
@@ -12,8 +12,8 @@
         </template>
 
         <!-- 自定义编辑提交按钮 -->
-        <template #operation="{ scope , tableFrom }">
-            <el-button size="small" @click="reissue(scope,tableFrom)">补卡</el-button>
+        <template #operation="{ scope, tableFrom }">
+            <el-button size="small" @click="reissue(scope, tableFrom)">补卡</el-button>
         </template>
         <!-- 自定义弹框内容 -->
         <template #dialog="{ form }">
@@ -37,89 +37,86 @@
                 <el-button type="primary">提交</el-button>
             </span>
         </template>
-    </CRUD>
+    </crud-form>
 </template>
 <script setup lang="ts">
-    import CRUD from "@/crud/index.vue"
-    import {
-        Data
-    } from '@/data/cardAfter/cardFillDo' //表单配置
-    import {
-        tableData
-    } from "@/data/tableData" //表单数据
-    import {
-        ref,
-        reactive
-    } from 'vue'
-    import {
-        useRequest
-    } from 'vue-request';
-    import axios from 'axios';
-    
-    import {
-        getCurrentInstance
-    } from 'vue'
-    const {
-        proxy
-    } = getCurrentInstance();
+// @ts-ignore crudFrom模板
+import crudFrom from "@/crud/index.vue"
+import {
+    Data
+} from '@/data/cardAfter/cardFillDo' //表单配置
+import {
+    tableData
+} from "@/data/tableData" //表单数据
+import {
+    ref,
+    reactive
+} from 'vue'
+import axios from 'axios';
 
-    proxy.$request.get('api/user', {}, {
-        baseURL: 'http://192.168.1.101:8080'
-    }).then((res) => {
-        console.log(res);
-    }).catch((err) => {
-        console.log(err);
-    })
+import {
+    getCurrentInstance
+} from 'vue'
+const {
+    proxy
+}: any = getCurrentInstance();
 
-    const datas = reactive(Data);
-    const crudRef = ref()
-    const reissue = (scope, tableFrom) => {
-        crudRef.value.dialogFormVisible = true
-        crudRef.value.title = '补卡信息'
-    }
+proxy.$request.get('api/user', {}, {
+    baseURL: 'http://localhost:8080'
+}).then((res: {}) => {
+    console.log(res);
+}).catch((err: {}) => {
+    console.log(err);
+})
 
-    const options = [{
-            value: 'Option1',
-            label: '蓝色',
-        },
-        {
-            value: 'Option2',
-            label: '黄色',
-        },
-        {
-            value: 'Option3',
-            label: '黑色',
-        },
-        {
-            value: 'Option4',
-            label: '白色',
-        },
-        {
-            value: 'Option5',
-            label: '渐变绿色',
-        },
-        {
-            value: 'Option6',
-            label: '黄绿双拼色',
-        },
-        {
-            value: 'Option7',
-            label: '蓝白渐变色',
-        },
-        {
-            value: 'Option8',
-            label: '未确定',
-        },
-        {
-            value: 'Option9',
-            label: '绿色',
-        },
-        {
-            value: 'Option10',
-            label: '红色',
-        },
-    ]
+const datas = reactive(Data);
+const crudRef = ref()
+const reissue = (scope: any, tableFrom: any) => {
+    crudRef.value.dialogFormVisible = true
+    crudRef.value.title = '补卡信息'
+}
+
+const options = [{
+    value: 'Option1',
+    label: '蓝色',
+},
+{
+    value: 'Option2',
+    label: '黄色',
+},
+{
+    value: 'Option3',
+    label: '黑色',
+},
+{
+    value: 'Option4',
+    label: '白色',
+},
+{
+    value: 'Option5',
+    label: '渐变绿色',
+},
+{
+    value: 'Option6',
+    label: '黄绿双拼色',
+},
+{
+    value: 'Option7',
+    label: '蓝白渐变色',
+},
+{
+    value: 'Option8',
+    label: '未确定',
+},
+{
+    value: 'Option9',
+    label: '绿色',
+},
+{
+    value: 'Option10',
+    label: '红色',
+},
+]
 </script>
 <style lang="scss" scoped>
-
 </style>

src/views/dengmingcong/cardRenewal/cardRenewal.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- 卡签续期 -->
-    <CRUD ref="crudRef" :homeData="Data" text="123">
+    <crud-form ref="crudRef" :homeData="Data" text="123">
         <template #search="{ searchCondition }">
             <!-- 搜索 监听回车 @keyup.enter.native="search"-->
             <el-input v-model="searchCondition.fileTwo" clearable placeholder="车牌号码"
@@ -17,61 +17,61 @@
                 <el-button type="primary">OBU续签</el-button>
             </span>
         </template>
-    </CRUD>
+    </crud-form>
 </template>
 <script setup lang="ts">
-    import CRUD from "@/crud/index.vue"
-    import {
-        Data
-    } from '@/data/cardAfter/cardRenewal' //表单配置
-    import {
-        ref
-    } from 'vue'
+// @ts-ignore crudFrom模板
+import crudFrom from "@/crud/index.vue"
+import {
+    Data
+} from '@/data/cardAfter/cardRenewal' //表单配置
+import {
+    ref
+} from 'vue'
 
-    const crudRef = ref()
+const crudRef = ref()
 
-    const options = [{
-            value: 'Option1',
-            label: '蓝色',
-        },
-        {
-            value: 'Option2',
-            label: '黄色',
-        },
-        {
-            value: 'Option3',
-            label: '黑色',
-        },
-        {
-            value: 'Option4',
-            label: '白色',
-        },
-        {
-            value: 'Option5',
-            label: '渐变绿色',
-        },
-        {
-            value: 'Option6',
-            label: '黄绿双拼色',
-        },
-        {
-            value: 'Option7',
-            label: '蓝白渐变色',
-        },
-        {
-            value: 'Option8',
-            label: '未确定',
-        },
-        {
-            value: 'Option9',
-            label: '绿色',
-        },
-        {
-            value: 'Option10',
-            label: '红色',
-        },
-    ]
+const options = [{
+    value: 'Option1',
+    label: '蓝色',
+},
+{
+    value: 'Option2',
+    label: '黄色',
+},
+{
+    value: 'Option3',
+    label: '黑色',
+},
+{
+    value: 'Option4',
+    label: '白色',
+},
+{
+    value: 'Option5',
+    label: '渐变绿色',
+},
+{
+    value: 'Option6',
+    label: '黄绿双拼色',
+},
+{
+    value: 'Option7',
+    label: '蓝白渐变色',
+},
+{
+    value: 'Option8',
+    label: '未确定',
+},
+{
+    value: 'Option9',
+    label: '绿色',
+},
+{
+    value: 'Option10',
+    label: '红色',
+},
+]
 </script>
 <style lang="scss" scoped>
-
 </style>

src/views/dengmingcong/initiativeHangUp/initiativeHangUp.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- 主动挂起服务 -->
-    <CRUD :homeData="Data" text="123">
+    <crud-form :homeData="Data" text="123">
         <template #search="{ searchCondition }">
             <!-- 搜索 监听回车 @keyup.enter.native="search"-->
             <el-input v-model="searchCondition.fileOne" clearable placeholder="卡号" style="width: 200px;" />
@@ -11,59 +11,59 @@
             </el-select>
             <el-button type="primary" icon="CreditCard">读卡</el-button>
         </template>
-    </CRUD>
+    </crud-form>
 </template>
 <script setup lang="ts">
-    import CRUD from "@/crud/index.vue";
-    import {
-        Data
-    } from '@/data/cardAfter/initiativeHangUp' //表单配置
-    import {
-        tableData
-    } from "@/data/tableData" //表单数据
+// @ts-ignore crudFrom模板
+import crudFrom from "@/crud/index.vue"
+import {
+    Data
+} from '@/data/cardAfter/initiativeHangUp' //表单配置
+import {
+    tableData
+} from "@/data/tableData" //表单数据
 
-    const options = [{
-            value: 'Option1',
-            label: '蓝色',
-        },
-        {
-            value: 'Option2',
-            label: '黄色',
-        },
-        {
-            value: 'Option3',
-            label: '黑色',
-        },
-        {
-            value: 'Option4',
-            label: '白色',
-        },
-        {
-            value: 'Option5',
-            label: '渐变绿色',
-        },
-        {
-            value: 'Option6',
-            label: '黄绿双拼色',
-        },
-        {
-            value: 'Option7',
-            label: '蓝白渐变色',
-        },
-        {
-            value: 'Option8',
-            label: '未确定',
-        },
-        {
-            value: 'Option9',
-            label: '绿色',
-        },
-        {
-            value: 'Option10',
-            label: '红色',
-        },
-    ]
+const options = [{
+    value: 'Option1',
+    label: '蓝色',
+},
+{
+    value: 'Option2',
+    label: '黄色',
+},
+{
+    value: 'Option3',
+    label: '黑色',
+},
+{
+    value: 'Option4',
+    label: '白色',
+},
+{
+    value: 'Option5',
+    label: '渐变绿色',
+},
+{
+    value: 'Option6',
+    label: '黄绿双拼色',
+},
+{
+    value: 'Option7',
+    label: '蓝白渐变色',
+},
+{
+    value: 'Option8',
+    label: '未确定',
+},
+{
+    value: 'Option9',
+    label: '绿色',
+},
+{
+    value: 'Option10',
+    label: '红色',
+},
+]
 </script>
 <style lang="scss" scoped>
-
 </style>

src/views/dengmingcong/passivityHangUp/passivityHangUp.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- 被动挂起服务 -->
-    <CRUD :homeData="Data" text="123">
+    <crud-form :homeData="Data" text="123">
         <template #search="{ searchCondition }">
             <!-- 搜索 监听回车 @keyup.enter.native="search"-->
             <el-input v-model="searchCondition.fileOne" clearable placeholder="卡号" style="width: 200px;" />
@@ -11,59 +11,59 @@
             </el-select>
             <el-button type="primary" icon="CreditCard">读卡</el-button>
         </template>
-    </CRUD>
+    </crud-form>
 </template>
 <script setup lang="ts">
-    import CRUD from "@/crud/index.vue";
-    import {
-        Data
-    } from '@/data/cardAfter/initiativeHangUp' //表单配置
-    import {
-        tableData
-    } from "@/data/tableData" //表单数据
+// @ts-ignore crudFrom模板
+import crudFrom from "@/crud/index.vue"
+import {
+    Data
+} from '@/data/cardAfter/initiativeHangUp' //表单配置
+import {
+    tableData
+} from "@/data/tableData" //表单数据
 
-    const options = [{
-            value: 'Option1',
-            label: '蓝色',
-        },
-        {
-            value: 'Option2',
-            label: '黄色',
-        },
-        {
-            value: 'Option3',
-            label: '黑色',
-        },
-        {
-            value: 'Option4',
-            label: '白色',
-        },
-        {
-            value: 'Option5',
-            label: '渐变绿色',
-        },
-        {
-            value: 'Option6',
-            label: '黄绿双拼色',
-        },
-        {
-            value: 'Option7',
-            label: '蓝白渐变色',
-        },
-        {
-            value: 'Option8',
-            label: '未确定',
-        },
-        {
-            value: 'Option9',
-            label: '绿色',
-        },
-        {
-            value: 'Option10',
-            label: '红色',
-        },
-    ]
+const options = [{
+    value: 'Option1',
+    label: '蓝色',
+},
+{
+    value: 'Option2',
+    label: '黄色',
+},
+{
+    value: 'Option3',
+    label: '黑色',
+},
+{
+    value: 'Option4',
+    label: '白色',
+},
+{
+    value: 'Option5',
+    label: '渐变绿色',
+},
+{
+    value: 'Option6',
+    label: '黄绿双拼色',
+},
+{
+    value: 'Option7',
+    label: '蓝白渐变色',
+},
+{
+    value: 'Option8',
+    label: '未确定',
+},
+{
+    value: 'Option9',
+    label: '绿色',
+},
+{
+    value: 'Option10',
+    label: '红色',
+},
+]
 </script>
 <style lang="scss" scoped>
-
 </style>

src/views/system/home/Home.vue

@@ -1,34 +1,50 @@
 <template>
   <!-- accept 限制上传文件格式 .text-->
-  <el-upload ref="uploadRef" class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
-    on-progress="progress" :auto-upload="false">
+  <el-upload
+    ref="uploadRef"
+    action="https://jsonplaceholder.typicode.com/posts/"
+    :auto-upload="false"
+    :on-change="handleChange"
+    :file-list="fileList"
+  >
     <template #trigger>
       <el-button type="primary">select file</el-button>
     </template>
 
-    <el-button class="ml-3" type="success" @click="submitUpload">
-      upload to server
-    </el-button>
+    <el-button class="ml-3" type="success" @click="submitUpload"> upload to server </el-button>
 
     <template #tip>
-      <div class="el-upload__tip">
-        jpg/png files with a size less than 500kb
-      </div>
+      <div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
     </template>
   </el-upload>
 </template>
 <script lang="ts" setup>
-  import {
-    ref
-  } from 'vue'
+import { ref } from 'vue'
+import { barkTime } from '@/utils/utils'
+import { UploadProps, UploadUserFile } from 'element-plus'
 
-  const uploadRef = ref()
+const uploadRef = ref()
+const fileList = ref<UploadUserFile[]>([])
 
-  const submitUpload = () => {
-    uploadRef.value.submit()
-  }
+console.log(barkTime()) //时间戳
 
-  const progress = (evt, uploadFile, uploadFiles) => {
-    console.log(evt, uploadFile, uploadFiles);
-  }
+const submitUpload = () => {
+  uploadRef.value.submit()
+}
+
+const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
+  // console.log(uploadFile, fileList.value.slice(-1));
+
+  fileList.value = fileList.value.slice(-1)
+  // let imgSize = Number(uploadFile.size / 1024).toFixed(2); // / 1024
+  // //截取后缀名
+  // const suffix = (uploadFile.name + '').split('.')[1]
+  // //修改文件名称
+  // uploadFile.name = barkTime() + '.' + suffix
+  // if (uploadFiles) {
+  //   uploadFiles.value.split(uploadFiles.value.length, 1)
+  // }
+
+  console.log(fileList.value)
+}
 </script>