addPage.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. <template>
  2. <div class="add-chart-page">
  3. <div class="top-title-box">
  4. <p>{{propsData.id?'编辑':'新增'}}</p>
  5. <p class="reset-button-one" @click="backPage">返回</p>
  6. </div>
  7. <el-form ref="form" :model="form" :rules="rules" label-width="120px">
  8. <el-form-item label="标题:" prop="imgName">
  9. <el-input v-model="form.imgName" placeholder="请输入标题" maxLength="20" style="width:400px;"/>
  10. </el-form-item>
  11. <el-form-item label="类型:" prop="imgCategory">
  12. <el-select v-model="form.imgCategory" placeholder="请选择类型" style="width:400px;">
  13. <el-option label="轮播图" :value="1"></el-option>
  14. <el-option label="文化图" :value="2"></el-option>
  15. </el-select>
  16. </el-form-item>
  17. <el-form-item label="范围:" prop="imgRange">
  18. <el-select v-model="form.imgRange" placeholder="请选择范围" style="width:400px;">
  19. <el-option
  20. v-for="dict in deptOptions"
  21. :key="dict.deptId"
  22. :label="dict.deptName"
  23. :value="dict.deptId"
  24. ></el-option>
  25. </el-select>
  26. </el-form-item>
  27. <el-form-item label="排序:" prop="imgOrder">
  28. <el-input v-model="form.imgOrder" placeholder="请输入排序" maxLength="5" style="width:400px;"/>
  29. </el-form-item>
  30. <el-form-item label="有效时间:" prop="validBeginTime">
  31. <el-date-picker
  32. @change="timeChange"
  33. :clearable="false"
  34. v-model="dateRange"
  35. size="small"
  36. style="width: 400px"
  37. value-format="yyyy-MM-dd"
  38. type="daterange"
  39. range-separator="-"
  40. start-placeholder="开始日期"
  41. end-placeholder="结束日期"
  42. ></el-date-picker>
  43. </el-form-item>
  44. <el-form-item label="内容:" prop="imgUrl">
  45. <el-upload
  46. class="certificate-avatar-uploader"
  47. :action="uploadImgUrl"
  48. :show-file-list="false"
  49. accept="image/jpeg,image/gif,image/png"
  50. :on-success="handleAvatarSuccess"
  51. :headers="headers"
  52. :before-upload="beforeAvatarUpload">
  53. <p v-if="!form.imgUrl" style="background:#0183FA;color:#fff;font-weight:500;font-size:14px;text-align: center;line-height:40px;width:200px;border-radius:4px; "> + 上传图片</p>
  54. <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" style="height:80px;width:80px;">
  55. </el-upload>
  56. </el-form-item>
  57. <!--<el-form-item label="轮播图类型" prop="imgType">-->
  58. <!--<template>-->
  59. <!--<el-radio v-model="form.imgType" label="1">轮播</el-radio>-->
  60. <!--<el-radio v-model="form.imgType" label="2">文化图</el-radio>-->
  61. <!--</template>-->
  62. <!--</el-form-item>-->
  63. </el-form>
  64. <p class="bottom-button-p inquire-button-one" @click="submitForm">保存</p>
  65. </div>
  66. </template>
  67. <script>
  68. import { getToken } from "@/utils/auth";
  69. import { listDepartments } from "@/api/system/dept";
  70. import { addChart, updateChart } from "@/api/laboratory/chart";
  71. export default {
  72. name: "addPage",
  73. props:{
  74. propsData:{},
  75. },
  76. data(){
  77. return{
  78. uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
  79. headers: {
  80. Authorization: "Bearer " + getToken(),
  81. },
  82. form:{
  83. },
  84. rules:{
  85. imgName:[
  86. {required: true, message: '请输入轮播图标题', trigger: 'blur'},
  87. { required: true, message: "请输入轮播图标题", validator: this.spaceJudgment, trigger: "blur" }
  88. ],
  89. imgCategory:[
  90. {required: true, message: '请选择轮播图类型', trigger: 'blur'}
  91. ],
  92. imgRange:[
  93. {required: true, message: '请选择轮播图展示范围', trigger: 'blur'}
  94. ],
  95. imgOrder:[
  96. {required: true, message: '请输入轮播图排序序号', trigger: 'blur'},
  97. { required: true, message: "请输入轮播图排序序号", validator: this.spaceJudgment, trigger: "blur" },
  98. { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
  99. ],
  100. validBeginTime:[
  101. {required: true, message: '请选择轮播图有效期', trigger: 'blur'}
  102. ],
  103. imgUrl:[
  104. {required: true, message: '请选择轮播图内容', trigger: 'blur'}
  105. ],
  106. },
  107. dateRange:[],
  108. //范围
  109. deptOptions:[],
  110. }
  111. },
  112. created() {
  113. },
  114. mounted(){
  115. this.getDeptList();
  116. if(this.propsData.id){
  117. let obj = {
  118. id : this.propsData.id,
  119. imgName : this.propsData.imgName,
  120. imgCategory : this.propsData.imgCategory,
  121. imgRange : this.propsData.imgRange,
  122. imgOrder : this.propsData.imgOrder,
  123. validBeginTime : this.propsData.validBeginTime,
  124. validEndTime : this.propsData.validEndTime,
  125. imgUrl : this.propsData.imgUrl,
  126. }
  127. this.$set(this,'form',obj);
  128. this.dateRange.push(this.propsData.validBeginTime)
  129. this.dateRange.push(this.propsData.validEndTime)
  130. console.log("123",123)
  131. }
  132. },
  133. methods: {
  134. timeChange(data){
  135. this.$set(this.form,'validBeginTime',data[0])
  136. this.$set(this.form,'validEndTime',data[1])
  137. },
  138. /** 查询学院列表 */
  139. getDeptList() {
  140. listDepartments().then(response => {
  141. this.$set(this, 'deptOptions', response.data)
  142. this.deptOptions.unshift({deptId:-1,deptName:'全校'})
  143. });
  144. },
  145. // 返回按钮
  146. backPage(){
  147. this.$parent.buttonClick(1);
  148. },
  149. /** 提交按钮 */
  150. submitForm() {
  151. this.$refs["form"].validate(valid => {
  152. if (valid) {
  153. if (this.form.id != null) {
  154. updateChart(this.form).then( response => {
  155. this.msgSuccess("修改成功");
  156. this.$parent.buttonClick(1);
  157. });
  158. } else {
  159. addChart(this.form).then( response => {
  160. this.msgSuccess("新增成功");
  161. this.$parent.buttonClick(1);
  162. });
  163. }
  164. }
  165. });
  166. },
  167. //上传
  168. handleAvatarSuccess(res, file) {
  169. this.$set(this.form,'imgUrl',res.data.url);
  170. this.$forceUpdate()
  171. },
  172. beforeAvatarUpload(file) {
  173. let type = false;
  174. console.log('file',file);
  175. if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
  176. type = true;
  177. }else{
  178. this.$message.error('只能上传png/jpeg/gif格式图片');
  179. type = false;
  180. }
  181. return type;
  182. },
  183. },
  184. }
  185. </script>
  186. <style scoped lang="scss">
  187. .add-chart-page{
  188. flex:1;
  189. display: flex!important;
  190. flex-direction: column;
  191. *{
  192. margin:0;
  193. }
  194. .top-title-box{
  195. display: flex;
  196. border-bottom:1px solid #dedede;
  197. p:nth-child(1){
  198. flex:1;
  199. margin-left:20px;
  200. color:#0045af;
  201. line-height:80px;
  202. font-size:18px;
  203. }
  204. p:nth-child(2){
  205. margin:20px;
  206. }
  207. }
  208. .bottom-button-p{
  209. display: block;
  210. margin:40px auto;
  211. }
  212. .el-form-item{
  213. margin-top:30px;
  214. }
  215. }
  216. </style>