config.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  1. <template>
  2. <el-container class="panel-block">
  3. <el-header class="sa-header">
  4. <el-tabs class="sa-tabs">
  5. <el-tab-pane label="附件配置"></el-tab-pane>
  6. </el-tabs>
  7. </el-header>
  8. <el-main class="sa-p-t-30">
  9. <el-row :gutter="16">
  10. <el-col :xs="24" :sm="20" :md="18" :lg="14" :xl="14">
  11. <el-form
  12. :model="filesystem.model"
  13. :rules="filesystem.rules"
  14. ref="filesystemRef"
  15. label-width="180px"
  16. >
  17. <el-form-item label="存储引擎" prop="driver" required>
  18. <el-radio-group v-model="filesystem.model.driver">
  19. <el-radio label="public">本地储存</el-radio>
  20. <el-radio label="aliyun">阿里云存储</el-radio>
  21. <el-radio label="qcloud">腾讯云存储</el-radio>
  22. <el-radio label="qiniu">七牛云储存</el-radio>
  23. </el-radio-group>
  24. </el-form-item>
  25. <!-- 默认 -->
  26. <el-form-item label="允许上传类型" prop="extensions">
  27. <el-input
  28. placeholder="请输入允许上传类型(空格符为逗号)"
  29. v-model="filesystem.model.extensions"
  30. ></el-input>
  31. </el-form-item>
  32. <el-form-item label="文件上传限制" prop="filesize">
  33. <el-input placeholder="请输入文件上传限制" v-model="filesystem.model.filesize">
  34. <template #append>M</template>
  35. </el-input>
  36. </el-form-item>
  37. <el-form-item label="图片上传限制" prop="imagesize">
  38. <el-input placeholder="请输入图片上传限制" v-model="filesystem.model.imagesize">
  39. <template #append>M</template>
  40. </el-input>
  41. </el-form-item>
  42. <!-- 本地存储 -->
  43. <template v-if="filesystem.model.driver == 'public'">
  44. <div class="sa-title--line sa-m-b-30">本地存储</div>
  45. <el-form-item label="访问域名">
  46. <el-input
  47. placeholder="请输入访问域名 默认使用当前域名"
  48. v-model="filesystem.model.disks.public.url"
  49. ></el-input>
  50. </el-form-item>
  51. </template>
  52. <!-- 阿里云 -->
  53. <template v-if="filesystem.model.driver == 'aliyun'">
  54. <div class="sa-title--line sa-m-b-30">阿里云存储</div>
  55. <div>
  56. <el-form-item label="访问域名" prop="disks.aliyun.url">
  57. <el-input
  58. placeholder="请输入访问域名"
  59. v-model="filesystem.model.disks.aliyun.url"
  60. ></el-input>
  61. </el-form-item>
  62. <el-form-item label="AccessId" prop="disks.aliyun.access_id">
  63. <el-input
  64. placeholder="请输入AccessId"
  65. v-model="filesystem.model.disks.aliyun.access_id"
  66. ></el-input>
  67. </el-form-item>
  68. <el-form-item label="AccessSecret" prop="disks.aliyun.access_secret">
  69. <el-input
  70. placeholder="请输入AccessSecret"
  71. v-model="filesystem.model.disks.aliyun.access_secret"
  72. ></el-input>
  73. </el-form-item>
  74. <el-form-item label="Bucket" prop="disks.aliyun.bucket">
  75. <el-input
  76. placeholder="请输入Bucket"
  77. v-model="filesystem.model.disks.aliyun.bucket"
  78. ></el-input>
  79. </el-form-item>
  80. <el-form-item label="Endpoint" prop="disks.aliyun.endpoint">
  81. <el-input
  82. placeholder="请输入Endpoint"
  83. v-model="filesystem.model.disks.aliyun.endpoint"
  84. ></el-input>
  85. </el-form-item>
  86. </div>
  87. </template>
  88. <!-- 腾讯云 -->
  89. <div v-if="filesystem.model.driver == 'qcloud'">
  90. <div class="sa-title--line sa-m-b-30">腾讯云存储</div>
  91. <el-form-item label="访问域名" prop="disks.qcloud.url">
  92. <el-input
  93. placeholder="请输入访问域名"
  94. v-model="filesystem.model.disks.qcloud.url"
  95. ></el-input>
  96. </el-form-item>
  97. <el-form-item label="所属区域" prop="disks.qcloud.region">
  98. <el-input
  99. placeholder="请输入所属区域"
  100. v-model="filesystem.model.disks.qcloud.region"
  101. ></el-input>
  102. </el-form-item>
  103. <el-form-item label="AppId" prop="disks.qcloud.app_id">
  104. <el-input
  105. placeholder="请输入AppId"
  106. v-model="filesystem.model.disks.qcloud.app_id"
  107. ></el-input>
  108. </el-form-item>
  109. <el-form-item label="SecretId" prop="disks.qcloud.secret_id">
  110. <el-input
  111. placeholder="请输入SecretId"
  112. v-model="filesystem.model.disks.qcloud.secret_id"
  113. ></el-input>
  114. </el-form-item>
  115. <el-form-item label="SecretKey" prop="disks.qcloud.secret_key">
  116. <el-input
  117. placeholder="请输入SecretKey"
  118. v-model="filesystem.model.disks.qcloud.secret_key"
  119. ></el-input>
  120. </el-form-item>
  121. <el-form-item label="Bucket" prop="disks.qcloud.bucket">
  122. <el-input
  123. placeholder="请输入Bucket"
  124. v-model="filesystem.model.disks.qcloud.bucket"
  125. ></el-input>
  126. </el-form-item>
  127. </div>
  128. <!-- 七牛云 -->
  129. <div v-if="filesystem.model.driver == 'qiniu'">
  130. <div class="sa-title--line sa-m-b-30">七牛云存储</div>
  131. <el-form-item label="访问域名" prop="disks.qiniu.url">
  132. <el-input
  133. placeholder="请输入访问域名"
  134. v-model="filesystem.model.disks.qiniu.url"
  135. ></el-input>
  136. </el-form-item>
  137. <el-form-item label="AccessKey" prop="disks.qiniu.access_key">
  138. <el-input
  139. placeholder="请输入AccessKey"
  140. v-model="filesystem.model.disks.qiniu.access_key"
  141. ></el-input>
  142. </el-form-item>
  143. <el-form-item label="SecretKey" prop="disks.qiniu.secret_key">
  144. <el-input
  145. placeholder="请输入SecretKey"
  146. v-model="filesystem.model.disks.qiniu.secret_key"
  147. ></el-input>
  148. </el-form-item>
  149. <el-form-item label="Bucket" prop="disks.qiniu.bucket">
  150. <el-input
  151. placeholder="请输入Bucket"
  152. v-model="filesystem.model.disks.qiniu.bucket"
  153. ></el-input>
  154. </el-form-item>
  155. </div>
  156. </el-form>
  157. </el-col>
  158. </el-row>
  159. </el-main>
  160. <el-footer class="sa-footer--submit">
  161. <el-button @click="getData">重置</el-button>
  162. <el-button type="primary" @click="onUpdate">保存</el-button>
  163. </el-footer>
  164. </el-container>
  165. </template>
  166. <script>
  167. export default {
  168. name: 'file.admin.config',
  169. };
  170. </script>
  171. <script setup>
  172. import { reactive, ref, onMounted, unref } from 'vue';
  173. import file from '@/app/file/api';
  174. // 附件数据
  175. const filesystemRef = ref();
  176. const filesystem = reactive({
  177. model: {},
  178. rules: {
  179. extensions: [{ required: true, message: '请输入允许上传类型', trigger: 'blur' }],
  180. filesize: [{ required: true, message: '请输入文件上传限制', trigger: 'blur' }],
  181. imagesize: [{ required: true, message: '请输入图片上传限制', trigger: 'blur' }],
  182. disks: {
  183. aliyun: {
  184. access_id: [
  185. {
  186. required: true,
  187. message: '请输入AccessId',
  188. trigger: 'blur',
  189. },
  190. ],
  191. access_secret: [
  192. {
  193. required: true,
  194. message: '请输入AccessSecret',
  195. trigger: 'blur',
  196. },
  197. ],
  198. bucket: [
  199. {
  200. required: true,
  201. message: '请输入Bucket',
  202. trigger: 'blur',
  203. },
  204. ],
  205. endpoint: [
  206. {
  207. required: true,
  208. message: '请输入Endpoint',
  209. trigger: 'blur',
  210. },
  211. ],
  212. url: [
  213. {
  214. required: true,
  215. message: '请输入访问域名',
  216. trigger: 'blur',
  217. },
  218. ],
  219. },
  220. qcloud: {
  221. app_id: [
  222. {
  223. required: true,
  224. message: '请输入AppId',
  225. trigger: 'blur',
  226. },
  227. ],
  228. secret_bucket: [
  229. {
  230. required: true,
  231. message: '请输入Bucket',
  232. trigger: 'blur',
  233. },
  234. ],
  235. region: [
  236. {
  237. required: true,
  238. message: '请输入所属区域',
  239. trigger: 'blur',
  240. },
  241. ],
  242. secret_id: [
  243. {
  244. required: true,
  245. message: '请输入SecretId',
  246. trigger: 'blur',
  247. },
  248. ],
  249. secret_key: [
  250. {
  251. required: true,
  252. message: '请输入SecretKey',
  253. trigger: 'blur',
  254. },
  255. ],
  256. url: [
  257. {
  258. required: true,
  259. message: '请输入访问域名',
  260. trigger: 'blur',
  261. },
  262. ],
  263. },
  264. qiniu: {
  265. access_key: [
  266. {
  267. required: true,
  268. message: '请输入AccessKey',
  269. trigger: 'blur',
  270. },
  271. ],
  272. bucket: [
  273. {
  274. required: true,
  275. message: '请输入Bucket',
  276. trigger: 'blur',
  277. },
  278. ],
  279. secret_key: [
  280. {
  281. required: true,
  282. message: '请输入SecretKey',
  283. trigger: 'blur',
  284. },
  285. ],
  286. url: [
  287. {
  288. required: true,
  289. message: '请输入访问域名',
  290. trigger: 'blur',
  291. },
  292. ],
  293. },
  294. },
  295. },
  296. });
  297. // 获取
  298. async function getData() {
  299. const { data } = await file.config.filesystem();
  300. filesystem.model = data;
  301. }
  302. // 更新
  303. function onUpdate() {
  304. unref(filesystemRef).validate((valid) => {
  305. valid && file.config.filesystem(filesystem.model);
  306. });
  307. }
  308. onMounted(() => {
  309. getData();
  310. });
  311. </script>