Files
api-client/src/views/cxshMini/anli/article/index.vue
2025-03-28 18:28:06 +08:00

83 lines
2.8 KiB
Vue

<template>
<div class="cxshMini-article-container">
<el-button style="margin-bottom: 10px" type="primary" @click="handlePublish">发布</el-button>
<el-form ref="form" label-width="80px" :model="form" :rules="rules">
<el-form-item label="用户名" prop="username">
<el-input v-model.trim="form.username" autocomplete="off" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model.trim="form.password" autocomplete="off" type="password" />
</el-form-item>
<el-form-item label="昵称" prop="nickname">
<el-input v-model.trim="form.nickname" autocomplete="off" />
</el-form-item>
<el-form-item label="权限" prop="permissions">
<el-select v-model="form.permissions" multiple placeholder="请选择权限">
<el-option v-for="item in permissionList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="应用" prop="appId">
<el-select v-model="form.appId" placeholder="请选择应用">
<el-option v-for="item in applicationList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="头像" prop="avatar">
<single-upload
style="width: 100px; height: 100px"
upload-url="http://127.0.0.1:3999/management/api/common/upload"
@upload-success="handleUploadSuccess"
/>
</el-form-item>
</el-form>
<quill-editor v-model="content" :options="editorOptions" />
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.snow.css'
import SingleUpload from '@/components/SingleUpload'
export default {
name: 'CxshMiniArticle',
components: { quillEditor, SingleUpload },
data() {
return {
form: {
username: '',
password: '',
nickname: '',
permissions: '',
appId: '',
avatar: '',
},
permissionList: [],
applicationList: [],
rules: {
username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
permissions: [{ required: true, trigger: 'blur', message: '请选择权限' }],
appId: [{ required: true, trigger: 'blur', message: '请选择应用' }],
},
content: '',
editorOptions: {
theme: 'snow',
},
}
},
created() {
this.fetchData()
},
methods: {
handlePublish() {
console.log(11111, this.content)
console.log('发布')
},
async fetchData() {},
handleUploadSuccess(res) {
this.form.avatar = res.data.url
},
},
}
</script>