BJ_ZTEITS-Developers / parking-cloud-yudao

Commit ab09b7c67ec5d1549dae0b6a073814f2f515263c

Authored by YunaiV
1 parent 802e80f6

完成 vue 的添加/修改表单部分的模板

Inline Side-by-side
Showing 3 changed files with 304 additions and 49 deletions
ruoyi-ui/src/components/FileUpload/index.vue 0 → 100644
  View file @ab09b7c
  1 +<template>
  2 + <div class="upload-file">
  3 + <el-upload
  4 + :action="uploadFileUrl"
  5 + :before-upload="handleBeforeUpload"
  6 + :file-list="fileList"
  7 + :limit="1"
  8 + :on-error="handleUploadError"
  9 + :on-exceed="handleExceed"
  10 + :on-success="handleUploadSuccess"
  11 + :show-file-list="false"
  12 + :headers="headers"
  13 + class="upload-file-uploader"
  14 + ref="upload"
  15 + >
  16 + <!-- 上传按钮 -->
  17 + <el-button size="mini" type="primary">选取文件</el-button>
  18 + <!-- 上传提示 -->
  19 + <div class="el-upload__tip" slot="tip" v-if="showTip">
  20 + 请上传
  21 + <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
  22 + <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
  23 + 的文件
  24 + </div>
  25 + </el-upload>
  26 +
  27 + <!-- 文件列表 -->
  28 + <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
  29 + <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list">
  30 + <el-link :href="file.url" :underline="false" target="_blank">
  31 + <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
  32 + </el-link>
  33 + <div class="ele-upload-list__item-content-action">
  34 + <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
  35 + </div>
  36 + </li>
  37 + </transition-group>
  38 + </div>
  39 +</template>
  40 +
  41 +<script>
  42 +import { getToken } from "@/utils/auth";
  43 +
  44 +export default {
  45 + props: {
  46 + // 值
  47 + value: [String, Object, Array],
  48 + // 大小限制(MB)
  49 + fileSize: {
  50 + type: Number,
  51 + default: 5,
  52 + },
  53 + // 文件类型, 例如['png', 'jpg', 'jpeg']
  54 + fileType: {
  55 + type: Array,
  56 + default: () => ["doc", "xls", "ppt", "txt", "pdf"],
  57 + },
  58 + // 是否显示提示
  59 + isShowTip: {
  60 + type: Boolean,
  61 + default: true
  62 + }
  63 + },
  64 + data() {
  65 + return {
  66 + uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
  67 + headers: {
  68 + Authorization: "Bearer " + getToken(),
  69 + },
  70 + fileList: [],
  71 + };
  72 + },
  73 + computed: {
  74 + // 是否显示提示
  75 + showTip() {
  76 + return this.isShowTip && (this.fileType || this.fileSize);
  77 + },
  78 + // 列表
  79 + list() {
  80 + let temp = 1;
  81 + if (this.value) {
  82 + // 首先将值转为数组
  83 + const list = Array.isArray(this.value) ? this.value : [this.value];
  84 + // 然后将数组转为对象数组
  85 + return list.map((item) => {
  86 + if (typeof item === "string") {
  87 + item = { name: item, url: item };
  88 + }
  89 + item.uid = item.uid || new Date().getTime() + temp++;
  90 + return item;
  91 + });
  92 + } else {
  93 + this.fileList = [];
  94 + return [];
  95 + }
  96 + },
  97 + },
  98 + methods: {
  99 + // 上传前校检格式和大小
  100 + handleBeforeUpload(file) {
  101 + // 校检文件类型
  102 + if (this.fileType) {
  103 + let fileExtension = "";
  104 + if (file.name.lastIndexOf(".") > -1) {
  105 + fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
  106 + }
  107 + const isTypeOk = this.fileType.some((type) => {
  108 + if (file.type.indexOf(type) > -1) return true;
  109 + if (fileExtension && fileExtension.indexOf(type) > -1) return true;
  110 + return false;
  111 + });
  112 + if (!isTypeOk) {
  113 + this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
  114 + return false;
  115 + }
  116 + }
  117 + // 校检文件大小
  118 + if (this.fileSize) {
  119 + const isLt = file.size / 1024 / 1024 < this.fileSize;
  120 + if (!isLt) {
  121 + this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
  122 + return false;
  123 + }
  124 + }
  125 + return true;
  126 + },
  127 + // 文件个数超出
  128 + handleExceed() {
  129 + this.$message.error(`只允许上传单个文件`);
  130 + },
  131 + // 上传失败
  132 + handleUploadError(err) {
  133 + this.$message.error("上传失败, 请重试");
  134 + },
  135 + // 上传成功回调
  136 + handleUploadSuccess(res, file) {
  137 + this.$message.success("上传成功");
  138 + this.$emit("input", res.url);
  139 + },
  140 + // 删除文件
  141 + handleDelete(index) {
  142 + this.fileList.splice(index, 1);
  143 + this.$emit("input", '');
  144 + },
  145 + // 获取文件名称
  146 + getFileName(name) {
  147 + if (name.lastIndexOf("/") > -1) {
  148 + return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
  149 + } else {
  150 + return "";
  151 + }
  152 + }
  153 + },
  154 + created() {
  155 + this.fileList = this.list;
  156 + },
  157 +};
  158 +</script>
  159 +
  160 +<style scoped lang="scss">
  161 +.upload-file-uploader {
  162 + margin-bottom: 5px;
  163 +}
  164 +.upload-file-list .el-upload-list__item {
  165 + border: 1px solid #e4e7ed;
  166 + line-height: 2;
  167 + margin-bottom: 10px;
  168 + position: relative;
  169 +}
  170 +.upload-file-list .ele-upload-list__item-content {
  171 + display: flex;
  172 + justify-content: space-between;
  173 + align-items: center;
  174 + color: inherit;
  175 +}
  176 +.ele-upload-list__item-content-action .el-link {
  177 + margin-right: 10px;
  178 +}
  179 +</style>
