Skip to content

C
center-resource
提交 646dce9a authored 作者: matian's avatar matian
浏览文件
操作

代码提交

上级 46aa4f5a
隐藏空白字符变更
内嵌 并排
正在显示 包含 1499 行增加 和 40 行删除
.eslintrc.cjs
浏览文件 @ 646dce9a
...@@ -3,7 +3,12 @@ require('@rushstack/eslint-patch/modern-module-resolution') ...@@ -3,7 +3,12 @@ require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = { module.exports = {
root: true, root: true,
extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-typescript/recommended', './.eslintrc-auto-import.json'], extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript/recommended',
'./.eslintrc-auto-import.json'
],
env: { env: {
'vue/setup-compiler-macros': true 'vue/setup-compiler-macros': true
}, },
......
package-lock.json
浏览文件 @ 646dce9a
...@@ -5,13 +5,13 @@ ...@@ -5,13 +5,13 @@
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "center-resource",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^1.1.4", "@element-plus/icons-vue": "^1.1.4",
"@tinymce/tinymce-vue": "^5.0.0", "@tinymce/tinymce-vue": "^5.0.0",
"axios": "^0.27.2", "axios": "^0.27.2",
"blueimp-md5": "^2.19.0", "blueimp-md5": "^2.19.0",
"drag-drop-tree-table": "^1.1.1",
"element-plus": "^2.2.2", "element-plus": "^2.2.2",
"pinia": "^2.0.14", "pinia": "^2.0.14",
"qs": "^6.10.3", "qs": "^6.10.3",
...@@ -23,14 +23,17 @@ ...@@ -23,14 +23,17 @@
"@types/blueimp-md5": "^2.18.0", "@types/blueimp-md5": "^2.18.0",
"@types/node": "^17.0.35", "@types/node": "^17.0.35",
"@types/qs": "^6.9.7", "@types/qs": "^6.9.7",
"@types/sortablejs": "^1.13.0",
"@vitejs/plugin-vue": "^2.3.3", "@vitejs/plugin-vue": "^2.3.3",
"@vue/eslint-config-typescript": "^10.0.0", "@vue/eslint-config-typescript": "^10.0.0",
"@vue/tsconfig": "^0.1.3", "@vue/tsconfig": "^0.1.3",
"ali-oss": "^6.17.1", "ali-oss": "^6.17.1",
"chalk": "^5.0.1", "chalk": "^5.0.1",
"drag-tree-table": "^2.2.0",
"eslint": "^8.16.0", "eslint": "^8.16.0",
"eslint-plugin-vue": "^8.7.1", "eslint-plugin-vue": "^8.7.1",
"sass": "^1.52.1", "sass": "^1.52.1",
"sortablejs": "^1.15.0",
"typescript": "~4.7.2", "typescript": "~4.7.2",
"unplugin-auto-import": "^0.8.5", "unplugin-auto-import": "^0.8.5",
"vite": "^2.9.9", "vite": "^2.9.9",
...@@ -354,6 +357,12 @@ ...@@ -354,6 +357,12 @@
"integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==", "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
"dev": true "dev": true
}, },
"node_modules/@types/sortablejs": {
"version": "1.13.0",
"resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.13.0.tgz",
"integrity": "sha512-C3064MH72iEfeGCYEGCt7FCxXoAXaMPG0QPnstcxvPmbl54erpISu06d++FY37Smja64iWy5L8wOyHHBghWbJQ==",
"dev": true
},
"node_modules/@typescript-eslint/eslint-plugin": { "node_modules/@typescript-eslint/eslint-plugin": {
"version": "5.26.0", "version": "5.26.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.26.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.26.0.tgz",
...@@ -1263,6 +1272,16 @@ ...@@ -1263,6 +1272,16 @@
"integrity": "sha1-JoD7uAaKSNCGVrYJgJK9r8kG9KU=", "integrity": "sha1-JoD7uAaKSNCGVrYJgJK9r8kG9KU=",
"dev": true "dev": true
}, },
"node_modules/core-js": {
"version": "3.22.8",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.22.8.tgz",
"integrity": "sha512-UoGQ/cfzGYIuiq6Z7vWL1HfkE9U9IZ4Ub+0XSiJTCzvbZzgPA69oDF2f+lgJ6dFFLEdjW5O6svvoKzXX23xFkA==",
"hasInstallScript": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/core-js"
}
},
"node_modules/core-util-is": { "node_modules/core-util-is": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
...@@ -1448,6 +1467,42 @@ ...@@ -1448,6 +1467,42 @@
"node": ">=6.0.0" "node": ">=6.0.0"
} }
}, },
"node_modules/drag-drop-tree-table": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/drag-drop-tree-table/-/drag-drop-tree-table-1.1.1.tgz",
"integrity": "sha512-DqrJu2IIhd8z3NR4v2Q0E5FFfLcZWSUPe9pcHC1yBM6ekoFfu9zXWZUtSsYHykkdaMkVOEyyKsGz+52sHq849Q==",
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
}
},
"node_modules/drag-drop-tree-table/node_modules/vue": {
"version": "2.6.14",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
},
"node_modules/drag-tree-table": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/drag-tree-table/-/drag-tree-table-2.2.0.tgz",
"integrity": "sha512-kFEJTgB77AdlUOyIDIWPK+RXy8Pf14RTMLDLlEVMyglTb31EyBnmn2CO0mA8Bv9waWuLLBBEgjYysjsy9dPTUg==",
"dev": true,
"dependencies": {
"vue": "^2.6.10",
"vue-router": "^3.1.3"
}
},
"node_modules/drag-tree-table/node_modules/vue": {
"version": "2.6.14",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==",
"dev": true
},
"node_modules/drag-tree-table/node_modules/vue-router": {
"version": "3.5.4",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.4.tgz",
"integrity": "sha512-x+/DLAJZv2mcQ7glH2oV9ze8uPwcI+H+GgTgTmb5I55bCgY3+vXWIsqbYUzbBSZnwFHEJku4eoaH/x98veyymQ==",
"dev": true
},
"node_modules/ee-first": { "node_modules/ee-first": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
...@@ -3881,6 +3936,12 @@ ...@@ -3881,6 +3936,12 @@
"node": ">= 6" "node": ">= 6"
} }
}, },
"node_modules/sortablejs": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz",
"integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w==",
"dev": true
},
"node_modules/source-map": { "node_modules/source-map": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
...@@ -4952,6 +5013,12 @@ ...@@ -4952,6 +5013,12 @@
"integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==", "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
"dev": true "dev": true
}, },
"@types/sortablejs": {
"version": "1.13.0",
"resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.13.0.tgz",
"integrity": "sha512-C3064MH72iEfeGCYEGCt7FCxXoAXaMPG0QPnstcxvPmbl54erpISu06d++FY37Smja64iWy5L8wOyHHBghWbJQ==",
"dev": true
},
"@typescript-eslint/eslint-plugin": { "@typescript-eslint/eslint-plugin": {
"version": "5.26.0", "version": "5.26.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.26.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.26.0.tgz",
...@@ -5603,6 +5670,11 @@ ...@@ -5603,6 +5670,11 @@
"integrity": "sha1-JoD7uAaKSNCGVrYJgJK9r8kG9KU=", "integrity": "sha1-JoD7uAaKSNCGVrYJgJK9r8kG9KU=",
"dev": true "dev": true
}, },
"core-js": {
"version": "3.22.8",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.22.8.tgz",
"integrity": "sha512-UoGQ/cfzGYIuiq6Z7vWL1HfkE9U9IZ4Ub+0XSiJTCzvbZzgPA69oDF2f+lgJ6dFFLEdjW5O6svvoKzXX23xFkA=="
},
"core-util-is": { "core-util-is": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
...@@ -5739,6 +5811,46 @@ ...@@ -5739,6 +5811,46 @@
"esutils": "^2.0.2" "esutils": "^2.0.2"
} }
}, },
"drag-drop-tree-table": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/drag-drop-tree-table/-/drag-drop-tree-table-1.1.1.tgz",
"integrity": "sha512-DqrJu2IIhd8z3NR4v2Q0E5FFfLcZWSUPe9pcHC1yBM6ekoFfu9zXWZUtSsYHykkdaMkVOEyyKsGz+52sHq849Q==",
"requires": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"dependencies": {
"vue": {
"version": "2.6.14",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
}
}
},
"drag-tree-table": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/drag-tree-table/-/drag-tree-table-2.2.0.tgz",
"integrity": "sha512-kFEJTgB77AdlUOyIDIWPK+RXy8Pf14RTMLDLlEVMyglTb31EyBnmn2CO0mA8Bv9waWuLLBBEgjYysjsy9dPTUg==",
"dev": true,
"requires": {
"vue": "^2.6.10",
"vue-router": "^3.1.3"
},
"dependencies": {
"vue": {
"version": "2.6.14",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==",
"dev": true
},
"vue-router": {
"version": "3.5.4",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.4.tgz",
"integrity": "sha512-x+/DLAJZv2mcQ7glH2oV9ze8uPwcI+H+GgTgTmb5I55bCgY3+vXWIsqbYUzbBSZnwFHEJku4eoaH/x98veyymQ==",
"dev": true
}
}
},
"ee-first": { "ee-first": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
...@@ -7492,6 +7604,12 @@ ...@@ -7492,6 +7604,12 @@
"socks": "^2.3.3" "socks": "^2.3.3"
} }
}, },
"sortablejs": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz",
"integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w==",
"dev": true
},
"source-map": { "source-map": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
......
package.json
浏览文件 @ 646dce9a
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
"@tinymce/tinymce-vue": "^5.0.0", "@tinymce/tinymce-vue": "^5.0.0",
"axios": "^0.27.2", "axios": "^0.27.2",
"blueimp-md5": "^2.19.0", "blueimp-md5": "^2.19.0",
"drag-drop-tree-table": "^1.1.1",
"element-plus": "^2.2.2", "element-plus": "^2.2.2",
"pinia": "^2.0.14", "pinia": "^2.0.14",
"qs": "^6.10.3", "qs": "^6.10.3",
...@@ -27,14 +28,17 @@ ...@@ -27,14 +28,17 @@
"@types/blueimp-md5": "^2.18.0", "@types/blueimp-md5": "^2.18.0",
"@types/node": "^17.0.35", "@types/node": "^17.0.35",
"@types/qs": "^6.9.7", "@types/qs": "^6.9.7",
"@types/sortablejs": "^1.13.0",
"@vitejs/plugin-vue": "^2.3.3", "@vitejs/plugin-vue": "^2.3.3",
"@vue/eslint-config-typescript": "^10.0.0", "@vue/eslint-config-typescript": "^10.0.0",
"@vue/tsconfig": "^0.1.3", "@vue/tsconfig": "^0.1.3",
"ali-oss": "^6.17.1", "ali-oss": "^6.17.1",
"chalk": "^5.0.1", "chalk": "^5.0.1",
"drag-tree-table": "^2.2.0",
"eslint": "^8.16.0", "eslint": "^8.16.0",
"eslint-plugin-vue": "^8.7.1", "eslint-plugin-vue": "^8.7.1",
"sass": "^1.52.1", "sass": "^1.52.1",
"sortablejs": "^1.15.0",
"typescript": "~4.7.2", "typescript": "~4.7.2",
"unplugin-auto-import": "^0.8.5", "unplugin-auto-import": "^0.8.5",
"vite": "^2.9.9", "vite": "^2.9.9",
......
src/main.ts
浏览文件 @ 646dce9a
...@@ -14,7 +14,6 @@ import AppList from '@/components/base/AppList.vue' ...@@ -14,7 +14,6 @@ import AppList from '@/components/base/AppList.vue'
import AppUpload from '@/components/base/AppUpload.vue' import AppUpload from '@/components/base/AppUpload.vue'
import modules from './modules' import modules from './modules'
const app = createApp(App) const app = createApp(App)
// 注册公共组件 // 注册公共组件
app.component('AppCard', AppCard).component('AppList', AppList).component('AppUpload', AppUpload) app.component('AppCard', AppCard).component('AppList', AppList).component('AppUpload', AppUpload)
......
src/modules/admin/audit/views/List.vue
浏览文件 @ 646dce9a
<script setup lang="ts"></script> <script setup lang="ts">
const form = reactive({
resource: '0',
auditor: ''
})
const options = [
{
user_name: '章三',
user_id: '0'
},
{
user_name: '里斯',
user_id: '1'
}
]
const handleSave = () => {
console.log(form)
console.log('000')
}
</script>
<template> <template>
<AppCard title="资源审核管理"></AppCard> <AppCard title="资源审核管理">
<el-form class="filter-form" :model="form">
<el-form-item label="是否需要资源审核:">
<el-radio-group v-model="form.resource">
<el-radio label="0">需要审核</el-radio>
<el-radio label="1">不需要审核</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="资源审核员:">
<el-select v-model="form.auditor" placeholder="请选择资料审核员">
<el-option
v-for="(item, index) in options"
:key="index"
:label="item.user_name"
:value="item.user_id"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSave">保存</el-button>
</el-form-item>
</el-form>
</AppCard>
</template> </template>
src/modules/admin/category/component/AddDialog.vue 0 → 100644
浏览文件 @ 646dce9a
<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import type { FormRules } from 'element-plus'
import TreeDialog from './TreeDialog.vue'
const isTreeVisible = ref(false)
const formRef = ref()
const categoryForm = reactive({
category: '',
hierarchy: 1,
name: '',
status: '0',
isCourse: '1'
})
const rules = reactive<FormRules>({
name: [
{ required: true, message: '请输入类别名称', trigger: 'blur' },
{ message: '请输入类别名称', trigger: 'blur' }
]
})
const props = defineProps({
dialogVisible: {
type: Boolean,
required: true
},
editData: {
type: Object,
required: true
},
isEdit: {
type: Boolean,
required: true
}
})
const emit = defineEmits<{
(e: 'update:dialogVisible', dialogVisible: false): void
}>()
// 打开类别选择弹框
const handleOpenTree = () => {
isTreeVisible.value = true
}
// 获取子组件确定之后节点回显
const getCheckedLabel = (val: any) => {
console.log(val, '99991111')
categoryForm.category = val.checkedLabel.value
categoryForm.hierarchy = val.checkedLevel.value + 1
}
// 关闭弹框
const handleCancel = () => {
emit('update:dialogVisible', false)
console.log(formRef.value, 'formRef.value')
formRef.value.resetFields()
}
// 确认提交表单
const handleConfirm = () => {
console.log(categoryForm, '0000')
emit('update:dialogVisible', false)
}
onMounted(() => {
categoryForm.category = props.editData.name
categoryForm.hierarchy = props.editData.hierarchy + 1
if (props.isEdit) {
categoryForm.hierarchy = props.editData.hierarchy
categoryForm.name = props.editData.name
categoryForm.status = props.editData.status
categoryForm.isCourse = props.editData.isCourse
}
})
</script>
<template>
<el-dialog :model-value="dialogVisible" draggable :before-close="handleCancel" title="新增类别" width="60%">
<el-form :model="categoryForm" label-position="right" label-width="auto" :rules="rules" ref="formRef">
<el-form-item label="上级类别:" prop="category">
<div @click="handleOpenTree" style="width: 100%">
<el-input v-model="categoryForm.category" disabled>
<template #append>
<el-button :icon="Search" />
</template>
</el-input>
</div>
</el-form-item>
<el-form-item label="类别层级:" prop="hierarchy">
<el-input v-model="categoryForm.hierarchy" disabled></el-input>
</el-form-item>
<el-form-item label="类别名称:" prop="name">
<el-input v-model="categoryForm.name"></el-input>
</el-form-item>
<el-form-item label="状态:" prop="status">
<el-radio-group v-model="categoryForm.status">
<el-radio label="0">正常</el-radio>
<el-radio label="1">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="互动课:" prop="isCourse">
<el-radio-group v-model="categoryForm.isCourse">
<el-radio label="0">是</el-radio>
<el-radio label="1">否</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<span>
<el-button @click="handleCancel">取消</el-button>
<el-button type="primary" @click="handleConfirm">确认</el-button>
</span>
</template>
</el-dialog>
<TreeDialog v-model:isTreeVisible="isTreeVisible" @getCheckedLabel="getCheckedLabel" />
</template>
src/modules/admin/category/component/TreeDialog.vue 0 → 100644
浏览文件 @ 646dce9a
<script lang="ts" setup>
import type { ElTree } from 'element-plus'
defineProps({
isTreeVisible: {
type: Boolean,
required: true
}
})
const emit = defineEmits<{
(e: 'update:isTreeVisible', isTreeVisible: false): void
(e: 'getCheckedLabel', checkedLabel: any): void
}>()
const handleCancel = () => {
emit('update:isTreeVisible', false)
}
interface Tree {
id: number
label: string
level: number
children?: Tree[]
}
const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
const defaultProps = {
children: 'children',
label: 'label'
}
const checkedLabel = ref('') // 默认选中项名称
const checkedLevel = ref('') // 默认选中项层级
watch(filterText, val => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
treeRef.value!.filter(val)
})
const filterNode = (value: string, data: Tree) => {
if (!value) return true
return data.label.includes(value)
}
// 获取选中节点
const handleNodeClick = (TreeNode: any, node: any, attr: any) => {
console.log(TreeNode, node, attr, '999')
checkedLabel.value = TreeNode.label
checkedLevel.value = TreeNode.level
}
// 确认
const handleConfirm = () => {
checkedLabel.value && emit('getCheckedLabel', { checkedLabel, checkedLevel })
emit('update:isTreeVisible', false)
}
const defaultLabel = 'Level one 1'
const data: Tree[] = [
{
id: 1,
label: 'Level one 1',
level: 1,
children: [
{
id: 4,
label: 'Level two 1-1',
level: 2,
children: [
{
id: 9,
label: 'Level three 1-1-1',
level: 3
},
{
id: 10,
label: 'Level three 1-1-2',
level: 3
}
]
}
]
},
{
id: 2,
label: 'Level one 2',
level: 1,
children: [
{
id: 5,
label: 'Level two 2-1',
level: 2
},
{
id: 6,
label: 'Level two 2-2',
level: 2
}
]
},
{
id: 3,
label: 'Level one 3',
level: 1,
children: [
{
id: 7,
label: 'Level two 3-1',
level: 2
},
{
id: 8,
label: 'Level two 3-2',
level: 2
}
]
}
]
</script>
<template>
<el-dialog :model-value="isTreeVisible" draggable :before-close="handleCancel" title="类别选择" width="40%">
<el-input v-model="filterText" placeholder="请选择类别" />
<el-tree
ref="treeRef"
class="filter-tree"
:data="data"
:props="defaultProps"
default-expand-all
:expand-on-click-node="false"
:highlight-current="true"
:current-node-key="defaultLabel"
:filter-node-method="filterNode"
@node-click="handleNodeClick"
/>
<template #footer>
<span>
<el-button @click="handleCancel">取消</el-button>
<el-button type="primary" @click="handleConfirm">确认</el-button>
</span>
</template>
</el-dialog>
</template>
src/modules/admin/category/views/List.vue
浏览文件 @ 646dce9a
<script setup lang="ts"></script> <script setup lang="ts">
import Sortable from 'sortablejs'
import AddDialog from '../component/AddDialog.vue'
import { Operation } from '@element-plus/icons-vue'
const statusMap = { 0: '正常', 1: '停用' }
const form = reactive({
name: ''
})
const search = () => {
// 调接口
console.log('000')
}
const reset = () => {
console.log('111')
}
interface User {
id: number
name: string
hierarchy: number
sort: number
status: string
create_time: string
isCourse: string
hasChildren?: boolean
children?: User[]
}
const tableData: User[] = [
{
id: 1,
name: '紫荆教育',
hierarchy: 1,
sort: 1,
status: '0',
create_time: '2022_11_22',
isCourse: '0',
children: [
{
id: 2,
name: '北京',
hierarchy: 2,
sort: 1,
status: '1',
create_time: '2022_11_22',
isCourse: '0',
children: [
{
id: 3,
name: '朝阳',
hierarchy: 3,
sort: 1,
status: '1',
create_time: '2022_11_22',
isCourse: '0'
},
{
id: 4,
name: '海淀',
hierarchy: 3,
sort: 2,
status: '1',
create_time: '2022_11_22',
isCourse: '1'
}
]
},
{
id: 5,
name: '河南',
hierarchy: 2,
sort: 2,
status: '1',
create_time: '2022_11_22',
isCourse: '1',
children: [
{
id: 6,
name: '信阳',
hierarchy: 3,
sort: 1,
status: '1',
create_time: '2022_11_22',
isCourse: '0'
},
{
id: 7,
name: '南阳',
hierarchy: 3,
sort: 2,
status: '1',
create_time: '2022_11_22',
isCourse: '1'
}
]
}
]
}
]
const editData = ref({})
const isEdit = ref(false)
const handleEdit = (index: number, row: User) => {
isEdit.value = true
dialogVisible.value = true
editData.value = row
console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
console.log(index, row)
}
const dialogVisible = ref(false)
const handleAdd = (index: number, row: User) => {
isEdit.value = false
dialogVisible.value = true
console.log(index, row)
if (row) {
editData.value = row
} else {
editData.value = tableData[0]
}
}
const confirm = () => {
console.log('0001111')
}
const sortable = (className: any, targetName: any) => {
const table = document.querySelector('.' + className + ' .el-table__body-wrapper tbody') as HTMLElement
console.log(table)
Sortable.create(table, {
handle: '.handle',
// 拖拽完毕后触发
onEnd(data) {
const newIndex = data.newIndex as number
const oldIndex = data.oldIndex as number
console.log(data, 'data')
if (newIndex === oldIndex) return
// targetName.splice(newIndex, 0, targetName.splice(oldIndex, 1))
console.log(targetName, 'pppp')
}
})
}
onMounted(() => {
sortable('t1', tableData) // 参数分别为table的class名称，table的数据data
})
</script>
<template> <template>
<AppCard title="类别管理"></AppCard> <AppCard title="类别管理">
<div class="table-list-filter">
<el-form class="filter-form" :model="form">
<el-form-item label="类别名称:" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search" class="btn_query">搜索</el-button>
<el-button @click="reset">重置</el-button>
</el-form-item>
</el-form>
</div>
<el-button type="primary" @click="handleAdd">新增类别</el-button>
<el-table
class="t1"
:data="tableData"
style="width: 100%"
row-key="id"
ref="dragTable"
:tree-props="{ children: 'children', hasChildren: 'hasChildren', draggable: true }"
highlight-current-row
>
<el-table-column type="index" align="center" class-name="handle">
<el-icon><Operation /></el-icon>
</el-table-column>
<el-table-column prop="name" label="类别名称" align="center" class-name="handle" />
<el-table-column prop="hierarchy" label="层级" align="center" />
<el-table-column prop="status" label="状态" align="center">
<template #default="scope"> {{ statusMap[scope.row.status] }}</template>
</el-table-column>
<el-table-column prop="create_time" label="创建时间" align="center" />
<el-table-column align="center" label="操作" width="300px">
<template #default="scope">
<el-button type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button @click="handleAdd(scope.$index, scope.row)">新增</el-button>
<el-button @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</AppCard>
<template v-if="dialogVisible === true">
<AddDialog v-model:dialogVisible="dialogVisible" @confirm="confirm" :editData="editData" :isEdit="isEdit" />
</template>
</template> </template>
<style lang="scss" scoped>
.table-list-filter {
.filter-form {
display: flex;
justify-content: flex-start;
align-items: center;
.btn_query {
margin-left: 30px;
}
}
}
// 拖拽
.dragClass {
background: rgba($color: #41c21a, $alpha: 0.5) !important;
}
// 停靠
.ghostClass {
background: rgba($color: #6cacf5, $alpha: 0.5) !important;
}
// 选择
.chosenClass:hover > td {
background: rgba($color: #f56c6c, $alpha: 0.5) !important;
}
</style>
src/modules/admin/teacher/index.ts
浏览文件 @ 646dce9a
...@@ -5,6 +5,10 @@ export const routes: Array<RouteRecordRaw> = [ ...@@ -5,6 +5,10 @@ export const routes: Array<RouteRecordRaw> = [
{ {
path: '/admin/teacher', path: '/admin/teacher',
component: AppLayout, component: AppLayout,
children: [{ path: '', component: () => import('./views/List.vue') }] children: [
{ path: '', component: () => import('./views/List.vue') },
{ path: '/admin/teacher/detail', component: () => import('./views/Detail.vue') },
{ path: '/admin/teacher/add', name: 'update', component: () => import('./views/Add.vue') }
]
} }
] ]
src/modules/admin/teacher/views/Add.vue 0 → 100644
浏览文件 @ 646dce9a
<script setup lang="ts">
import VEditor from '@tinymce/tinymce-vue'
import AppUpload from '@/components/base/AppUpload.vue'
import { useRouter } from 'vue-router'
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
const router = useRouter()
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
let ruleForm = reactive({
id: '',
name: '',
position: '',
education: '',
mechanism: '',
desc: '',
imageUrl: ''
})
const rules = reactive<FormRules>({
name: [
{
required: true,
message: '请输入讲师姓名',
trigger: 'blur'
}
],
position: [
{
required: true,
message: '请输入讲师职位',
trigger: 'blur'
}
]
})
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
console.log('submit!')
router.push('/admin/teacher')
} else {
router.push('/admin/teacher')
console.log('error submit!', fields)
}
})
}
</script>
<template>
<AppCard title="添加讲师">
<el-form
ref="ruleFormRef"
:model="ruleForm"
:rules="rules"
label-width="120px"
class="demo-ruleForm"
:size="formSize"
>
<el-row>
<el-col :span="10">
<el-form-item label="讲师姓名:" prop="name">
<el-input v-model="ruleForm.name" />
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="讲师职位:" prop="position">
<el-input v-model="ruleForm.position" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="讲师学历:" prop="education">
<el-input v-model="ruleForm.education" />
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="讲师任职机构:" prop="mechanism">
<el-input v-model="ruleForm.mechanism" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="讲师头像:" prop="imageUrl">
<AppUpload v-model="ruleForm.imageUrl" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="讲师简介:" prop="desc">
<v-editor v-model="ruleForm.desc" class="editor" style="width: 1000px"></v-editor>
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
</el-form-item>
</el-form>
</AppCard>
</template>
src/modules/admin/teacher/views/Detail.vue 0 → 100644
浏览文件 @ 646dce9a
<script setup lang="ts">
import VEditor from '@tinymce/tinymce-vue'
import type { FormRules } from 'element-plus'
const route = useRoute()
const title = route.query.title as string
const formSize = ref('default')
const ruleForm = reactive({
name: '',
position: '',
education: '',
mechanism: '',
introduce: '',
picture: '',
desc: ''
})
const url = JSON.parse(route.query.form + '').imageUrl as string
const appList = ref()
const rules = reactive<FormRules>({
name: [
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
],
position: [
{
required: true,
message: 'Please select Activity zone',
trigger: 'change'
}
],
date1: [
{
type: 'date',
required: true,
message: 'Please pick a date',
trigger: 'change'
}
],
date2: [
{
type: 'date',
required: true,
message: 'Please pick a time',
trigger: 'change'
}
],
type: [
{
type: 'array',
required: true,
message: 'Please select at least one activity type',
trigger: 'change'
}
],
resource: [
{
required: true,
message: 'Please select activity resource',
trigger: 'change'
}
]
})
const listOptions = {
remote: {
// httpRequest: getVideoList,
params: { type: '' }
},
columns: [
{ label: '#', type: 'index', align: 'center' },
{ label: '课程图片', slots: 'table-cover', align: 'center' },
{ label: '课程名称', prop: 'id', align: 'center' },
{ label: '分类名称', prop: 'course_name', align: 'center' },
{ label: '线上类型', prop: 'type_name', align: 'center' },
{ label: '选课类型', prop: 'pv', align: 'center' },
{ label: '课程学分', prop: 'pv', align: 'center' },
{ label: '是否可用', prop: 'pv', align: 'center' },
{ label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '编辑', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-operate', width: 300, align: 'center' }
],
data: [
{ id: 1, title: '视频标题', type: '视频分类' },
{ id: 2, title: '视频标题', type: '视频分类' }
]
}
const handleDelete = (row: any) => {
console.log('删除', row)
}
const getUpdateForm = () => {
const editForm = JSON.parse(route.query.form + '')
Object.keys(ruleForm).forEach(key => {
ruleForm[key] = editForm[key]
})
}
onMounted(() => {
// 更新获取讲师信息
getUpdateForm()
})
</script>
<template>
<AppCard :title="title">
<el-form :model="ruleForm" :size="formSize" :rules="rules" label-position="right" label-width="100px">
<el-row>
<el-col :span="4">
<el-form-item label="讲师图片:" prop="picture">
<el-image style="width: 300px" :src="url" />
</el-form-item>
</el-col>
<el-col :span="8" style="margin-left: 80px">
<el-form-item label="讲师姓名:" prop="name">
<el-input v-model="ruleForm.name" />
</el-form-item>
<el-form-item label="讲师职位:" prop="position">
<el-input v-model="ruleForm.position" />
</el-form-item>
<el-form-item label="讲师学历:" prop="education">
<el-input v-model="ruleForm.education" />
</el-form-item>
<el-form-item label="讲师任职机构:" prop="mechanism">
<el-input v-model="ruleForm.mechanism" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="讲师简介:" prop="introduce">
<v-editor v-model="ruleForm.introduce" style="width: 70%"></v-editor>
</el-form-item>
</el-form>
<el-card>
<div class="form_title">讲授课程：</div>
<AppList v-bind="listOptions" ref="appList">
<template #header-aside> </template>
<template #table-operate="{ row }">
<el-space>
<router-link to="/admin/teacher/detail">
<el-button type="primary" plain>查看</el-button>
</router-link>
<router-link to="/admin/teacher/update">
<el-button type="primary" plain>更新</el-button>
</router-link>
<el-button type="primary" plain @click="handleDelete(row)">删除</el-button>
</el-space>
</template>
</AppList>
</el-card>
</AppCard>
</template>
<style lang="scss" scoped>
.form_title {
font-size: 14px;
color: #606266;
}
</style>
src/modules/admin/teacher/views/List.vue
浏览文件 @ 646dce9a
<script setup lang="ts"></script> <script setup lang="ts">
// import { getVideoList } from '../api'
const router = useRouter()
const appList = ref()
const listOptions = {
remote: {
// httpRequest: getVideoList,
params: { type: '' }
},
filters: [
{ type: 'input', prop: 'type', label: '讲师姓名:' },
{ type: 'input', prop: 'project_id', label: '讲师任职机构:' },
{ type: 'input', prop: 'category_id', label: '讲师职位:' },
{ type: 'input', prop: 'category_id', label: '讲师学历:' }
],
columns: [
{ label: '#', type: 'index', align: 'center' },
{ label: '讲师头像', slots: 'table-img', align: 'center' },
{ label: '讲师姓名', prop: 'name', align: 'center' },
{ label: '讲师任职机构', prop: 'mechanism', align: 'center' },
{ label: '讲师职位', prop: 'position', align: 'center' },
{ label: '讲师学历', prop: 'education', align: 'center' },
{ label: '编辑', prop: 'edit', align: 'center' },
{ label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-operate', width: 230, align: 'center' }
],
data: [
{
id: 1,
imageUrl: 'https://img0.baidu.com/it/u=1872881124,390027250&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333',
name: '章三',
mechanism: '紫荆',
position: '讲师',
education: '本科',
edit: '123',
created_time: '2022-05-30'
}
]
}
const handleDelete = (row: any) => {
console.log('删除', row)
}
const handleUpdate = (row: any) => {
console.log(row)
router.push({
path: '/admin/teacher/detail',
query: {
form: JSON.stringify(row),
title: '更新讲师'
}
})
}
</script>
<template> <template>
<AppCard title="讲师管理"></AppCard> <AppCard title="讲师管理">
<AppList v-bind="listOptions" ref="appList">
<router-link to="/admin/teacher/add">
<el-button type="primary" round>添加讲师</el-button>
</router-link>
<template #header-aside> </template>
<template #table-img="{ row }"> <img :src="row.imageUrl" alt="" style="width: 100%" /></template>
<template #table-operate="{ row }">
<el-space>
<router-link :to="{ path: '/admin/teacher/detail', query: { title: '讲师详情', form: JSON.stringify(row) } }">
<el-button type="primary" plain>查看</el-button>
</router-link>
<el-button type="primary" plain @click="handleUpdate(row)">更新</el-button>
<el-button type="primary" plain @click="handleDelete(row)">删除</el-button>
</el-space>
</template>
</AppList>
</AppCard>
</template> </template>
src/modules/system/cover/component/AddDialog.vue 0 → 100644
浏览文件 @ 646dce9a
<script lang="ts" setup>
import AppUpload from '@/components/base/AppUpload.vue'
const form = reactive({
status: '0',
imageUrl: '',
type: '0'
})
const rules = {
status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
imageUrl: [{ required: true, message: '请上传图片', trigger: 'change' }],
type: [{ required: true, message: '请选择封面类型', trigger: 'blur' }]
}
const props = defineProps({
isShowDialog: {
type: Boolean,
required: true
},
editData: {
type: Object,
required: true
},
isEdit: {
type: Boolean,
required: true
}
})
interface Emits {
(e: 'update:isShowDialog', isShowDialog: boolean): void
(e: 'confirm'): void
}
const emit = defineEmits<Emits>()
// 普通属性
const handleCancel = () => {
emit('update:isShowDialog', false)
}
// 确定
const handleConfirm = () => {
emit('update:isShowDialog', false)
emit('confirm')
}
onMounted(() => {
if (props.isEdit) {
form.status = props.editData.status
form.imageUrl = props.editData.cover_img
form.type = props.editData.type
}
})
</script>
<template>
<el-dialog :model-value="isShowDialog" draggable :before-close="handleCancel" width="30%">
<el-form :model="form" :rules="rules">
<el-form-item label="封面类型:" prop="type">
<el-select v-model="form.type">
<el-option label="课程" value="0"></el-option>
<el-option label="视频" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="图片地址:" prop="imageUrl">
<AppUpload v-model="form.imageUrl" />
</el-form-item>
<el-form-item label="状态:" prop="status">
<el-radio-group v-model="form.status">
<el-radio label="0">成功</el-radio>
<el-radio label="1">失败</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<span>
<el-button type="primary" @click="handleConfirm">确定</el-button>
<el-button @click="handleCancel">关闭</el-button>
</span>
</template>
</el-dialog>
</template>
src/modules/system/cover/views/List.vue
浏览文件 @ 646dce9a
<script setup lang="ts"></script> <script setup lang="ts">
import AddDialog from '../component/AddDialog.vue'
const appList = ref()
const isShowDialog = ref(false)
const isEdit = ref(false)
const editData = ref({})
const listOptions = {
remote: {
// httpRequest: getVideoList,
params: { type: '' }
},
columns: [
{ label: '封面地址', prop: 'cover_url', align: 'center' },
{ label: '封面预览', prop: 'cover_img', slots: 'table-cover', align: 'center' },
{ label: '封面类型', prop: 'type', align: 'center' },
{
label: '状态',
prop: 'status',
align: 'center',
computed(row: any) {
console.log(row)
if (row.row.status === '0') {
return '正常'
} else if (row.row.status === '1') {
return '停用'
} else {
return '-'
}
}
},
{ label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-operate', width: 230, align: 'center' }
],
data: [
{
id: 1,
cover_url: 'https://img0.baidu.com/it/u=1106810636,3829865668&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=505',
cover_img: 'https://img0.baidu.com/it/u=1106810636,3829865668&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=505',
type: '视频',
status: '0',
created_time: '2022-06-01'
}
]
}
// 删除
const handleDelete = (row: any) => {
console.log('删除', row)
}
// 确定
const handleConfirm = () => {
console.log('123')
}
// 添加
const handleAdd = () => {
isShowDialog.value = true
isEdit.value = false
}
// 编辑
const handleEdit = (row: any) => {
isShowDialog.value = true
editData.value = row
isEdit.value = true
}
</script>
<template> <template>
<AppCard title="封面管理"></AppCard> <AppCard title="封面管理">
<el-button type="primary" round @click="handleAdd">添加</el-button>
<AppList v-bind="listOptions" ref="appList">
<template #header-aside> </template>
<template #table-cover="{ row }">
<img :src="row.cover_img" alt="" style="width: 100px" />
</template>
<template #table-operate="{ row }">
<el-space>
<el-button type="primary" plain @click="handleEdit(row)">编辑</el-button>
<el-button type="primary" plain @click="handleDelete(row)">删除</el-button>
</el-space>
</template>
<template v-if="isShowDialog === true">
<AddDialog v-model:isShowDialog="isShowDialog" @confirm="handleConfirm" :editData="editData" :isEdit="isEdit" />
</template>
</AppList>
</AppCard>
</template> </template>
src/modules/system/dictionary/component/AddDialog.vue 0 → 100644
浏览文件 @ 646dce9a
<script lang="ts" setup>
const form = reactive({
name: '',
type: '',
status: '0',
remark: ''
})
const rules = {
name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
type: [{ required: true, message: '请输入字典类型', trigger: 'blur' }]
}
const props = defineProps({
isShowDialog: {
type: Boolean,
required: true
},
isEdit: {
type: Boolean,
required: true
},
rowInfo: {
type: Object,
required: true
}
})
interface Emits {
(e: 'update:isShowDialog', isShowDialog: boolean): void
(e: 'confirm'): void
}
const emit = defineEmits<Emits>()
// 普通属性
const handleCancel = () => {
emit('update:isShowDialog', false)
}
// 确定
const handleConfirm = () => {
emit('update:isShowDialog', false)
emit('confirm')
}
onMounted(() => {
console.log(props.rowInfo, 'props.rowInfo')
if (props.isEdit) {
form.name = props.rowInfo.name
form.type = props.rowInfo.type
if (props.rowInfo.status === '正常') {
form.status = '0'
} else {
form.status = '1'
}
form.remark = props.rowInfo.remark
}
})
</script>
<template>
<el-dialog
:model-value="isShowDialog"
draggable
:before-close="handleCancel"
:title="isEdit === true ? '编辑字典' : '新增字典'"
>
<el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
<el-form-item label="字典名称:" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="字典类型:" prop="type">
<el-input v-model="form.type"></el-input>
</el-form-item>
<el-form-item label="状态:" prop="status">
<el-radio-group v-model="form.status">
<el-radio label="0">正常</el-radio>
<el-radio label="1">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注:" prop="remark">
<el-input v-model="form.remark" autosize type="textarea" />
</el-form-item>
</el-form>
<template #footer>
<span>
<el-button type="primary" @click="handleConfirm">确定</el-button>
<el-button @click="handleCancel">关闭</el-button>
</span>
</template>
</el-dialog>
</template>
src/modules/system/dictionary/component/ListAddDialog.vue 0 → 100644
浏览文件 @ 646dce9a
<script lang="ts" setup>
const form = reactive({
tag: '',
key: '',
type: '',
status: '0',
remark: ''
})
const rules = {
tag: [{ required: true, message: '请输入字典标签', trigger: 'blur' }],
key: [{ required: true, message: '请输入字典键值', trigger: 'blur' }],
sort: [{ required: true, message: '请输入字典键值', trigger: 'blur' }]
}
const props = defineProps({
isListAddDialog: {
type: Boolean,
required: true
},
isEdit: {
type: Boolean,
required: true
},
editData: {
type: Object,
required: true
}
})
interface Emits {
(e: 'update:isListAddDialog', isListAddDialog: boolean): void
(e: 'confirm'): void
}
const emit = defineEmits<Emits>()
// 普通属性
const handleCancel = () => {
emit('update:isListAddDialog', false)
}
// 确定
const handleConfirm = () => {
emit('update:isListAddDialog', false)
emit('confirm')
}
onMounted(() => {
console.log('props.editData.status', props.editData.status)
if (props.isEdit) {
form.tag = props.editData.tag
form.key = props.editData.key
form.type = props.editData.type
form.remark = props.editData.remark
form.status = props.editData.status
}
})
</script>
<template>
<el-dialog :model-value="isListAddDialog" draggable :before-close="handleCancel">
<el-form :model="form" :rules="rules" label-width="120px">
<el-form-item label="字典标签:" prop="tag">
<el-input v-model="form.tag"></el-input>
</el-form-item>
<el-form-item label="字典键值:" prop="key">
<el-input v-model="form.key"></el-input>
</el-form-item>
<el-form-item label="字典类型:" prop="type">
<el-input v-model="form.type"></el-input>
</el-form-item>
<el-form-item label="状态:" prop="status">
<el-radio-group v-model="form.status">
<el-radio label="0">正常</el-radio>
<el-radio label="1">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注:" prop="remark">
<el-input v-model="form.remark" autosize type="textarea" />
</el-form-item>
</el-form>
<template #footer>
<span>
<el-button type="primary" @click="handleConfirm">确定</el-button>
<el-button @click="handleCancel">关闭</el-button>
</span>
</template>
</el-dialog>
</template>
src/modules/system/dictionary/index.ts
浏览文件 @ 646dce9a
...@@ -5,6 +5,9 @@ export const routes: Array<RouteRecordRaw> = [ ...@@ -5,6 +5,9 @@ export const routes: Array<RouteRecordRaw> = [
{ {
path: '/system/dictionary', path: '/system/dictionary',
component: AppLayout, component: AppLayout,
children: [{ path: '', component: () => import('./views/List.vue') }] children: [
{ path: '', component: () => import('./views/List.vue') },
{ path: '/system/dictionary/rowList', component: () => import('./views/rowList.vue') }
]
} }
] ]
src/modules/system/dictionary/views/List.vue
浏览文件 @ 646dce9a
<script setup lang="ts"> <script setup lang="ts">
import { getVideoList } from '../api' import AddDialog from '../component/AddDialog.vue'
const router = useRouter()
const appList = ref() const appList = ref()
const isShowDialog = ref(false) // 新增字典弹框状态
const isEdit = ref(false) //是否可编辑
const rowInfo = ref({})
//表单每行数据
const listOptions = { const listOptions = {
remote: { remote: {
httpRequest: getVideoList, // httpRequest: getVideoList,
params: { type: '' } params: { type: '', created_time: '' }
}, },
filters: [ filters: [
{ type: 'select', prop: 'type', label: '状态' }, { type: 'input', prop: 'name', label: '字典名称:' },
{ type: 'select', prop: 'project_id', label: '项目' }, { type: 'input', prop: 'type', label: '字典类型:' },
{ type: 'select', prop: 'category_id', label: '类别' } {
type: 'select',
prop: 'status',
label: '字典状态:',
options: [
{ label: '正常', value: '0' },
{ label: '停用', value: '1' }
]
},
{ type: 'input', prop: 'created_time', slots: 'created_time', label: '创建时间:' }
], ],
columns: [ columns: [
{ label: '封面', slots: 'table-cover', width: 224 }, { label: '字典主键', slots: 'key', width: 224, align: 'center' },
{ label: 'ID', prop: 'id' }, { label: '字典名称', prop: 'name', align: 'center' },
{ label: '标题', prop: 'course_name' }, { label: '字典类型', prop: 'type', align: 'center' },
{ label: '类型', prop: 'type_name' }, {
{ label: '浏览量', prop: 'pv' }, label: '状态',
{ label: '创建时间', prop: 'created_time' }, prop: 'status',
{ label: '操作', slots: 'table-operate', width: 230, align: 'right' } align: 'center',
computed(row: any) {
if (row.status === '0') {
return '正常'
} else {
return '停用'
}
}
},
{ label: '备注 ', prop: 'remark', align: 'center' },
{ label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-operate', align: 'center', width: 300 }
], ],
data: [ data: [
{ id: 1, title: '视频标题', type: '视频分类' }, {
{ id: 2, title: '视频标题', type: '视频分类' } key: 1,
name: '用户性别',
type: 'sex',
status: '0',
remark: '用户性别列表',
created_time: '2022-05-30',
rowList: [
{ key: 1, name: '用户性别', type: 'sex', status: '0', remark: '用户性别列表', created_time: '2022-05-30' },
{ key: 2, name: '用户年龄', type: 'age', status: '1', remark: '用户年龄列表', created_time: '2022-05-31' }
]
}
] ]
} }
const handleAdd = () => {
console.log('新增字典')
isShowDialog.value = true
isEdit.value = false
}
const handleEdit = (row: any) => {
console.log('编辑字典', row)
rowInfo.value = row
isShowDialog.value = true
isEdit.value = true
console.log(rowInfo)
}
const handleDelete = (row: any) => {
console.log('删除字典', row)
}
const handleList = (row: any) => {
console.log('列表', row.rowList)
router.push({
path: '/system/dictionary/rowList',
query: {
rowList: JSON.stringify(row.rowList)
}
})
// listShowDialog.value = true
}
</script> </script>
<template> <template>
<AppCard title="数据字典"> <AppCard title="数据字典">
<router-link to="/resource/video/create">
<el-button type="primary" round>新建视频资源</el-button>
</router-link>
<AppList v-bind="listOptions" ref="appList"> <AppList v-bind="listOptions" ref="appList">
<template #header-aside> </template> <el-row>
<el-button type="primary" @click="handleAdd">新增字典</el-button>
</el-row>
<template v-slot:created_time="{ params }">
<el-date-picker
v-model="params.created_time"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
size="small"
>
</el-date-picker>
</template>
<template #table-operate="{ row }"> <template #table-operate="{ row }">
<el-space> <el-space>
<router-link :to="`/video/update/${row.id}`"> <el-button type="primary" plain @click="handleEdit(row)">编辑</el-button>
<el-button plain>编辑</el-button> <el-button type="primary" plain @click="handleList(row)">列表</el-button>
</router-link> <el-button type="primary" plain @click="handleDelete(row)">删除</el-button>
<!-- <router-link :to="`/video/view/${row.id}`">
<el-button type="primary" plain>查看</el-button>
</router-link> -->
</el-space> </el-space>
</template> </template>
<template v-if="isShowDialog === true">
<AddDialog v-model:isShowDialog="isShowDialog" :isEdit="isEdit" :rowInfo="rowInfo" />
</template>
</AppList> </AppList>
</AppCard> </AppCard>
</template> </template>
src/modules/system/dictionary/views/rowList.vue 0 → 100644
浏览文件 @ 646dce9a
<script setup lang="ts">
import ListAddDialog from '../component/ListAddDialog.vue'
const route = useRoute()
const appList = ref()
const editData = ref({})
const isEdit = ref(false)
const isListAddDialog = ref(false)
const listOptions = {
remote: {
// httpRequest: getVideoList,
params: { type: '' }
},
columns: [
{ label: '字典编码', prop: 'code', align: 'center' },
{ label: '字典标签', prop: 'tag', align: 'center' },
{ label: '字典键值', prop: 'key', align: 'center' },
{
label: '状态',
prop: 'status',
align: 'center',
computed(row: any) {
console.log(row.row)
if (row.row.status === '0') {
return '正常'
} else if (row.row.status === '1') {
return '停用'
} else {
return '-'
}
}
},
{ label: '备注 ', prop: 'remark', align: 'center' },
{ label: '创建时间', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-operate', align: 'center', minWidth: 180 }
],
data: JSON.parse(route.query.rowList + '')
}
const handleAdd = () => {
isListAddDialog.value = true
isEdit.value = true
editData.value = {}
console.log('新增字典')
}
const handleEdit = (row: any) => {
isEdit.value = true
editData.value = row
isListAddDialog.value = true
console.log('编辑字典', row)
}
const handleDelete = (row: any) => {
console.log('删除字典', row)
}
const confirm = () => {
console.log('0001111')
}
</script>
<template>
<AppCard>
<AppList v-bind="listOptions" ref="appList">
<el-row>
<el-button type="primary" @click="handleAdd">新增</el-button>
</el-row>
<template #table-operate="{ row }">
<el-space>
<el-button type="primary" plain @click="handleEdit(row)">编辑</el-button>
<el-button type="primary" plain @click="handleDelete(row)">删除</el-button>
</el-space>
</template>
</AppList>
</AppCard>
<template v-if="isListAddDialog === true">
<ListAddDialog v-model:isListAddDialog="isListAddDialog" @confirm="confirm" :editData="editData" :isEdit="isEdit" />
</template>
</template>
tsconfig.json
浏览文件 @ 646dce9a
...@@ -6,7 +6,8 @@ ...@@ -6,7 +6,8 @@
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@/*": ["./src/*"] "@/*": ["./src/*"]
} },
"suppressImplicitAnyIndexErrors": true
}, },
"references": [ "references": [
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论