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.5 KiB

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