diff --git a/src/App.vue b/src/App.vue
index 3ef20aac..d5e09424 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,11 +7,14 @@ import watermark from '@/utils/watermark.js';
 
 const setWater = () => {
   const userInfo = localStorage.getItem('TWMS-userInfo');
+  const WarehouseName = localStorage.getItem('WarehouseName');
   if (!userInfo) {
     return;
   }
 
-  watermark.set(userInfo ? '货无忧 - ' + JSON.parse(userInfo).content.nick_name : '货无忧');
+  watermark.set(
+    userInfo ? WarehouseName + ' - ' + JSON.parse(userInfo).content.nick_name : '货无忧'
+  );
 };
 
 setWater();
diff --git a/src/api/resource/oss.js b/src/api/resource/oss.js
index c1262962..35d003cb 100644
--- a/src/api/resource/oss.js
+++ b/src/api/resource/oss.js
@@ -1,14 +1,10 @@
 import request from '@/axios';
 
-export const getList = (current, size, params) => {
+export const getList = params => {
   return request({
     url: '/blade-resource/oss/list',
     method: 'get',
-    params: {
-      ...params,
-      current,
-      size,
-    },
+    params,
   });
 };
 
diff --git a/src/option/resource/oss.js b/src/option/resource/oss.js
new file mode 100644
index 00000000..9dae471c
--- /dev/null
+++ b/src/option/resource/oss.js
@@ -0,0 +1,116 @@
+export const columnList = [
+  {
+    prop: '',
+    label: '复选框',
+    type: 0,
+    width: 55,
+    fixed: true,
+  },
+  {
+    prop: '',
+    label: '序号',
+    type: 12,
+    values: '',
+    width: 55,
+    fixed: true,
+  },
+  {
+    prop: 'categoryName',
+    label: '分类',
+    type: 3,
+    values: '',
+    width: '200',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'ossCode',
+    label: '资源编号',
+    type: 1,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'endpoint',
+    label: '资源地址',
+    type: 1,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'bucketName',
+    label: '空间名',
+    type: 1,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+
+  {
+    prop: 'accessKey',
+    label: 'accessKey',
+    type: 1,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'secretKey',
+    label: 'secretKey',
+    type: 1,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'statusName',
+    label: '是否启用',
+    type: 1,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+  {
+    label: '备注',
+    prop: 'remark',
+    type: 1,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: '',
+    label: '操作',
+    type: 6,
+    values: '',
+    width: '200',
+    checkarr: [],
+    fixed: 'right',
+    sortable: false,
+  },
+];
diff --git a/src/utils/watermark.js b/src/utils/watermark.js
index c69a2ee2..e12055b3 100644
--- a/src/utils/watermark.js
+++ b/src/utils/watermark.js
@@ -10,12 +10,12 @@ let setWatermark = str => {
   }
 
   let can = document.createElement('canvas');
-  can.width = 800;
-  can.height = 800;
+  can.width = 400;
+  can.height = 400;
 
   let cans = can.getContext('2d');
   cans.rotate((-15 * Math.PI) / 150);
-  cans.font = '50px Vedana';
+  cans.font = '25px Vedana';
   cans.fillStyle = 'rgba(17, 17, 17, 0.10)';
   cans.textAlign = 'left';
   cans.textBaseline = 'Middle';
@@ -24,13 +24,13 @@ let setWatermark = str => {
   let div = document.createElement('div');
   div.id = id;
   div.style.pointerEvents = 'none';
-  div.style.top = '50px';
-  div.style.left = '500px';
+  div.style.top = '0px';
+  div.style.left = '0px';
   div.style.position = 'fixed';
   div.style.zIndex = '1000000';
   div.style.width = document.documentElement.clientWidth + 'px';
   div.style.height = document.documentElement.clientHeight + 'px';
-  div.style.background = 'url(' + can.toDataURL('image/png') + ') left top no-repeat';
+  div.style.background = 'url(' + can.toDataURL('image/png') + ') left top ';
   document.body.appendChild(div);
   return id;
 };
diff --git a/src/views/resource/oss.vue b/src/views/resource/oss.vue
index e4346c31..1ad281b3 100644
--- a/src/views/resource/oss.vue
+++ b/src/views/resource/oss.vue
@@ -1,452 +1,739 @@
 <template>
-  <basic-container>
-    <avue-crud
-      :option="option"
-      :table-loading="loading"
-      :data="data"
-      v-model:page="page"
-      :permission="permissionList"
-      v-model="form"
-      ref="crud"
-      @row-update="rowUpdate"
-      @row-save="rowSave"
-      @row-del="rowDel"
-      :before-open="beforeOpen"
-      @search-change="searchChange"
-      @search-reset="searchReset"
-      @selection-change="selectionChange"
-      @current-change="currentChange"
-      @size-change="sizeChange"
-      @refresh-change="refreshChange"
-      @on-load="onLoad"
-    >
-      <template #menu-left>
-        <el-button
-          type="danger"
-          icon="el-icon-delete"
-          plain
-          v-if="permission.oss_delete"
-          @click="handleDelete"
-          >删 除
-        </el-button>
-      </template>
-      <template #menu="scope">
-        <el-button
-          type="primary"
-          text
-          icon="el-icon-video-play"
-          v-if="userInfo.role_name.includes('admin')"
-          @click="handleDebug(scope.row)"
-          >调试
-        </el-button>
-        <el-button
-          type="primary"
-          text
-          icon="el-icon-circle-check"
-          v-if="permission.oss_enable"
-          @click.stop="handleEnable(scope.row)"
-          >启用
-        </el-button>
-      </template>
-      <template #status="{ row }">
-        <el-tag>{{ row.statusName }}</el-tag>
-      </template>
-      <template #category="{ row }">
-        <el-tag>{{ row.categoryName }}</el-tag>
-      </template>
-    </avue-crud>
-    <el-dialog title="对象存储上传调试" append-to-body v-model="box" width="550px">
-      <avue-form ref="form" :option="debugOption" v-model="debugForm" @submit="handleSubmit" />
-    </el-dialog>
+  <basic-container v-loading="details.loadingObj.pageLoading">
+    <div class="avue-crud">
+      <!-- 搜索模块 -->
+      <div v-h5uShow="search">
+        <!-- 查询模块 -->
+        <el-form :inline="true" :model="query" class="header_search" label-width="100px">
+          <!-- 查询按钮 -->
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
+            <el-button icon="el-icon-delete" @click="searchReset">清 空</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 控件模块 -->
+      <div class="avue-crud__header flex-c-sb">
+        <!-- 头部左侧按钮模块 -->
+        <div class="avue-crud__left">
+          <!-- 新增 -->
+          <el-button
+            v-if="$store.state.user.permission.oss_add"
+            type="primary"
+            icon="CirclePlusFilled"
+            @click="handleAdd"
+            >新 增
+          </el-button>
+
+          <!-- 删除 -->
+          <el-button
+            v-if="$store.state.user.permission.oss_delete"
+            type="primary"
+            icon="Delete"
+            @click="handleBatchRemove"
+            >删 除
+          </el-button>
+        </div>
+        <!-- 头部右侧按钮模块 -->
+        <div class="avue-crud__right">
+          <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
+          <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
+          <el-button icon="Search" @click="searchHide" circle></el-button>
+        </div>
+      </div>
+
+      <!-- 列表模块 -->
+      <tablecmt
+        ref="tableNodeRef"
+        :columnList="details.columnList"
+        :tableData="details.data"
+        :loading="loadingObj.list"
+        @inputTxt="inputsc"
+        @timeCheck="timesc"
+        @btnCheck="btnsc"
+        @selectCheck="selectsc"
+        @selection="selectionChange"
+      >
+        <template #default="{ scope: { row, column } }">
+          <!-- 删除 -->
+          <el-text v-if="$store.state.user.permission.oss_delete" @click="() => handleDelete(row)">
+            删 除
+          </el-text>
+
+          <!-- 编辑 -->
+          <el-text v-if="$store.state.user.permission.oss_edit" @click="() => handleEdit(row)">
+            编 辑
+          </el-text>
+
+          <!-- 调试 -->
+          <el-text @click="() => handleDebug(row)"> 调 试 </el-text>
+
+          <!-- 启用 -->
+          <el-text @click="() => handleEnable(row)"> 启 用 </el-text>
+        </template>
+      </tablecmt>
+
+      <!-- 分页模块 -->
+      <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
+        <div style="font-size: 14px">勾选数量: {{ selectionList.length }}</div>
+        <!-- 分页模块 -->
+        <el-pagination
+          align="right"
+          background
+          @size-change="sizeChange"
+          @current-change="currentChange"
+          :current-page="page.current"
+          :page-sizes="[30, 50, 80, 120, 500]"
+          :page-size="page.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="page.total"
+        >
+        </el-pagination>
+      </div>
+
+      <!-- 新增 & 编辑 -->
+      <el-dialog
+        :title="details.title"
+        width="780px"
+        destroy-on-close
+        v-model="details.popUpShow.add"
+      >
+        <div class="el-dialog-add">
+          <el-form :inline="true" :model="details.form" label-width="100px">
+            <el-form-item
+              v-for="item in details.addFormOption"
+              :key="item.prop"
+              :label="item.label"
+              :rules="[
+                {
+                  required: item.required,
+                  message: (item.type === 'select' ? '请选择' : '请输入') + item.label,
+                  trigger: ['blur', 'change'],
+                },
+              ]"
+              :prop="item.prop"
+            >
+              <template v-if="item.type === 'number'">
+                <el-input-number
+                  :value-on-clear="0"
+                  :controls="false"
+                  :precision="0"
+                  :min="0"
+                  v-model="details.form[item.prop]"
+                  :placeholder="`请输入${item.label}`"
+                ></el-input-number>
+              </template>
+
+              <template v-else-if="item.type === 'select'">
+                <el-select
+                  v-model="details.form[item.prop]"
+                  filterable
+                  :multiple="item.multiple || false"
+                  :placeholder="`请输入${item.label}`"
+                  :disabled="item.disabled"
+                  clearable
+                >
+                  <el-option
+                    v-for="value in item.checkarr"
+                    :key="value.dictValue"
+                    :label="value.dictValue"
+                    :value="value.dictKey"
+                  />
+                </el-select>
+              </template>
+
+              <template v-else-if="item.type === 'input'">
+                <el-input
+                  v-model="details.form[item.prop]"
+                  :placeholder="`请输入${item.label}`"
+                  clearable
+                >
+                </el-input>
+              </template>
+            </el-form-item>
+
+            <!-- 查询按钮 -->
+            <el-form-item>
+              <div class="flex-c-sb w100">
+                <div></div>
+                <div>
+                  <el-button icon="el-icon-delete" @click="() => (details.popUpShow.add = false)">
+                    关 闭
+                  </el-button>
+
+                  <el-button type="primary" icon="Position" @click="handleSubmitAdd">
+                    新 增
+                  </el-button>
+                </div>
+              </div>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-dialog>
+
+      <!-- 对象存储上传调试 -->
+      <el-dialog
+        title="对象存储上传调试"
+        width="780px"
+        destroy-on-close
+        v-model="details.popUpShow.debugVisted"
+      >
+        <div class="el-dialog-add">
+          <el-form :model="details.debugForm" label-width="100px">
+            <el-form-item label="资源编号">
+              <el-input v-model="details.debugForm.code" disabled> </el-input>
+            </el-form-item>
+
+            <el-form-item label="上传背景">
+              <div v-loading="details.loadingObj.upload">
+                <el-upload
+                  class="avatar-uploader"
+                  action="/api/blade-resource/oss/endpoint/put-file"
+                  :show-file-list="false"
+                  :on-success="handleAvatarSuccess"
+                  :before-upload="beforeAvatarUpload"
+                  :headers="headers"
+                >
+                  <img
+                    v-if="details.debugForm.imgUrl"
+                    :src="details.debugForm.imgUrl"
+                    class="avatar"
+                    style="width: 200px; height: 200px"
+                  />
+                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+                </el-upload>
+              </div>
+            </el-form-item>
+
+            <!-- 查询按钮 -->
+            <el-form-item>
+              <div class="flex-c-sb w100">
+                <div></div>
+                <div>
+                  <el-button
+                    icon="el-icon-delete"
+                    @click="() => (details.popUpShow.debugVisted = false)"
+                  >
+                    关 闭
+                  </el-button>
+
+                  <el-button
+                    type="primary"
+                    icon="Position"
+                    @click="() => ElMessage.success(`获取到图片地址:[${details.debugForm.imgUrl}]`)"
+                  >
+                    确 认
+                  </el-button>
+                </div>
+              </div>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-dialog>
+    </div>
   </basic-container>
+
+  <edittablehead
+    @closce="showdrawer"
+    :drawerShow="drawerShow"
+    :columnList="details.columnList"
+    v-model="details.columnList"
+  ></edittablehead>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref, reactive, toRefs, computed } from 'vue';
+import functions from '@/utils/functions.js';
+import dayjs from 'dayjs';
+import { mapGetters, useStore } from 'vuex';
+/** 获取字典 */
+import { getDictionary } from '@/api/system/dict';
 import { getList, getDetail, add, update, remove, enable } from '@/api/resource/oss';
-import { mapGetters } from 'vuex';
-import func from '@/utils/func';
-
-export default {
-  data() {
-    return {
-      form: {},
-      query: {},
-      loading: true,
-      box: false,
-      page: {
-        pageSize: 30,
-        currentPage: 1,
-        total: 0,
-      },
-      selectionList: [],
-      option: {
-        height: 'auto',
-        calcHeight: 32,
-        tip: false,
-        searchShow: false,
-        searchMenuSpan: 6,
-        border: true,
-        index: true,
-        viewBtn: true,
-        selection: true,
-        menuWidth: 350,
-        labelWidth: 100,
-        dialogWidth: 880,
-        dialogClickModal: false,
-        column: [
-          {
-            label: '分类',
-            type: 'radio',
-            value: 1,
-            span: 24,
-            width: 120,
-            searchLabelWidth: 50,
-            row: true,
-            dicUrl: '/blade-system/dict/dictionary?code=oss',
-            props: {
-              label: 'dictValue',
-              value: 'dictKey',
-            },
-            dataType: 'number',
-            slot: true,
-            prop: 'category',
-            search: true,
-            rules: [
-              {
-                required: true,
-                message: '请选择分类',
-                trigger: 'blur',
-              },
-            ],
-          },
-          {
-            label: '资源编号',
-            prop: 'ossCode',
-            span: 24,
-            width: 120,
-            search: true,
-            rules: [
-              {
-                required: true,
-                message: '请输入资源编号',
-                trigger: 'blur',
-              },
-            ],
-          },
-          {
-            label: '资源地址',
-            prop: 'endpoint',
-            span: 24,
-            rules: [
-              {
-                required: true,
-                message: '请输入资源地址',
-                trigger: 'blur',
-              },
-            ],
-          },
-          {
-            label: '空间名',
-            prop: 'bucketName',
-            span: 24,
-            width: 120,
-            rules: [
-              {
-                required: true,
-                message: '请输入空间名',
-                trigger: 'blur',
-              },
-            ],
-          },
-          {
-            label: 'accessKey',
-            prop: 'accessKey',
-            span: 24,
-            search: true,
-            width: 200,
-            overHidden: true,
-            rules: [
-              {
-                required: true,
-                message: '请输入accessKey',
-                trigger: 'blur',
-              },
-            ],
-          },
-          {
-            label: 'secretKey',
-            prop: 'secretKey',
-            span: 24,
-            width: 200,
-            overHidden: true,
-            rules: [
-              {
-                required: true,
-                message: '请输入secretKey',
-                trigger: 'blur',
-              },
-            ],
-          },
-          {
-            label: 'appId',
-            prop: 'appId',
-            span: 24,
-            hide: true,
-            display: false,
-          },
-          {
-            label: 'region',
-            prop: 'region',
-            span: 24,
-            hide: true,
-            display: false,
-          },
-          {
-            label: '是否启用',
-            prop: 'status',
-            span: 24,
-            width: 85,
-            align: 'center',
-            slot: true,
-            addDisplay: false,
-            editDisplay: false,
-            viewDisplay: false,
-          },
-          {
-            label: '备注',
-            prop: 'remark',
-            span: 24,
-            hide: true,
-          },
-        ],
-      },
-      data: [],
-      debugForm: {
-        code: '',
+import { getListName } from '@/api/basicdata/basicdataVehicle';
+import {
+  setNodeHeight,
+  getHtmls,
+  deepClone,
+  getObjType,
+  handleTranslationDataSeclect,
+  handleClearTableQuery,
+  handleSelectQuery,
+  handleInputQuery,
+  downloadXls,
+} from '@/utils/util';
+import { useRouter } from 'vue-router';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { columnList } from '@/option/resource/oss';
+import { getToken } from '@/utils/auth';
+
+// 获取路由实例
+const $router = useRouter();
+const $store = useStore();
+
+console.log('$store.state.permission :>> ', $store.state);
+
+// 组件实例
+const tableNodeRef = ref();
+
+const details = reactive<any>({
+  /** 是否开启搜索 */
+  search: true,
+  /** 表格搜索条件 */
+  query: {},
+  /** 时间快捷选择设置 */
+  shortcuts: [
+    {
+      text: '最近一周',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+        return [start, end];
       },
-      debugOption: {
-        submitText: '提交',
-        column: [
-          {
-            label: '资源编号',
-            prop: 'code',
-            disabled: true,
-            span: 24,
-          },
-          {
-            label: '上传背景',
-            prop: 'backgroundUrl',
-            type: 'upload',
-            listType: 'picture-img',
-            dataType: 'string',
-            action: '/blade-resource/oss/endpoint/put-file',
-            propsHttp: {
-              res: 'data',
-              url: 'link',
-            },
-            span: 24,
-          },
-        ],
+    },
+    {
+      text: '最近一个月',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+        return [start, end];
       },
-    };
-  },
-  watch: {
-    'form.category'() {
-      const category = func.toInt(this.form.category);
-      this.$refs.crud.option.column.filter(item => {
-        if (item.prop === 'appId') {
-          item.display = category === 4;
-        }
-        if (item.prop === 'region') {
-          item.display = category === 4 || category === 5;
-        }
-      });
     },
-    'debugForm.code'() {
-      const column = this.findObject(this.debugOption.column, 'backgroundUrl');
-      column.action = `/blade-resource/oss/endpoint/put-file?code=${this.debugForm.code}`;
+    {
+      text: '最近三个月',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+        return [start, end];
+      },
     },
+  ],
+  columnList: deepClone(columnList),
+  data: [],
+  /** 头部搜索配置 */
+  titleSearchOption: [],
+  /** 流转节点数据 */
+  flowNodeData: [],
+  /** 页面loading */
+  loadingObj: {
+    /** 列表加载loading */
+    list: false,
+    packageListLoading: false,
+    upload: false,
   },
-  computed: {
-    ...mapGetters(['userInfo', 'permission']),
-    permissionList() {
-      return {
-        addBtn: this.validData(this.permission.oss_add),
-        viewBtn: this.validData(this.permission.oss_view),
-        delBtn: this.validData(this.permission.oss_delete),
-        editBtn: this.validData(this.permission.oss_edit),
-      };
-    },
-    ids() {
-      let ids = [];
-      this.selectionList.forEach(ele => {
-        ids.push(ele.id);
-      });
-      return ids.join(',');
-    },
+  /** 列表复选框选中的数据 */
+  selectionList: [],
+  /** 是否显示设置表格 */
+  drawerShow: false,
+  /** 分页参数 */
+  page: {
+    current: 1,
+    size: 30,
+    total: 0,
   },
-  methods: {
-    rowSave(row, done, loading) {
-      add(row).then(
-        () => {
-          this.onLoad(this.page);
-          this.$message({
-            type: 'success',
-            message: '操作成功!',
-          });
-          done();
-        },
-        error => {
-          window.console.log(error);
-          loading();
-        }
-      );
-    },
-    rowUpdate(row, index, done, loading) {
-      update(row).then(
-        () => {
-          this.onLoad(this.page);
-          this.$message({
-            type: 'success',
-            message: '操作成功!',
-          });
-          done();
-        },
-        error => {
-          window.console.log(error);
-          loading();
-        }
-      );
-    },
-    rowDel(row) {
-      this.$confirm('确定将选择数据删除?', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-        .then(() => {
-          return remove(row.id);
-        })
-        .then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: 'success',
-            message: '操作成功!',
-          });
-        });
-    },
-    searchReset() {
-      this.query = {};
-      this.onLoad(this.page);
-    },
-    searchChange(params, done) {
-      this.query = params;
-      this.page.currentPage = 1;
-      this.onLoad(this.page, params);
-      done();
+  /** 品牌 */
+  brandOptions: [],
+  /** 事业线 */
+  businessLineOption: [],
+  /** 仓库 */
+  warehouseOption: [],
+  /** 弹出层显示 */
+  popUpShow: {
+    add: false,
+  },
+  /** 全屏 */
+  fullscreenObj: {},
+  addFormOption: [
+    {
+      prop: 'category',
+      label: '分类',
+      type: 'select',
+      checkarr: [],
+      required: true,
     },
-    selectionChange(list) {
-      this.selectionList = list;
+
+    {
+      prop: 'ossCode',
+      label: '资源编号',
+      type: 'input',
+      required: true,
     },
-    selectionClear() {
-      this.selectionList = [];
-      this.$refs.crud.toggleSelection();
+
+    {
+      prop: 'endpoint',
+      label: '资源地址',
+      type: 'input',
+      required: true,
     },
-    handleEnable(row) {
-      this.$confirm('是否确定启用这条配置?', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-        .then(() => {
-          return enable(row.id);
-        })
-        .then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: 'success',
-            message: '操作成功!',
-          });
-          this.$refs.crud.toggleSelection();
-        });
+
+    {
+      prop: 'bucketName',
+      label: '空间名',
+      type: 'input',
+      required: true,
     },
-    handleDebug(row) {
-      this.box = true;
-      this.debugForm.code = row.ossCode;
-      this.debugForm.backgroundUrl = '';
+
+    {
+      prop: 'accessKey',
+      label: 'accessKey',
+      type: 'input',
+      required: true,
     },
-    handleSubmit(form, done) {
-      this.$message({
-        type: 'success',
-        message: `获取到图片地址:[${form.backgroundUrl}]`,
-      });
-      done();
+
+    {
+      prop: 'secretKey',
+      label: 'secretKey',
+      type: 'input',
+      required: true,
     },
-    handleDelete() {
-      if (this.selectionList.length === 0) {
-        this.$message.warning('请选择至少一条数据');
-        return;
-      }
-      this.$confirm('确定将选择数据删除?', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-        .then(() => {
-          return remove(this.ids);
-        })
-        .then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: 'success',
-            message: '操作成功!',
-          });
-          this.$refs.crud.toggleSelection();
-        });
+
+    {
+      label: '备注',
+      prop: 'remark',
+      type: 'input',
     },
-    beforeOpen(done, type) {
-      if (['edit', 'view'].includes(type)) {
-        getDetail(this.form.id).then(res => {
-          this.form = res.data.data;
-        });
+  ],
+  form: {} as any,
+  title: '新增' as '新增' | '编辑',
+  debugForm: {},
+});
+
+// 图片上传必须携带TOKEN
+const headers = computed(() => {
+  return { 'Blade-Auth': 'Bearer ' + getToken() };
+});
+
+const { search, query, shortcuts, loadingObj, selectionList, drawerShow, page } = toRefs(details);
+
+/** 权限按钮 */
+const permissionObj = reactive({});
+
+/** 请求页面数据 */
+const onLoad = async (params = {}) => {
+  try {
+    details.loadingObj.list = true;
+
+    const submitData = { ...details.page, ...details.query, ...params };
+
+    for (const key in submitData) {
+      const element = submitData[key];
+
+      if (!element && element !== 0) delete submitData[key];
+    }
+
+    delete submitData.total;
+
+    const res = await getList(submitData);
+    const { code, data } = res.data;
+    if (code !== 200) return;
+    details.data = getObjType(data.records) === 'array' ? data.records : [];
+    details.page.total = data.total;
+
+    handleTranslationDataSeclect(details.data, details.columnList);
+  } catch (error) {
+    console.log('error :>> ', error);
+  } finally {
+    details.loadingObj.list = false;
+  }
+};
+
+// 处理数据
+const handleData = (key, res) => {
+  const { code, data } = res.data;
+  if (code !== 200) return;
+  for (let i = 0; i < details.columnList.length; i++) {
+    const value = details.columnList[i];
+
+    if (value.label === key)
+      return (value.checkarr =
+        getObjType(data) === 'array'
+          ? data.map(val => {
+              val.label = val.dictValue;
+              val.value = val.dictKey;
+              return val;
+            })
+          : []);
+  }
+};
+
+const init = async () => {
+  try {
+    details.loadingObj.pageLoading = true;
+
+    // 并发请求
+    await Promise.all([
+      // 车辆来源
+      getDictionary({ code: 'oss' }).then(res => handleData('分类', res)),
+      onLoad(),
+    ]);
+
+    for (let i = 0; i < details.addFormOption.length; i++) {
+      const val = details.addFormOption[i];
+      if (val.type !== 'select') continue;
+      for (let j = 0; j < details.columnList.length; j++) {
+        const item = details.columnList[j];
+
+        if (val.label !== item.label) continue;
+        val.checkarr = [...item.checkarr];
+        break;
       }
-      done();
-    },
-    currentChange(currentPage) {
-      this.page.currentPage = currentPage;
-    },
-    sizeChange(pageSize) {
-      this.page.pageSize = pageSize;
-    },
-    refreshChange() {
-      this.onLoad(this.page, this.query);
-    },
-    onLoad(page, params = {}) {
-      this.loading = true;
-      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
-        const data = res.data.data;
-        this.page.total = data.total;
-        this.data = data.records;
-        this.loading = false;
-        this.selectionClear();
-      });
-    },
-  },
+    }
+  } catch (error) {
+    console.log('error :>> ', error);
+  } finally {
+    details.loadingObj.pageLoading = false;
+  }
+};
+
+init();
+
+/** 搜索 */
+const searchChange = () => {
+  onLoad();
+};
+
+/** 清空表单 */
+const searchReset = () => {
+  details.query = {};
+  details.page.current = 1;
+  handleClearTableQuery(details.columnList);
+  onLoad();
+};
+
+/** 展开列表控件 */
+const showdrawer = (_flag?: boolean) => {
+  details.drawerShow = _flag;
+};
+
+/** 是否开启搜索区 */
+const searchHide = () => {
+  details.search = !details.search;
+
+  setNodeHeight(tableNodeRef.value.$el, '', true);
+};
+
+/** 表格表头输入框搜索 */
+const inputsc = (index, row) => {
+  handleInputQuery(index, row, details.query);
+  onLoad();
+};
+
+/** 表格表头时间选择 */
+const timesc = (index, row) => {
+  console.log(index, row);
+  if (!!index) {
+    index = dayjs(index).format('YYYY-MM-DD');
+  }
+  details.query[row.prop] = index;
+  if (!index) {
+    delete details.query[row.prop];
+  }
+  onLoad();
+};
+
+/** 表格表头输入框搜索 */
+const btnsc = () => {};
+
+/** 表格表头下拉框选择 */
+const selectsc = (index, row) => {
+  handleSelectQuery(index, row, details.query);
+  onLoad();
+};
+
+/** 表格表头复选框选择 */
+const selectionChange = (list: any) => {
+  details.selectionList = list;
+};
+
+/** 每页数量改变执行的回调 */
+const sizeChange = (size: number) => {
+  details.page.size = size;
+  onLoad();
+};
+
+/** 页码改变执行的回调 */
+const currentChange = current => {
+  details.page.current = current;
+  onLoad();
+};
+
+/** 新增 */
+const handleAdd = () => {
+  details.title = '新增';
+  const form = {};
+
+  for (let i = 0; i < details.addFormOption.length; i++) {
+    const val = details.addFormOption[i];
+    form[val.prop] = val.default || '';
+  }
+
+  details.form = form;
+
+  details.popUpShow.add = true;
+};
+
+/** 编辑 */
+const handleEdit = row => {
+  details.title = '编辑';
+  const form: any = {};
+
+  for (let i = 0; i < details.addFormOption.length; i++) {
+    const val = details.addFormOption[i];
+    form[val.prop] = row[val.prop] + '' || '';
+  }
+
+  form.id = row.id;
+
+  details.form = form;
+
+  details.popUpShow.add = true;
+};
+
+/** 新增提交 */
+const handleSubmitAdd = async () => {
+  try {
+    details.loadingObj.pageLoading = true;
+
+    const submitData = deepClone(details.form);
+
+    details.popUpShow.add = false;
+    const res = await add(submitData);
+
+    const { code, data, msg } = res.data;
+    if (code !== 200) return;
+
+    ElMessage.success(msg);
+    onLoad();
+  } catch (error) {
+    console.log('error :>> ', error);
+  } finally {
+    details.loadingObj.pageLoading = false;
+  }
+};
+
+/** 删除提交 */
+const handleDelete = row => {
+  ElMessageBox.confirm('确认删除', '提示', {
+    type: 'warning',
+  }).then(async () => {
+    try {
+      details.loadingObj.pageLoading = true;
+
+      const res = await remove(row.id);
+      const { code, msg } = res.data;
+      if (code !== 200) return;
+      ElMessage.success(msg);
+      onLoad();
+    } catch (error) {
+      console.log('error :>> ', error);
+    } finally {
+      details.loadingObj.pageLoading = false;
+    }
+  });
+};
+
+/** 批量删除 */
+const handleBatchRemove = () => {
+  if (details.selectionList.length === 0) return ElMessage.warning('请选择需要删除的数据');
+
+  ElMessageBox.confirm('确认批量删除', '提示', {
+    type: 'warning',
+  }).then(async () => {
+    try {
+      details.loadingObj.pageLoading = true;
+
+      const res = await remove(details.selectionList.map(val => val.id).join(','));
+      const { code, msg } = res.data;
+      if (code !== 200) return;
+      ElMessage.success(msg);
+      onLoad();
+    } catch (error) {
+      console.log('error :>> ', error);
+    } finally {
+      details.loadingObj.pageLoading = false;
+    }
+  });
+};
+
+/** 调试 */
+const handleDebug = row => {
+  details.debugForm.code = row.ossCode;
+  details.debugForm.imgUrl = '';
+  details.popUpShow.debugVisted = true;
+};
+
+const handleAvatarSuccess = (response, uploadFile) => {
+  details.loadingObj.upload = false;
+  const { code, data } = response;
+  if (code !== 200) return;
+  details.debugForm.imgUrl = data.link;
+};
+
+const beforeAvatarUpload = rawFile => {
+  details.loadingObj.upload = true;
+  return true;
+};
+
+/** 启用 */
+const handleEnable = row => {
+  ElMessageBox.confirm('是否确定启用这条配置', '提示', {
+    type: 'warning',
+  }).then(async () => {
+    try {
+      details.loadingObj.pageLoading = true;
+
+      const res = await enable(row.id);
+      const { code, msg } = res.data;
+      if (code !== 200) return;
+      ElMessage.success(msg);
+      onLoad();
+    } catch (error) {
+      console.log('error :>> ', error);
+    } finally {
+      details.loadingObj.pageLoading = false;
+    }
+  });
 };
 </script>
 
-<style scoped lang='scss'>
-:deep(.el-form-item__label){
-  width:auto !important;
+<style scoped lang="scss">
+// 日期选择器
+:deep(.el-date-editor.el-input) {
+  height: 100% !important;
+  width: 100% !important;
 }
-:deep(.avue-form__row){
-  max-width:300px!important;
+
+:deep(.el-form-item__content) {
+  height: fit-content;
 }
-:deep(.no-print){
-  margin-left:auto;
-  .el-button{
-     margin-right:0
+.el_div_input {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  .el_dy_icon {
+    font-size: 1.5em;
   }
 }
 
+.el-dialog-add {
+  :deep(.el-form) {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  :deep(.el-form-item) {
+    width: 100%;
+  }
+
+  :deep(.el-input-number) {
+    width: 100% !important;
+
+    input {
+      text-align: left;
+    }
+  }
+}
 </style>