|
|
@@ -0,0 +1,400 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="businessMain" :style="'font-size:'+fieldInfo.fontsize+'rpx'">
|
|
|
+
|
|
|
+
|
|
|
+ <view class="businessTitle" v-if="false">{{fieldInfo.title}}</view>
|
|
|
+ <view v-for="(item,i) in fieldList" :key="i" class="oawork-item" :class="getClass(item)">
|
|
|
+ <template v-if="item.type.indexOf('uview')>-1">
|
|
|
+ <view v-if="item.type.indexOf('divider')>-1">
|
|
|
+ <u-divider bg-color="#fff" border-color="#6d6d6d">{{item.text}}</u-divider>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="oawork-item1">
|
|
|
+ <view class="oawork-item1_a">{{item.text}}<span v-if="item.isrequset" style="color:red">*</span>
|
|
|
+ </view>
|
|
|
+ <view class="oawork-item1_b">
|
|
|
+ <template v-if="item.view">
|
|
|
+ {{formData[item.key]?formData[item.key]:getViewItem(item)}}
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <template v-if="item.type.indexOf('text')>-1">
|
|
|
+ <u-input v-model="formData[item.key]" :placeholder="'请输入'+item.text"
|
|
|
+ :placeholderStyle="placeholderStyle" class="oawork-line"
|
|
|
+ :customStyle="{textAlign: 'right'}" />
|
|
|
+
|
|
|
+
|
|
|
+ </template>
|
|
|
+ <template v-if="item.type.indexOf('textnumber')>-1">
|
|
|
+ <u-input v-model="formData[item.key]" type="number" :placeholder="'请输入'+item.text"
|
|
|
+ :placeholderStyle="placeholderStyle" class="oawork-line"
|
|
|
+ :customStyle="{textAlign: 'right'}" />
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="item.type.indexOf('radio')>-1">
|
|
|
+
|
|
|
+ <u-radio-group v-model="formData[item.key]">
|
|
|
+ <u-radio v-for="(item, index) in item.list?item.list:radioListDefault"
|
|
|
+ :key="index" :name="item.value">
|
|
|
+ {{item.name}}
|
|
|
+ </u-radio>
|
|
|
+ </u-radio-group>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ <template v-if="item.type.indexOf('selecttime')>-1">
|
|
|
+
|
|
|
+ <u-calendar max-date="2060-01-01" v-model="showCalendar" mode="date"
|
|
|
+ @change="changeCalendar"></u-calendar>
|
|
|
+ <view @click="showCalendar = true,keyCalendar=item">
|
|
|
+ {{formData[item.key]?formData[item.key]:getViewItem(item)}}</view>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ <template v-if="item.type.indexOf('selecttime2')>-1">
|
|
|
+
|
|
|
+ <u-calendar max-date="2060-01-01" v-model="showCalendar" mode="range"
|
|
|
+ @change="changeCalendar2"></u-calendar>
|
|
|
+ <view @click="showCalendar = true,keyCalendar=item">
|
|
|
+ {{formData[item.key]?formData[item.key]:createTime}}至{{formData[item.key2]?formData[item.key2]:createTime}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="oawork-item1_c" v-if="item.type.indexOf('unit')>-1">
|
|
|
+ {{item.unit}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="oawork-item2">
|
|
|
+
|
|
|
+ <template v-if="item.type.indexOf('textlong')>-1">
|
|
|
+ <u-input v-model="formData[item.key]" :placeholder="'请输入'+item.text"
|
|
|
+ :placeholderStyle="placeholderStyle" class="oawork-line" type="textarea" />
|
|
|
+
|
|
|
+ </template>
|
|
|
+ <template v-if="item.type.indexOf('upload')>-1">
|
|
|
+ <view class="upload">
|
|
|
+
|
|
|
+ <u-upload-file-all ref="uUpload" :max-size="50 * 1024 * 1024"
|
|
|
+ :file-max-size="50 * 1024 * 1024" :maxCount="9"
|
|
|
+ :file-list="fileList"></u-upload-file-all>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.type.indexOf('texteditor')>-1">
|
|
|
+ <view class="container">
|
|
|
+ <view class="page-body">
|
|
|
+ <view class='wrapper'>
|
|
|
+ <view class='toolbar' @tap="format" style="overflow-y: auto;">
|
|
|
+ <view :class="formats.bold ? 'ql-active' : ''"
|
|
|
+ class="iconfont icon-zitijiacu" data-name="bold"></view>
|
|
|
+ <view :class="formats.italic ? 'ql-active' : ''"
|
|
|
+ class="iconfont icon-zitixieti" data-name="italic"></view>
|
|
|
+ <view :class="formats.underline ? 'ql-active' : ''"
|
|
|
+ class="iconfont icon-zitixiahuaxian" data-name="underline"></view>
|
|
|
+ <view :class="formats.strike ? 'ql-active' : ''"
|
|
|
+ class="iconfont icon-zitishanchuxian" data-name="strike"></view>
|
|
|
+
|
|
|
+ <view :class="formats.align === 'center' ? 'ql-active' : ''"
|
|
|
+ class="iconfont icon-juzhongduiqi" data-name="align"
|
|
|
+ data-value="center"></view>
|
|
|
+ <view :class="formats.align === 'right' ? 'ql-active' : ''"
|
|
|
+ class="iconfont icon-youduiqi" data-name="align" data-value="right">
|
|
|
+ </view>
|
|
|
+ <view :class="formats.align === 'justify' ? 'ql-active' : ''"
|
|
|
+ class="iconfont icon-zuoyouduiqi" data-name="align"
|
|
|
+ data-value="justify"></view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
|
|
|
+
|
|
|
+
|
|
|
+ <view :class="formats.color === '#0000ff' ? 'ql-active' : ''"
|
|
|
+ class="iconfont icon-text_color" data-name="color" data-value="#0000ff">
|
|
|
+ </view>
|
|
|
+ <view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
|
|
|
+ class="iconfont icon-fontbgcolor" data-name="backgroundColor"
|
|
|
+ data-value="#00ff00"></view>
|
|
|
+ <view class="iconfont icon-date" @tap="insertDate"></view>
|
|
|
+ <view class="iconfont icon--checklist" data-name="list" data-value="check">
|
|
|
+ </view>
|
|
|
+ <view :class="formats.list === 'ordered' ? 'ql-active' : ''"
|
|
|
+ class="iconfont icon-youxupailie" data-name="list" data-value="ordered">
|
|
|
+ </view>
|
|
|
+ <view :class="formats.list === 'bullet' ? 'ql-active' : ''"
|
|
|
+ class="iconfont icon-wuxupailie" data-name="list" data-value="bullet">
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="iconfont icon-undo" @tap="undo"></view>
|
|
|
+ <view class="iconfont icon-redo" @tap="redo"></view>
|
|
|
+
|
|
|
+ <view class="iconfont icon-outdent" data-name="indent" data-value="-1">
|
|
|
+ </view>
|
|
|
+ <view class="iconfont icon-indent" data-name="indent" data-value="+1">
|
|
|
+ </view>
|
|
|
+ <view class="iconfont icon-fengexian" @tap="insertDivider"></view>
|
|
|
+ <view class="iconfont icon-charutupian" @tap="insertImage"></view>
|
|
|
+ <view :class="formats.header === 1 ? 'ql-active' : ''"
|
|
|
+ class="iconfont icon-format-header-1" data-name="header"
|
|
|
+ :data-value="1"></view>
|
|
|
+ <view :class="formats.script === 'sub' ? 'ql-active' : ''"
|
|
|
+ class="iconfont icon-zitixiabiao" data-name="script" data-value="sub">
|
|
|
+ </view>
|
|
|
+ <view :class="formats.script === 'super' ? 'ql-active' : ''"
|
|
|
+ class="iconfont icon-zitishangbiao" data-name="script"
|
|
|
+ data-value="super"></view>
|
|
|
+
|
|
|
+ <view class="iconfont icon-shanchu" @tap="clear"></view>
|
|
|
+
|
|
|
+ <view :class="formats.direction === 'rtl' ? 'ql-active' : ''"
|
|
|
+ class="iconfont icon-direction-rtl" data-name="direction"
|
|
|
+ data-value="rtl"></view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="editor-wrapper">
|
|
|
+ <editor id="editor" class="ql-container" placeholder="开始输入..." show-img-size
|
|
|
+ show-img-toolbar show-img-resize @statuschange="onStatusChange"
|
|
|
+ :read-only="readOnly" @ready="onEditorReady">
|
|
|
+ </editor>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name:"ApproveInfo",
|
|
|
+ props:{
|
|
|
+ fieldInfo: {},
|
|
|
+ personInfo: {},
|
|
|
+ createTime: "",
|
|
|
+ createTime2: "",
|
|
|
+ fileList:{
|
|
|
+ type: Array,
|
|
|
+ default () {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formData: {},
|
|
|
+ placeholderStyle: "font-size: 24rpx",
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ fieldInfo: {
|
|
|
+ immediate: true,
|
|
|
+ handler(val) {
|
|
|
+ console.log("fieldList",val)
|
|
|
+ if(val){
|
|
|
+ this.fieldList=val.list
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 监听lists的变化，发出事件
|
|
|
+ lists(n) {
|
|
|
+ this.$emit('on-list-change', n, this.index);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fieldList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ //this.init()
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ init() {
|
|
|
+ // this.personInfo = this.carhelp.getPersonInfo()
|
|
|
+ // this.createTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
|
|
|
+ // this.createTime2 = parseUnixTime(currentTimeStamp());
|
|
|
+
|
|
|
+ for (var i in this.fieldList) {
|
|
|
+ var obj = this.fieldList[i];
|
|
|
+ this.formData[obj.key] = ""
|
|
|
+ }
|
|
|
+
|
|
|
+ //this.action = process.car.BASE_URL + "uploadPicture"
|
|
|
+
|
|
|
+ //this.uploadData.subFolder = "oawork11" + this.oatype;
|
|
|
+ //接口应该免登陆
|
|
|
+ var token = this.carhelp.getToken()
|
|
|
+
|
|
|
+ this.header = {
|
|
|
+ 'Authorization': token
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getViewItem(item) {
|
|
|
+ console.log(item)
|
|
|
+ if (item.viewSql) {
|
|
|
+ var obj = this;
|
|
|
+ for (var i in item.viewSql) {
|
|
|
+ var k = item.viewSql[i];
|
|
|
+ console.log(k)
|
|
|
+ obj = obj[k]
|
|
|
+ }
|
|
|
+ return obj;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getClass(item) {
|
|
|
+
|
|
|
+ if (item) {
|
|
|
+ var list = item.type.map(it => {
|
|
|
+ return 'oawork-' + it
|
|
|
+ })
|
|
|
+ return list.join(' ')
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.oawork-line {
|
|
|
+ border-bottom: 1px solid #c8c8c8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oawork-paddingTop {
|
|
|
+ padding-top: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .businessMain {
|
|
|
+ /deep/.uni-input-input {
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+ background: #fff;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ padding-bottom: 50rpx;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .oawork-item {
|
|
|
+ padding: 4rpx 16rpx 4rpx 16rpx;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .oawork-item1 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .oawork-item1_a {
|
|
|
+ min-width: 160rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oawork-item1_b {
|
|
|
+ color: #777777;
|
|
|
+ width: 100%;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oawork-item1_c {
|
|
|
+ padding-left: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .oawork-selecttime,
|
|
|
+ .oawork-selecttime2 {
|
|
|
+ margin: 10rpx 0;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .oawork-item1 {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oawork-item1_b {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ height: 100%;
|
|
|
+ border-bottom: 1px solid #c8c8c8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .oawork-itemrow {
|
|
|
+ .oawork-item1_a {
|
|
|
+ font-weight: 400 !important;
|
|
|
+ width: 200%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .oawork-textlong {
|
|
|
+ .oawork-item1_a {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .oawork-title {
|
|
|
+ padding: 20rpx 0px 4rpx 20rpx;
|
|
|
+
|
|
|
+ .oawork-item1_a {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .width200 {
|
|
|
+
|
|
|
+ // padding:20rpx 0px 4rpx 20rpx;
|
|
|
+ .oawork-item1_a {}
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.oawork-width49 {
|
|
|
+ padding: 4rpx 0px 4rpx 20rpx;
|
|
|
+ width: 49%;
|
|
|
+
|
|
|
+ .oawork-item1_a {
|
|
|
+ min-width: 140rpx !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .submitBtn {
|
|
|
+ bottom: 0;
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ padding: 20rpx 40rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-top: 3px solid #f3f4f4;
|
|
|
+ z-index: 9999;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .submitBtn30 {
|
|
|
+ width: 30%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .submitBtn60 {
|
|
|
+ width: 60%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //@import "../data/editor-icon.css";
|
|
|
+</style>
|
zhengkaixin