You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

single.vue 7.1 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. <template>
  2.   <view class="page">
  3.     <view v-if="ready">
  4.       <l-input
  5.         @input="setValue('StuMail.Title', $event)"
  6.         :value="getValue('StuMail.Title')"
  7.         :disabled="!edit"
  8.         title="主题"
  9.       />
  10.       <l-textarea
  11.         @input="setValue('StuMail.Content', $event)"
  12.         :value="getValue('StuMail.Content')"
  13.         :readonly="!edit"
  14.         title="内容"
  15.       />
  16.       <l-textarea
  17.         @input="setValue('StuMail.ReplyContent', $event)"
  18.         :value="getValue('StuMail.ReplyContent')"
  19.         :readonly="true"
  20.         title="回复内容"
  21.       />
  22.     </view>
  23.   
  24.     <view v-if="ready" class="bg-white margin-tb padding" style="padding-top: 0; overflow: hidden;">
  25.       <l-button v-if="edit" @click="action('save')" size="lg" color="green" class="block margin-top" block>
  26.         提交保存
  27.       </l-button>
  28.       <l-button v-if="!edit && mode !== 'create'" @click="action('edit')" size="lg" line="orange" class="block margin-top" block>
  29.         编辑本页
  30.       </l-button>
  31.       <l-button v-if="edit && mode !== 'create'" @click="action('reset')" size="lg" line="red" class="block margin-top" block>
  32.         取消编辑
  33.       </l-button>
  34.       <l-button v-if="!edit && mode !== 'create'" @click="action('delete')" size="lg" line="red" class="block margin-top" block>
  35.         删除
  36.       </l-button>
  37.     </view>
  38.   </view>
  39. </template>
  40.   
  41.   
  42. <script>
  43. /*
  44.  * 版 本 Learun-ADMS V7.0.3 力软敏捷开发框架(http://www.learun.cn)
  45.  * Copyright (c) 2013-2020 上海力软信息技术有限公司
  46.  * 创建人:超级管理员
  47.  * 日  期:2020-10-14 12:15
  48.  * 描  述:校长信箱
  49.  */
  50.   
  51. /**
  52.  * 本段代码由移动端代码生成器输出,移动端须 2.2.0 版本及以上可以使用
  53.  * 请在移动端 /pages.json 中的 pages 字段中添加一条记录:
  54.  * { "path": "pages/EducationalAdministration/StuMail/single", "style": { "navigationBarTitleText": "表单详情页" } }
  55.  * 
  56.  * (navigationBarTitleText 字段为本页面的标题文本,可以修改)
  57.  * (必须自行操作该步骤,力软代码生成器不会自动帮您修改 /pages.json 文件)
  58.  */
  59.   
  60. import get from 'lodash/get'
  61. import set from 'lodash/set'
  62. import moment from 'moment'
  63. import customPageMixins from '@/common/custompage.js'
  64.   
  65. export default {
  66.   mixins: [customPageMixins],
  67.   
  68.   data() {
  69.     return {
  70.       // 页面相关参数
  71.       id: null,
  72.       mode: null,
  73.       edit: null,
  74.       ready: false,
  75.   
  76.       // 表单数据
  77.       current: {},
  78.       origin: {},
  79.   
  80.       // 表单项数据结构
  81.       scheme: {
  82.         StuMail: {
  83.           Title: { type: 'text', title: '主题' },
  84.           Content: { type: 'textarea', title: '内容' },
  85.           CreateTime: { type: 'datetime', title: '创建时间', dateformat: '0' },
  86.           ReplyTime: { type: 'datetime', title: '回复时间', dateformat: '0' },
  87.           ReplyContent: { type: 'textarea', title: '回复内容' },
  88.         },
  89.   
  90.       },
  91.   
  92.       // 数据源
  93.       dataSource: {
  94.         StuMail: {
  95.         },
  96.   
  97.       }
  98.     }
  99.   },
  100.   
  101.   async onLoad({ type, id }) {
  102.     await this.init(type, id)
  103.   },
  104.   
  105.   methods: {
  106.     // 页面初始化
  107.     async init(type, id) {
  108.       this.LOADING('加载数据中...')
  109.   
  110.       this.id = id
  111.       this.mode = type
  112.       this.edit = ['create', 'edit'].includes(this.mode)
  113.   
  114.       // 拉取表单数据,同时拉取所有来自数据源的选单数据
  115.       await Promise.all([
  116.   
  117.   
  118.         () => {}
  119.       ])
  120.       await this.fetchForm()
  121.   
  122.       this.ready = true
  123.       this.HIDE_LOADING()
  124.     },
  125.   
  126.     // 加载表单数据
  127.     async fetchForm() {
  128.       if (this.mode === 'create') {
  129.         this.origin = await this.getDefaultForm()
  130.       } else {
  131.         const result = await this.HTTP_GET('/EducationalAdministration/StuMail/form', this.id)
  132.         this.origin = await this.formatFormData(result)
  133.       }
  134.       this.current = this.COPY(this.origin)
  135.     },
  136.   
  137.     // 点击 「编辑」、「重置」、「保存」、「删除」 按钮
  138.     async action(type) {
  139.       switch (type) {
  140.         case 'edit':
  141.           this.edit = true
  142.           break
  143.   
  144.         case 'reset':
  145.           this.current = this.COPY(this.origin)
  146.           this.edit = false
  147.           break
  148.   
  149.         case 'save':
  150.           const verifyResult = this.verifyForm()
  151.           if (verifyResult.length > 0) {
  152.             this.CONFIRM('表单验证失败', verifyResult.join('\n'))
  153.             return
  154.           }
  155.   
  156.           if (!(await this.CONFIRM('提交确认', '确定要提交本页表单内容吗?', true))) {
  157.             return
  158.           }
  159.   
  160.           this.LOADING('正在提交...')
  161.           const postData = await this.getPostData(this.id)
  162.   
  163.           this.HTTP_POST('/EducationalAdministration/StuMail/save', postData, '表单提交保存失败').then(success => {
  164.             this.HIDE_LOADING()
  165.             if (!success) {
  166.               return
  167.             }
  168.   
  169.             this.EMIT('EducationalAdministrationStuMail-list-change')
  170.             this.NAV_BACK()
  171.             this.TOAST('提交保存成功')
  172.           })
  173.           break
  174.   
  175.         case 'delete':
  176.           if (!(await this.CONFIRM('删除项目', '确定要删除本项吗?', true))) {
  177.             return
  178.           }
  179.   
  180.           this.LOADING('提交删除中...')
  181.           this.HTTP_POST('/EducationalAdministration/StuMail/delete', this.id, '删除失败').then(success => {
  182.             this.HIDE_LOADING()
  183.             if (!success) {
  184.               return
  185.             }
  186.   
  187.             this.EMIT('EducationalAdministrationStuMail-list-change')
  188.             this.NAV_BACK()
  189.             this.this.TOAST('删除成功', 'success')
  190.           })
  191.           break
  192.   
  193.         default: break
  194.       }
  195.     },
  196.   
  197.     // 获取表单值
  198.     getValue(path) {
  199.       return get(this.current, path)
  200.     },
  201.   
  202.     // 设置表单值
  203.     setValue(path, val) {
  204.       set(this.current, path, val)
  205.     }
  206.   }
  207. }
  208. </script>