0 180 \ No newline at end of file
... ...
ruoyi-ui/src/components/ImageUpload/index.vue 0 → 100644
  View file @ab09b7c
  1 +<template>
  2 + <div class="component-upload-image">
  3 + <el-upload
  4 + :action="uploadImgUrl"
  5 + list-type="picture-card"
  6 + :on-success="handleUploadSuccess"
  7 + :before-upload="handleBeforeUpload"
  8 + :on-error="handleUploadError"
  9 + name="file"
  10 + :show-file-list="false"
  11 + :headers="headers"
  12 + style="display: inline-block; vertical-align: top"
  13 + >
  14 + <el-image v-if="!value" :src="value">
  15 + <div slot="error" class="image-slot">
  16 + <i class="el-icon-plus" />
  17 + </div>
  18 + </el-image>
  19 + <div v-else class="image">
  20 + <el-image :src="value" :style="`width:150px;height:150px;`" fit="fill"/>
  21 + <div class="mask">
  22 + <div class="actions">
  23 + <span title="预览" @click.stop="dialogVisible = true">
  24 + <i class="el-icon-zoom-in" />
  25 + </span>
  26 + <span title="移除" @click.stop="removeImage">
  27 + <i class="el-icon-delete" />
  28 + </span>
  29 + </div>
  30 + </div>
  31 + </div>
  32 + </el-upload>
  33 + <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
  34 + <img :src="value" style="display: block; max-width: 100%; margin: 0 auto;">
  35 + </el-dialog>
  36 + </div>
  37 +</template>
  38 +
  39 +<script>
  40 +import { getToken } from "@/utils/auth";
  41 +
  42 +export default {
  43 + data() {
  44 + return {
  45 + dialogVisible: false,
  46 + uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
  47 + headers: {
  48 + Authorization: "Bearer " + getToken(),
  49 + },
  50 + };
  51 + },
  52 + props: {
  53 + value: {
  54 + type: String,
  55 + default: "",
  56 + },
  57 + },
  58 + methods: {
  59 + removeImage() {
  60 + this.$emit("input", "");
  61 + },
  62 + handleUploadSuccess(res) {
  63 + this.$emit("input", res.url);
  64 + this.loading.close();
  65 + },
  66 + handleBeforeUpload() {
  67 + this.loading = this.$loading({
  68 + lock: true,
  69 + text: "上传中",
  70 + background: "rgba(0, 0, 0, 0.7)",
  71 + });
  72 + },
  73 + handleUploadError() {
  74 + this.$message({
  75 + type: "error",
  76 + message: "上传失败",
  77 + });
  78 + this.loading.close();
  79 + },
  80 + },
  81 + watch: {},
  82 +};
  83 +</script>
  84 +
  85 +<style scoped lang="scss">
  86 +.image {
  87 + position: relative;
  88 + .mask {
  89 + opacity: 0;
  90 + position: absolute;
  91 + top: 0;
  92 + width: 100%;
  93 + background-color: rgba(0, 0, 0, 0.5);
  94 + transition: all 0.3s;
  95 + }
  96 + &:hover .mask {
  97 + opacity: 1;
  98 + }
  99 +}
  100 +</style>
0 101 \ No newline at end of file
... ...
src/main/resources/codegen/vue/views/index.vue.vm
  View file @ab09b7c
... ... @@ -20,7 +20,7 @@
20 20 <el-select v-model="queryParams.${javaField}" placeholder="请选择${comment}" clearable size="small">
21 21 #if ("" != $dictType)## 设置了 dictType 数据字典的情况
22 22 <el-option v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
23   - :key="parseInt(dict.dictValue)" :label="dict.dictLabel" :value="parseInt(dict.dictValue)"/>
  23 + :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
24 24 #else## 未设置 dictType 数据字典的情况
25 25 <el-option label="请选择字典生成" value="" />
26 26 #end
... ... @@ -116,80 +116,56 @@
116 116 <el-input v-model="form.${javaField}" placeholder="请输入${comment}" />
117 117 </el-form-item>
118 118 #end
119   -#elseif($column.htmlType == "imageUpload")
  119 +#elseif($column.htmlType == "imageUpload")## 图片上传
