11

src/views/activiti/form/cdLeaveForm.vue

@@ -2,56 +2,81 @@
   <div class="form-main">
     <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
       <a-form @submit="handleSubmit" :form="form">
-
-        <a-form-item label="请假类型"
-                     :labelCol="{lg: {span: 7}, sm: {span: 7}}"
-                     :wrapperCol="{lg: {span: 10}, sm: {span: 17} }" >
-          <a-select :disabled="disabled" show-search v-decorator="[
+        <a-form-item
+          label="请假类型"
+          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
+        >
+          <a-select
+            :disabled="disabled"
+            show-search
+            v-decorator="[
             'type',
             {rules: [{ required: true, message: '请选择类型' }]}
-          ]">
-            <a-select-option v-for="d in typeData" :key="d.value">
-              {{ d.text }}
-            </a-select-option>
+          ]"
+          >
+            <a-select-option v-for="d in typeData" :key="d.value">{{ d.text }}</a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item label="开始时间"
-                     :labelCol="{lg: {span: 7}, sm: {span: 7}}"
-                     :wrapperCol="{lg: {span: 10}, sm: {span: 17} }" >
-          <a-date-picker :disabled="disabled" v-decorator="['start_time',{rules: [{ type: 'object',required: true, message: '请选择开始时间' }]}]" show-time format="YYYY-MM-DD HH:mm:ss" @change="startOnChange"/>
+        <a-form-item
+          label="开始时间"
+          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
+        >
+          <a-date-picker
+            :disabled="disabled"
+            v-decorator="['start_time',{rules: [{ type: 'object',required: true, message: '请选择开始时间' }]}]"
+            show-time
+            format="YYYY-MM-DD HH:mm:ss"
+            @change="startOnChange"
+          />
         </a-form-item>
-        <a-form-item label="结束时间"
-                     :labelCol="{lg: {span: 7}, sm: {span: 7}}"
-                     :wrapperCol="{lg: {span: 10}, sm: {span: 17} }" >
-          <a-date-picker :disabled="disabled" v-decorator="['end_time',{rules: [{ type: 'object',required: true, message: '请选择结束时间' }]}]" show-time format="YYYY-MM-DD HH:mm:ss" @change="endOnChange"/>
+        <a-form-item
+          label="结束时间"
+          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
+        >
+          <a-date-picker
+            :disabled="disabled"
+            v-decorator="['end_time',{rules: [{ type: 'object',required: true, message: '请选择结束时间' }]}]"
+            show-time
+            format="YYYY-MM-DD HH:mm:ss"
+            @change="endOnChange"
+          />
         </a-form-item>
         <a-form-item
           label="时长(小时)"
           :labelCol="{lg: {span: 7}, sm: {span: 7}}"
-          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
-          <a-input :disabled="disabled"
-                   v-decorator="[
+          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
+        >
+          <a-input
+            :disabled="disabled"
+            v-decorator="[
             'duration',
             {rules: [{ required: true, message: '请输入时长' }]}
           ]"
-                   name="duration"/>
+            name="duration"
+          />
         </a-form-item>
         <a-form-item
           label="请假事由"
           :labelCol="{lg: {span: 7}, sm: {span: 7}}"
-          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
-          <a-textarea :disabled="disabled" v-decorator="['reason',{rules: [{ required: true, message: '请输入请假事由' }]}]"
-                      :auto-size="{ minRows: 3, maxRows: 5 }">
-
-          </a-textarea>
+          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
+        >
+          <a-textarea
+            :disabled="disabled"
+            v-decorator="['reason',{rules: [{ required: true, message: '请输入请假事由' }]}]"
+            :auto-size="{ minRows: 3, maxRows: 5 }"
+          ></a-textarea>
         </a-form-item>
         <a-form-item
           label="图片"
           :labelCol="{lg: {span: 7}, sm: {span: 7}}"
-          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
+        >
           <div class="clearfix">
             <a-upload
-              action="/sys/common/uploadFile"
+              action="/jeecg-boot/sys/common/uploadFile"
               list-type="picture-card"
               :file-list="fileList"
               @preview="handlePreview"
@@ -59,9 +84,7 @@
             >
               <div v-if="fileList.length < 8">
                 <a-icon type="plus" />
-                <div class="ant-upload-text">
-                  Upload
-                </div>
+                <div class="ant-upload-text">上传</div>
               </div>
             </a-upload>
             <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
@@ -70,11 +93,13 @@
           </div>
         </a-form-item>
 
