引入typescript包，字段分配页面对接接口

.vscode/settings.json

@@ -5,11 +5,7 @@
   "editor.formatOnPaste": true,
   "editor.formatOnType": true,
   // 配置eslint适用于vue代码
-  "eslint.validate": [
-    "javascript",
-    "typescript",
-    "vue"
-  ],
+  "eslint.validate": ["javascript", "typescript", "vue"],
   "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
@@ -27,7 +23,7 @@
   // 保存时自动启用 eslint --fix 自动修复
   "editor.codeActionsOnSave": {
     "source.fixAll": true,
-    "eslint.autoFixOnSave": true,
+    "eslint.autoFixOnSave": true
   },
   "eslint.options": {
     "overrideConfig": {
@@ -49,11 +45,7 @@
   },
   "i18n-ally.displayLanguage": "zh-cn",
   "i18n-ally.enabledParsers": ["json", "js"],
-  "i18n-ally.localesPaths": [
-    "src/i18n/lang",
-    "src/i18n/pages/login",
-    "src/i18n/pages/menu",
-  ],
+  "i18n-ally.localesPaths": ["src/i18n/lang", "src/i18n/pages/login", "src/i18n/pages/menu"],
   "i18n-ally.extract.parsers.html": {
     "attributes": ["text", "title", "alt", "placeholder", "label", "aria-label"],
     "ignoredTags": ["script", "style"],
@@ -61,4 +53,5 @@
     "inlineText": true
   },
   "i18n-ally.keystyle": "nested",
-}
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package.json

@@ -49,6 +49,7 @@
     "@vue/compiler-sfc": "^3.3.4",
     "sass": "1.45.0",
     "tailwindcss": "^3.3.3",
+    "typescript": "^5.2.2",
     "unplugin-auto-import": "0.5.3",
     "vite": "^4.3.9",
     "vite-plugin-compression": "^0.3.6",

src/api/system/field.ts

@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+
+const url = '/system/field/'
+export const getModelList = () => {
+  return request({
+    url: url + 'getModelList',
+    method: 'get'
+  })
+}
+
+export const getFields = (params) => {
+  return request({
+    url: url + 'getFields',
+    method: 'get',
+    params
+  })
+}
+
+export const initFields = () => {
+  return request({
+    url: url + 'initFields',
+    method: 'post'
+  })
+}

src/layout/components/Settings/index.vue

@@ -116,7 +116,7 @@ const showSettings = ref(false)
 const theme = ref(settingsStore.theme)
 const sideTheme = ref(settingsStore.sideTheme)
 const storeSettings = computed(() => settingsStore)
-const predefineColors = ref(['#409EFF', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'])
+const predefineColors = ref(['#409EFF', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#D59DFF', '#c71585'])
 const { setWatermark, removeWatermark } = getmark()
 // 可以手动更改当前值 model.value = 'cafe'
 const mode = useColorMode({

src/views/monitor/ipratelimit/index.vue

@@ -142,14 +142,14 @@
       <template #footer v-if="isEdit">
         <el-row style="margin-top: -40px">
           <el-col :span="18" style="border: 1px solid var(--el-color-primary); border-radius: 2px; padding: 10px">
-            <el-text style="text-align: left">
+            <el-text class="text-left">
               <div><b>终结点：</b>{HTTP_Verb}:{PATH}，您可以使用asterix符号来定位任何HTTP谓词</div>
               <div>例如：*、*:/api/values、*:/api/values、((post)|(put)):/api/values</div>
               <div><b>期间：</b>{INT}{PERIOD_TYPE}，您可以使用以下期间类型之一：s(秒), m(分), h(时), d(天)</div>
               <div><b>限制：</b>{LONG}，单位时间内的允许访问的次数</div>
             </el-text>
           </el-col>
-          <el-col :span="6" style="position: absolute; bottom: 2px; right: 4px">
+          <el-col :span="6" style="bottom: 2px" class="absolute right-1">
             <el-button @click="dialogVisible = false">{{ $t('btn.cancel') }}</el-button>
             <el-button type="primary" @click="handleConfirm">{{ $t('btn.submit') }}</el-button>
           </el-col>

src/views/system/rolefields/index.vue

@@ -11,12 +11,44 @@
         </template>
       </el-page-header>
       <el-divider />
+      <el-row :gutter="10">
+        <el-col :span="10">
+          <el-card>
+            <template #header>
+              <b>模型</b>
+            </template>
+            <el-table :data="modelList" height="580" border highlight-current-row @current-change="handleCurrentChange">
+              <el-table-column prop="fullName" label="模型" />
+            </el-table>
+          </el-card>
+        </el-col>
+        <el-col :span="14">
+          <el-card>
+            <template #header>
+              <div class="flex justify-between items-center">
+                <b>数据字段</b>
+                <el-button type="primary" plain>{{ $t('btn.save') }}</el-button>
+              </div>
+            </template>
+            <el-table :data="fieldList" height="580" border>
+              <el-table-column prop="fieldName" label="字段名称" />
+              <el-table-column prop="fieldType" label="字段类型" />
+              <el-table-column prop="" label="是否授权" align="center">
+                <template #default="scope">
+                  <el-switch v-model="value2" class="ml-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-card>
+        </el-col>
+      </el-row>
     </el-card>
   </div>
 </template>
 
 <script setup lang="ts">
 import useTagsViewStore from '@/store/modules/tagsView.js'
+import { getModelList, initFields, getFields } from '@/api/system/field'
 const router = useRouter()
 const route = useRoute()
 const cardLoading = ref(false)
@@ -25,7 +57,36 @@ const goBack = () => {
   router.push('/system/role')
 }
 console.log(route.query.roleId)
-const handleInit = () => {}
+const handleInit = async () => {
+  await initFields()
+}
+interface model {
+  fullName: string
+  properties: field[]
+}
+interface field {
+  fieldName: string
+  fieldType: string
+}
+const modelList = ref<model[]>([])
+const fieldList = ref<field[]>([])
+const getList = async () => {
+  cardLoading.value = true
+  const { data } = await getModelList()
+  modelList.value = data
+  cardLoading.value = false
+}
+const handleCurrentChange = async (val: any) => {
+  const { data } = await getFields({ fullName: val.fullName })
+  fieldList.value = data
+}
+const getProperties = (row) => {
+  console.log(row)
+}
+const value2 = ref(true)
+onMounted(() => {
+  getList()
+})
 </script>
 
-<style scoped></style>
+<style scoped lang="scss"></style>