120 120 <el-form-item label="${comment}">
121 121 <imageUpload v-model="form.${javaField}"/>
122 122 </el-form-item>
123   -#elseif($column.htmlType == "fileUpload")
  123 +#elseif($column.htmlType == "fileUpload")## 文件上传
124 124 <el-form-item label="${comment}">
125 125 <fileUpload v-model="form.${javaField}"/>
126 126 </el-form-item>
127   -#elseif($column.htmlType == "editor")
  127 +#elseif($column.htmlType == "editor")## 文本编辑器
128 128 <el-form-item label="${comment}">
129 129 <editor v-model="form.${javaField}" :min-height="192"/>
130 130 </el-form-item>
131   -#elseif($column.htmlType == "select" && "" != $dictType)
132   - <el-form-item label="${comment}" prop="${javaField}">
133   - <el-select v-model="form.${javaField}" placeholder="请选择${comment}">
134   - <el-option
135   - v-for="dict in ${javaField}Options"
136   - :key="dict.dictValue"
137   - :label="dict.dictLabel"
138   - #if($column.javaType == "Integer" || $column.javaType == "Long"):value="parseInt(dict.dictValue)"#else:value="dict.dictValue"#end
139   -
140   - ></el-option>
141   - </el-select>
142   - </el-form-item>
143   -#elseif($column.htmlType == "select" && $dictType)
  131 +#elseif($column.htmlType == "select")## 下拉框
144 132 <el-form-item label="${comment}" prop="${javaField}">
145 133 <el-select v-model="form.${javaField}" placeholder="请选择${comment}">
  134 + #if ("" != $dictType)## 有数据字典
  135 + <el-option v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
  136 + :key="dict.value" :label="dict.label" #if ($column.javaType == "Integer" || $column.javaType == "Long"):value="parseInt(dict.value)"#else:value="dict.value"#end />
  137 + #else##没数据字典
146 138 <el-option label="请选择字典生成" value="" />
  139 + #end
147 140 </el-select>
148 141 </el-form-item>
149   -#elseif($column.htmlType == "checkbox" && "" != $dictType)
150   - <el-form-item label="${comment}">
151   - <el-checkbox-group v-model="form.${javaField}">
152   - <el-checkbox
153   - v-for="dict in ${javaField}Options"
154   - :key="dict.dictValue"
155   - :label="dict.dictValue">
156   - {{dict.dictLabel}}
157   - </el-checkbox>
158   - </el-checkbox-group>
159   - </el-form-item>
160   -#elseif($column.htmlType == "checkbox" && $dictType)
  142 +#elseif($column.htmlType == "checkbox")## 多选框
161 143 <el-form-item label="${comment}">
162 144 <el-checkbox-group v-model="form.${javaField}">
  145 + #if ("" != $dictType)## 有数据字典
  146 + <el-checkbox v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
  147 + :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"#else:label="dict.value"#end>{{dict.label}}</el-checkbox>
  148 + #else##没数据字典
163 149 <el-checkbox>请选择字典生成</el-checkbox>
  150 + #end
164 151 </el-checkbox-group>
165 152 </el-form-item>
166   -#elseif($column.htmlType == "radio" && "" != $dictType)
167   - <el-form-item label="${comment}">
168   - <el-radio-group v-model="form.${javaField}">
169   - <el-radio
170   - v-for="dict in ${javaField}Options"
171   - :key="dict.dictValue"
172   - #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.dictValue)"#else:label="dict.dictValue"#end
173   -
174   - >{{dict.dictLabel}}</el-radio>
175   - </el-radio-group>
176   - </el-form-item>
177   -#elseif($column.htmlType == "radio" && $dictType)
  153 +#elseif($column.htmlType == "radio")## 单选框
178 154 <el-form-item label="${comment}">
179 155 <el-radio-group v-model="form.${javaField}">
  156 + #if ("" != $dictType)## 有数据字典
  157 + <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
  158 + :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"#else:label="dict.value"#end>{{dict.label}}</el-radio>
  159 + #else##没数据字典
180 160 <el-radio label="1">请选择字典生成</el-radio>
  161 + #end
181 162 </el-radio-group>
182 163 </el-form-item>
183   -#elseif($column.htmlType == "datetime")
  164 +#elseif($column.htmlType == "datetime")## 时间框
184 165 <el-form-item label="${comment}" prop="${javaField}">
185   - <el-date-picker clearable size="small"
186   - v-model="form.${javaField}"
187   - type="date"
188   - value-format="yyyy-MM-dd"
189   - placeholder="选择${comment}">
190   - </el-date-picker>
  166 + <el-date-picker clearable size="small" v-model="form.${javaField}" type="date" value-format="yyyy-MM-dd" placeholder="选择${comment}" />
191 167 </el-form-item>
192   -#elseif($column.htmlType == "textarea")
  168 +#elseif($column.htmlType == "textarea")## 文本框
193 169 <el-form-item label="${comment}" prop="${javaField}">
194 170 <el-input v-model="form.${javaField}" type="textarea" placeholder="请输入内容" />
195 171 </el-form-item>
... ...