-        <a-form-item v-if="!disabled"
-                     :wrapperCol="{ span: 24 }"
-                     style="text-align: center"
-        >
-          <a-button htmlType="submit" type="primary" :disabled="disabled||btndisabled" @click="handleSubmit">保存</a-button>
+        <a-form-item v-if="!disabled" :wrapperCol="{ span: 24 }" style="text-align: center">
+          <a-button
+            htmlType="submit"
+            type="primary"
+            :disabled="disabled||btndisabled"
+            @click="handleSubmit"
+          >保存</a-button>
           <a-button style="margin-left: 8px" :disabled="disabled" @click="close">取消</a-button>
         </a-form-item>
       </a-form>
@@ -82,260 +107,285 @@
   </div>
 </template>
 <script>
-  import pick from "lodash.pick";
-  import moment from "moment";
-  import "moment/locale/zh-cn";
+import pick from 'lodash.pick'
+import moment from 'moment'
+import 'moment/locale/zh-cn'
+import qs from 'qs'
 
-  export default {
-    name: 'demoForm',
-    props:{
-      /*全局禁用，可表示查看*/
-      disabled:{
-        type:Boolean,
-        default:false,
-        required:false
+export default {
+  name: 'demoForm',
+  props: {
+    /*全局禁用，可表示查看*/
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    /*流程数据*/
+    processData: {
+      type: Object,
+      default: () => {
+        return {}
       },
-      /*流程数据*/
-      processData:{
-        type:Object,
-        default:()=>{return {}},
-      required:false
+      required: false
     },
     /*是否新增*/
-    isNew: {type: Boolean, default: false, required: false}
+    isNew: { type: Boolean, default: false, required: false }
   },
-  data () {
+  data() {
     return {
-      url:{
-        getForm:'/actBusiness/getForm',
-        addApply:'/actBusiness/add',
-        editForm:'/actBusiness/editForm',
-        leaveType:'/sys//dict/getDictItems'
+      url: {
+        getForm: '/actBusiness/getForm',
+        addApply: '/actBusiness/add',
+        editForm: '/actBusiness/editForm',
+        leaveType: '/sys//dict/getDictItems'
       },
       description: '流程表单demo，按例开发表单。需在 activitiMixin.js 中加入写好的表单',
       // form
       form: this.$form.createForm(this),
       /*表单回显数据*/
-      data:{},
+      data: {},
       btndisabled: false,
       // disabled:false,
-      typeData: [{value:"1",text:"事假"},{value:"2",text:"病假"}],
+      typeData: [
+        { value: '1', text: '事假' },
+        { value: '2', text: '病假' }
+      ],
       previewVisible: false,
       previewImage: '',
       fileList: [
-        {
-          uid: '-1',
-          name: 'image.png',
-          status: 'done',
-          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-        },
-        {
-          uid: '-2',
-          name: 'image.png',
-          status: 'done',
-          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-        },
-        {
-          uid: '-3',
-          name: 'image.png',
-          status: 'done',
-          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-        },
-        {
-          uid: '-4',
-          name: 'image.png',
-          status: 'done',
-          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-        },
-        {
-          uid: '-5',
-          name: 'image.png',
-          status: 'error',
-        },
-      ],
+      ]
     }
   },
   created() {
-    console.log("流程数据",this.processData)
+    console.log('流程数据', this.processData)
     //获取请假类型下拉数据
-    this.getAction(this.url.leaveType+"/leave_type").then((res)=>{
-      if (res.success)
-      {
-        this.typeData=res.result
-      }else{
+    this.getAction(this.url.leaveType + '/leave_type').then(res => {
+      if (res.success) {
+        this.typeData = res.result
+      } else {
         this.$message.error(res.message)
       }
     })
 
-    if (!this.isNew){
+    if (!this.isNew) {
       // this.disabled=true;
-      this.init();
-    }else{
+      this.init()
+    } else {
       // this.btndisabled = false;
       // this.disabled=false;
     }
   },
   methods: {
     /*回显数据*/
-    init(){
-      this.btndisabled = true;
+    init() {
+      this.btndisabled = true
 
-      var r = this.processData;
+      var r = this.processData
       // if(!r.tableId){
       //   return;
       // }
-      this.getAction(this.url.getForm,{
-        tableId:r.tableId,
-        tableName:r.tableName,
-      }).then((res)=>{
-        if (res.success){
-        let formData = res.result;
-        formData.tableName = r.tableName;
-        this.data = formData;
-        console.log("表单回显数据",this.data)
-        this.$nextTick(() => {
-          // this.form.setFieldsValue(pick(this.data,'type'))
-        console.log("表单回显数据",this.data.start_time)
-        this.form.setFieldsValue({
-          'type':this.data.type,
-          'start_time':moment(this.data.start_time),
-          'end_time':moment(this.data.end_time),
-          'duration':this.data.duration,
-          'reason':this.data.reason
-        })
-        // this.form.setFieldsValue(moment(this.data.end_time,'end_time'))
-      });
-        this.btndisabled = false;
-      }else {
-        this.$message.error(res.message)
-      }
-    })
+      this.getAction(this.url.getForm, {
+        tableId: r.tableId,
+        tableName: r.tableName
+      }).then(res => {
+        if (res.success) {
+          let formData = res.result
+          formData.tableName = r.tableName
+          this.data = formData
+          console.log('表单回显数据', this.data)
+          this.$nextTick(() => {
+            // this.form.setFieldsValue(pick(this.data,'type'))
+            console.log('表单回显数据', this.data.start_time)
+            this.form.setFieldsValue({
+              type: this.data.type,
+              start_time: moment(this.data.start_time),
+              end_time: moment(this.data.end_time),
+              duration: this.data.duration,
+              reason: this.data.reason
+            })
+            // this.form.setFieldsValue(moment(this.data.end_time,'end_time'))
+          })
+          this.btndisabled = false
+        } else {
+          this.$message.error(res.message)
+        }
+      })
     },
     // handler
-    handleSubmit (e) {
+    handleSubmit(e) {
       e.preventDefault()
       this.form.validateFields((err, values) => {
         if (!err) {
+          let formData = Object.assign(this.data || {}, values)
 
-
-        let formData = Object.assign(this.data||{}, values)
-
-        formData.procDefId = this.processData.id;
-        formData.procDeTitle = this.processData.name;
-        if (!formData.tableName)formData.tableName = this.processData.businessTable;
-        formData.filedNames = _.keys(values).join(",");
-
-        console.log('formData', values)
-        formData.start_time=formatDate(formData.start_time._d,"yyyy-MM-dd hh:mm:ss");
-        formData.end_time=formatDate(formData.end_time._d,"yyyy-MM-dd hh:mm:ss");
-        var url = this.url.addApply;
-        if (!this.isNew){
-          url = this.url.editForm;
+          formData.procDefId = this.processData.id
+          formData.procDeTitle = this.processData.name
+          if (!formData.tableName) formData.tableName = this.processData.businessTable
+          formData.filedNames = _.keys(values).join(',')
+          formData.start_time = formatDate(formData.start_time._d, 'yyyy-MM-dd hh:mm:ss')
+          formData.end_time = formatDate(formData.end_time._d, 'yyyy-MM-dd hh:mm:ss')
+          var url = this.url.addApply
+          if (!this.isNew) {
+            url = this.url.editForm
+          }
+          //获取文件集合
+          formData.tableNameB="cd_leave_file";//子表表名
+          formData.childList="";//子表数据
+          let childList=[];
+          if (this.fileList != null && this.fileList.length > 0) {
+            this.fileList.forEach(element => {
+              childList.push({fileUrl: element.response.message})
+            })
+            formData.filedNamesB= _.keys(childList[0]).join(',')//子表字段名
+          }
+          // childList=[1,2]
+          formData.childList=JSON.stringify(childList);
+          this.btndisabled = true
+          this.postFormAction(url, formData)
+            .then(res => {
+              if (res.success) {
+                this.$message.success('保存成功！')
+                this.$emit('afterSubmit', formData)
+              } else {
+                this.$message.error(res.message)
+              }
+            })
+            .finally(() => {
+              this.btndisabled = false
+            })
         }
-        this.btndisabled = true;
-        this.postFormAction(url,formData).then((res)=>{
-          if (res.success){
-          this.$message.success("保存成功！")
-          this.$emit('afterSubmit',formData)
-        }else {
-          this.$message.error(res.message)
-        }
-      }).finally(()=>{
-          this.btndisabled = false;
       })
-      }
-    })
     },
     close() {
       this.$emit('close')
     },
     //开始时间触发事件
-    startOnChange(date,dateString){
-      if(this.form.getFieldValue("end_time")){
+    startOnChange(date, dateString) {
+      if (this.form.getFieldValue('end_time')) {
         //获取时间差
-        let duration=startEndFun(dateString,formatDate(this.form.getFieldValue("end_time")._d,"yyyy-MM-dd hh:mm:ss"));
-        if(duration){
+        let duration = startEndFun(
+          dateString,
+          formatDate(this.form.getFieldValue('end_time')._d, 'yyyy-MM-dd hh:mm:ss')
+        )
+        if (duration) {
           //赋值时长
-          this.form.setFieldsValue({duration:duration})
+          this.form.setFieldsValue({ duration: duration })
         }
       }
     },
     //结束事件触发事件
-    endOnChange(date,dateString){
-      if(this.form.getFieldValue("start_time")){
+    endOnChange(date, dateString) {
+      if (this.form.getFieldValue('start_time')) {
         //获取时间差
-        let duration=startEndFun(formatDate(this.form.getFieldValue("start_time")._d,"yyyy-MM-dd hh:mm:ss"),dateString);
-        if(duration){
+        let duration = startEndFun(
+          formatDate(this.form.getFieldValue('start_time')._d, 'yyyy-MM-dd hh:mm:ss'),
+          dateString
+        )
+        if (duration) {
           //赋值时长
-          this.form.setFieldsValue({duration:duration})
+          this.form.setFieldsValue({ duration: duration })
         }
       }
     },
+    //文件控件处理
     handleCancel() {
-      this.previewVisible = false;
+      this.previewVisible = false
     },
     async handlePreview(file) {
       if (!file.url && !file.preview) {
-        file.preview = await getBase64(file.originFileObj);
+        file.preview = await getBase64(file.originFileObj)
       }
-      this.previewImage = file.url || file.preview;
-      this.previewVisible = true;
+      this.previewImage = file.url || file.preview
+      this.previewVisible = true
     },
+    //选择文件确定事件
     handleChange({ fileList }) {
-      this.fileList = fileList;
+      console.log(fileList)
+      this.fileList = fileList
     },
-
+    //详情修改查看
+    getFileLise() {
+      //文件集合不为空则显示文件下载
+      if (this.fileList && this.fileList != null && this.fileList.length > 0) {
+        this.fileList.forEach((element, index) => {
+          const fileName = this.setAppendix(element)
+          ;(element.uid = '-1'),
+            (element.uid = index + 1),
+            (element.name = fileName),
+            (element.status = 'done'),
+            (element.url = environment.SERVER_URL + 'sys/common/downloadFile/' + element.fileUrl)
+          element.response = { message: element.fileUrl }
+        })
+      }
+    }
   }
+}
+
+//根据开始时间 结束时间计算天数
+function startEndFun(start, end) {
+  if (start && end) {
+    let startTime = new Date(start) // 开始时间
+    let endTime = new Date(end) // 结束时间
+    let usedTime = endTime - startTime // 相差的毫秒数
+    let days = (usedTime / 1000 / 60 / 60).toFixed(2) // 计算出天数
+    return days
+  } else {
+    return null
   }
+}
 
-  //根据开始时间 结束时间计算天数
-  function startEndFun(start,end) {
-    if(start&&end){
-      let startTime = new Date(start); // 开始时间
-      let endTime = new Date(end); // 结束时间
-      let usedTime = endTime - startTime; // 相差的毫秒数
-      let days = (usedTime / 1000 / 60 / 60).toFixed(2); // 计算出天数
-      return days;
-    }else{
-      return null;
+//格式化时间
+function formatDate(date, fmt) {
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+  }
+  let o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds()
+  }
+  for (let k in o) {
+    if (new RegExp(`(${k})`).test(fmt)) {
+      let str = o[k] + ''
+      fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str))
     }
   }
+  return fmt
+}
 
-  //格式化时间
-  function formatDate(date, fmt) {
-    if (/(y+)/.test(fmt)) {
-      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
-    }
-    let o = {
-      'M+': date.getMonth() + 1,
-      'd+': date.getDate(),
-      'h+': date.getHours(),
-      'm+': date.getMinutes(),
-      's+': date.getSeconds()
-    };
-    for (let k in o) {
-      if (new RegExp(`(${k})`).test(fmt)) {
-        let str = o[k] + '';
-        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
-      }
-    }
-    return fmt;
-  };
+function padLeftZero(str) {
+  return ('00' + str).substr(str.length)
+}
 
-  function padLeftZero(str) {
-    return ('00' + str).substr(str.length);
-  }
+function getBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onload = () => resolve(reader.result)
+    reader.onerror = error => reject(error)
+  })
+}
 
-  function getBase64(file) {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = () => resolve(reader.result);
-    reader.onerror = error => reject(error);
-  });
+//显示路径
+function setAppendix(file) {
+  const url = file.fileUrl
+  if (url != null && url !== '') {
+    const idx = url.lastIndexOf('/')
+    const fileUrl = url.slice(idx + 1)
+    const index = fileUrl.lastIndexOf('_')
+    const i = fileUrl.lastIndexOf('.')
+    const fileName = fileUrl.substring(0, index)
+    const fileSuffix = fileUrl.slice(i + 1)
+    const f = fileName + '.' + fileSuffix
+    return f
   }
+  return ''
+}
 </script>
 <style lang="less" scoped>
-  .form-main{
-  }
+.form-main {
+}
 </style>