📖 File Reader
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../../extend/adminCreate/form/static/js/jquery.min.js"></script>
<script src="../../extend/adminCreate/form/static/js/vue.min.js"></script>
<link href="../../extend/adminCreate/form/static/css/iview.css" rel="stylesheet">
<script src="../../extend/adminCreate/form/static/js/iview.min.js"></script>
<script src="../../extend/adminCreate/form/static/layer/layer.js"></script>
<!--富文本引入-->
<link href="../../extend/adminCreate/form/static/bootcss/css/bootstrap.css" rel="stylesheet">
<script src="../../extend/adminCreate/form/static/bootcss/js/bootstrap.js"></script>
<link href="../../extend/adminCreate/form/static/editor/summernote.css" rel="stylesheet">
<script src="../../extend/adminCreate/form/static/editor/summernote.js"></script>
<!--自定义样式-->
<link href="../../extend/adminCreate/form/static/css/iview_exclusive.css" rel="stylesheet"/>
</head>
<style>
.demo-upload-list {display: flex;align-items: center;justify-content: center;width: 60px;height: 60px;text-align: center;line-height: 60px;border: 1px solid transparent;border-radius: 4px;overflow: hidden;background: #fff;position: relative;}
.demo-upload-list img {width: 100%;height: 100%;}
.demo-upload-list-cover {display: none;position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, .6);}
.demo-upload-list:hover .demo-upload-list-cover {display: block;}
.demo-upload-list-cover i {color: #fff;font-size: 20px;cursor: pointer;margin: 0 2px;}
.form {padding: 15px;}
.orange {background: orange !important;border: 1px solid orange;}
.red {background: red !important;border: 1px solid red;}
.ivu-modal-fullscreen-no-header .ivu-modal-body {right: 30px !important;top: -15px;width: calc(100% - 30px)}
.note-popover .popover-content, .panel-heading.note-toolbar{position: relative!important;}
/*选项卡*/
.tab_form{position: fixed;width: 100%;left: 0;top: 0;z-index: 999;background: #ffffff;padding-top: 14px;}
/*隐藏原表单验证红色提示框*/
.ivu-form-item-error .ivu-input {
border: 1px solid #dcdee2 !important
}
</style>
<body>
<div id="vue">
<template>
<i-form class="form" ref="model" :model="model" :show-message='false' :label-position="position" :label-width="position=='top'?false:150">
<!--选项卡-->
<div class="tab_form" v-if="Tabs.length">
<Tabs @on-click="(event) => {Tabs_click(event)}" style="margin: auto;width: 96%">
<Tab-Pane :label="val.title" :icon="val.icon" :name="val.name" v-for="(val,item) in Tabs"></Tab-Pane>
</Tabs>
</div>
<row :gutter="24" :style="Tabs.length==0?'':'padding-top: 70px;'">
<i-Col v-for="(v,index) in data" :span="is_mobile?'24':v.col" v-show="is_tabs ? v.tabs == is_tabs && v.is_show : v.is_show">
<!--禁用浏览器select搜索第一个显示保存的账号密码-->
<input type='text' style='display:none'>
<input type='text' autocomplete='off' style="display:none;"/>
<input type='password' autocomplete='new-password' style="display:none;"/>
<!--标题提示框-->
<blockquote class="layui-elem-quote" v-if="v.formType==='tips'" style="margin-bottom: 10px;padding: 10px;line-height: 1.2;border-left: 5px solid #16b777;
border-radius: 0 2px 2px 0;background-color: #f9f9f9;" :style="{'font-size':v.size,'color':v.color}">
{{v.field}}
</blockquote>
<!--警告提示框-->
<Alert v-if="v.formType === 'tips_warning'" type="warning" show-icon>
{{v.title}}
<template #desc>
{{v.value}}
</template>
</Alert>
<!--分行符-->
<hr class="layui-border-black" v-if="v.formType === 'hr'" style="margin-top: 5px;">
<!--表单信息-->
<Form-item :label="v.title" type='size' :prop="v.field" :rules="v.rules" v-if="v.field != ''">
<!--动态输入框-->
<block v-if="v.formType == 'input' && v.type == 'add'">
<Row v-for="(iv,ik) in model[v.field]" :gutter="24" v-if="v.formType == 'input' && v.type == 'add' && model[v.field]">
<i-Col span="is_mobile?'20':v.col">
<i-Input type="text" v-if="v.tab_type == 'input'" v-model="model[v.field][ik]" :placeholder="v.placeholder"></i-Input>
<date-picker v-else-if="v.tab_type == 'datetime'"
transfer
style="width: 100%"
:type="v.tab_type"
v-model="model[v.field][ik]"
:format="v.format"
:placeholder="v.placeholder"
@on-change="(event) => {add_change_time(event, v.field,ik,'value')}"
>
</date-picker>
</i-Col>
<i-Col span="4">
<i-Button @click="handle_Add(v)" icon="md-add" v-if='ik == 0'></i-Button>
<i-Button @click="handle_Remove(v,ik)" icon="md-remove" v-if='ik != 0'></i-Button>
</i-Col>
</Row>
</block>
<!--余额-->
<i-Input v-model="model[v.field]" v-if="v.formType == 'select_number'" :placeholder="v.placeholder">
<template #prepend>
<i-Select v-model="model[v.select]" style="width: auto">
<i-Option value="+">增加</i-Option>
<i-Option value="-">减少</i-Option>
</i-Select>
</template>
<template #append v-if="v.annotation">
{{v.annotation}}
</template>
</i-Input>
<!--时间日期-->
<date-picker v-if="v.formType==='date'"
transfer
style="width: 100%"
:type="v.type"
v-model="model[v.field]"
:format="v.format"
:placeholder="v.placeholder"
:disabled="v.disabled"
:clearable="v.clearable"
@on-change="(event) => {change_time(event, v.field)}"
>
</date-picker>
<!--下拉-->
<i-select v-if="v.formType==='select'"
v-model="model[v.field]"
:multiple="v.multiple"
:disabled="v.disabled"
:clearable="v.clearable"
:filterable="v.filterable"
:size="v.size"
:remote-method="v.url?(query)=>{remote_select(query,v)}:''"
:loading="v.loading"
:placeholder="v.placeholder"
@on-change="(event) => {change_show_model(event, v.field)}">
<i-option v-for="vv in v.options" :value="vv.value+''" :key="vv.value+''" :disabled="vv.disabled">
<img :src="vv.img" style="width: 30px;height: 30px;margin-right: 10px" v-if="vv.img"
onmouseover="bigImg(this.src,this.id)"
onmouseout="bigImg('')"
:id="vv.value">{{vv.label.trim()}}</i-option>
</i-select>
<!--地区联动-->
<Cascader v-if="v.formType==='cascader'"
:data="v.options"
:disabled="v.disabled"
:clearable="v.clearable"
:filterable="v.filterable"
:placeholder="v.placeholder"
:trigger="v.trigger"
:change-on-select="v.changeonselect"
:loading="v.loading"
v-model="model[v.field]"
@on-change="(event) => {change_model(event, v.field)}">
</Cascader>
<!--颜色选择-->
<Color-Picker transfer v-model="model[v.field]" v-if="v.formType==='color'"/></Color-Picker>
<!--文本编辑器-->
<textarea :id="v.field" :placeholder="v.placeholder" v-if="v.formType==='editor'" class='editor'>{{model[v.field]}}</textarea>
<!--图片上传-->
<div v-if="v.formType==='upload'" style="display: flex;flex-wrap: wrap;">
<Upload :ref="v.field"
v-show="model[v.field].length < v.maxLength"
:max-length="v.maxLength"
:show-upload-list="false"
:on-success="handleSuccess"
:format="v.format"
:max-size="v.maxSize"
:on-format-error="handleFormatError"
:before-upload="(item)=>{return handleBeforeUpload(item,v)}"
:multiple="v.nultiple"
:accept="v.format"
:type="v.type"
:action="v.action"
:name="v.file_name"
:on-progress="(event, file)=>{handleProgress(event, file, v.field,0)}"
style="display: inline-block;width:auto;margin-right:4px;">
<div :style="'width: 58px;height:58px;line-height: 58px;'">
<Icon v-if="v.fileType === 'image'" type="ios-camera" size="20"></Icon>
<Icon v-else-if="v.fileType === 'mp4'" type="md-arrow-dropright-circle" size="20"></Icon>
<Icon v-else type="ios-paper" size="20"></Icon>
</div>
</Upload>
<div class="demo-upload-list" v-for="(item,key) in model[v.field]" style="border: 1px dashed #dcdee2;margin-right:4px;">
<template v-if="item.status === 'finished'">
<img v-if="item.leixing === 'image'" :src="item.url" style="width:100%;height:100%">
<video v-if="item.leixing === 'mp4'" :src="item.url" style="width:100%;height:100%"></video>
<img v-if="item.leixing === 'mp3'" src="../../extend/adminCreate/form/static/img/mp3.png" style="width:30px;height:30px">
<img v-if="item.leixing === 'zip'" src="../../extend/adminCreate/form/static/img/zip.png" style="width:30px;height:30px">
<img v-if="item.leixing === 'excel'" src="../../extend/adminCreate/form/static/img/xlsx.png" style="width:30px;height:30px">
<img v-if="item.leixing === 'pdf'" src="../../extend/adminCreate/form/static/img/pdf.png" style="width:30px;height:30px">
<img v-if="item.leixing === 'wps'" src="../../extend/adminCreate/form/static/img/wps.png" style="width:30px;height:30px">
<div class="demo-upload-list-cover">
<Icon v-if="item.leixing==='image' || item.leixing==='mp4' || item.leixing==='mp3'" type="ios-eye-outline" @click.native="handleView(item,v)"></Icon>
<Icon v-if="item.leixing !=='image' && item.leixing !== 'mp4' && item.leixing !== 'mp3' " type="md-cloud-download" @click.native="handleDownload(item,v)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove(item,v.field)" v-if="!v.disabled"></Icon>
</div>
</template>
<template v-else>
<i-progress v-if="item.showProgress" :percent="item.percentage" hide-info></i-progress>
</template>
</div>
</div>
<!--文件上传-->
<div v-if="v.formType==='upload_file'">
<Upload v-if="!v.disabled" :ref="v.field"
v-show="model[v.field].length < v.maxLength"
:max-length="v.maxLength"
:show-upload-list="false"
:multiple="v.nultiple"
:accept="v.format"
:on-success="handleSuccess"
:action="v.action"
:name="v.file_name"
:format="v.format"
:before-upload="(item)=>{return handleBeforeUpload(item,v)}"
:on-progress="(event, file)=>{handleProgress(event, file, v.field,1)}"
:on-format-error="handleFormatError"
>
<i-Button icon="ios-cloud-upload-outline">上传文件</i-Button>
</Upload>
<div style="margin-top:10px">
<i-Table border ref="selection" :columns="columns" :data="model[v.field]" :draggable="false" @on-drag-drop="(a,b) => {onDragDrop(a,b, v)}" stripe
:draggable="true" row-key="id">
<template slot-scope="{index}" slot="icon" >
<div style="text-align:center;height:30px;width:30px">
<img v-if="model[v.field][index].leixing === 'image'" src="../../extend/adminCreate/form/static/img/image.png" style="width:100%;
height:100%">
<video v-if="model[v.field][index].leixing === 'mp4'" src="../../extend/adminCreate/form/static/img/mp4.png" style="width:100%;
height:100%"></video>
<img v-if="model[v.field][index].leixing === 'mp3'" src="../../extend/adminCreate/form/static/img/mp3.png" style="width:30px;height:30px">
<img v-if="model[v.field][index].leixing === 'zip'" src="../../extend/adminCreate/form/static/img/zip.png" style="width:30px;height:30px">
<img v-if="model[v.field][index].leixing === 'excel'" src="../../extend/adminCreate/form/static/img/xlsx.png" style="width:30px;height:30px">
<img v-if="model[v.field][index].leixing === 'pdf'" src="../../extend/adminCreate/form/static/img/pdf.png" style="width:30px;height:30px">
<img v-if="model[v.field][index].leixing === 'wps'" src="../../extend/adminCreate/form/static/img/wps.png" style="width:30px;height:30px">
</div>
</template>
<template slot-scope="{index}" slot="input">
<i-Button icon="ios-trash-outline" @click.native="handleRemove(index,v.field)" type="error" v-if="!v.disabled" ghost size="small"
>删除</i-Button>
<i-Button icon="md-cloud-download" @click.native="handleDownload(model[v.field][index])" type="primary" ghost size="small">下载</i-Button>
</template>
</i-Table>
</div>
</div>
<!--评价星星-->
<template v-if="v.formType == 'star'">
<Rate v-model="model[v.field]" :disabled="v.disabled" :count="v.count"/>
</template>
<!--开关-->
<i-switch v-if="v.formType=='switch'" :size="v.open == '开'?'default':'large'" :value="switch_arr[v.value]" @on-change="(query)=>{change_switch(query,v.field)}">
<template #open>
<span>{{v.open}}</span>
</template>
<template #close>
<span>{{v.close}}</span>
</template>
</i-switch>
<!--单选框-->
<Radio-Group
v-model="model[v.field]"
:type="v.type"
:button-style="v.style"
v-if="v.formType=='radio'"
@on-change="(event) => {change_show_model(event, v.field)}">
<Radio :label="item.value+''" v-for="(item,index) in v.options" :disabled="v.disabled">
<Icon :type="item.icon" v-if="item.icon"></Icon>
<span>{{item.label}}</span>
</Radio>
</Radio-Group>
<!--复选框-->
<Checkbox v-if="v.formType=='checkbox' && v.CheckAll == true" v-model="v.IsCheckAll" @on-change="(event) => {handleCheckAll(event, v)}">全选</Checkbox>
<Checkbox-Group
v-model="model[v.field]"
v-if="v.formType=='checkbox'"
@on-change="(event) => {change_show_model(event, v.field)}">
<Checkbox :label="item.value+''" v-for="(item,index) in v.options" :disabled="item.disabled">
<Icon :type="item.icon" v-if="item.icon"></Icon>
<span>{{item.label}}</span>
</Checkbox>
</Checkbox-Group>
<!--数字输入框-->
<Input-number
v-if="v.formType=='inputNumber'"
:controls-outside="v.weizhi?v.weizhi:false"
:formatter="value => `${value}${v.weizhi?'':v.formatter}`"
:parser="value => value.replace(v.formatter, '')"
v-model="model[v.field]"
:readonly="v.readonly"
:placeholder="v.placeholder"
:disabled="v.disabled"
:max="v.max"
:min="v.min"
:step="v.step"
:size="v.size"
@on-change="(event) => {Calculate(event, v.field)}"
:precision="v.precision"
:editable="v.editable"/>
</Input-number>
<!--文本框-->
<i-Input
:label-width='80'
v-if="v.formType=='input' && v.type != 'add'"
v-model="model[v.field]"
:readonly="v.readonly"
:disabled="v.disabled"
:maxlength="v.maxlength"
:type="v.type"
:prefix='v.icon'
:clearable='v.clearable'
:password="v.type == 'password'?true:false"
size="v.size"
:placeholder="v.placeholder"/>
<template #prepend v-if="v.prepend">
<i-Select v-model="model[v.prepend.value]" :style="{'width':v.append_width?v.append_width:'5rem'}">
<i-Option value="com" v-for='vv in v.prepend.data' :value="vv.value+''">{{vv.label}}</i-Option>
</i-Select>
</template>
<template #append v-if="v.append" >
<block :style="{'color':v.append_color}">{{v.append}}</block>
</template>
</i-Input>
<!--日志列表-->
<Card v-if="v.formType == 'list_log'" >
<template #title v-if="v.placeholder">
<Icon type="ios-paper-outline" /></Icon>
{{v.placeholder}}
</template>
<Timeline class="list_log">
<Timeline-Item v-for="(v1,k1) in v.value">
<p class="log_title">{{v1.title}}</p>
<p class="log_content">{{v1.content}}</p>
<p class="log_img" v-if="v1.img" >
<img @click="handleShowPreview(v1.img,k2)" :src="v2" style="width: 50px;height: 50px;margin-right: 5px;" v-for="(v2,k2) in v1.img" >
</p>
</Timeline-Item>
</Timeline>
</Card>
<!--动态列表-->
<block v-if="v.formType == 'info_list'" class="code-row-bg">
<i-table
:columns="v.columns"
:data="model[v.field]"
border
stripe
highlight-row
row-key="id"
style="margin-top:10px"
>
<template slot-scope="{row, column, index }" slot="images">
<Upload :ref="row[column.key]"
v-if="row[column.key]"
max-length="1"
:show-upload-list="false"
:on-success="handleSuccess"
:format="['jpg', 'jpeg', 'png']"
max-size="10241024"
:on-format-error="handleFormatError"
:before-upload="(item)=>{return handleBeforeUpload(item,v)}"
multiple="false"
:accept="['jpg', 'jpeg', 'png']"
type="drag"
:action="column.url"
name="file"
:disabled="column.disabled"
:on-progress="(event, file)=>{handle_Progress(event, file, v.field,0,index,row,column.key)}"
style="width: 41px;">
<div :style="'width: 40px;height:40px;line-height: 40px;'" v-if="row[column.key].length == 0">
<Icon type="ios-camera" size="20"></Icon>
</div>
<template v-for="(item,key) in row[column.key]" v-else>
<img :src="item" style="height:40px;line-height: 40px;width: 40px;">
</template>
</Upload>
</template>
<template slot-scope="{row, column, index }" slot="input" >
<div v-if="column.disabled == false">
<div v-if="v.is_type == 1 && column._index == 0" style="height: 16px !important;line-height: 16px !important; ">
<i-input :value="row[column.key]" type='hidden'></i-input>
</div>
<div v-else-if="v.is_type == 1 && index >= column._index && column._index != 0" style="line-height:48px" >
<i-input :value="row[column.key]" type='hidden'></i-input>
</div>
<i-input
v-else
:value="row[column.key]"
style="width: 100%"
@on-blur="add_change_input(v.field,index,row,column.key,$event)"
:placeholder="'请输入' + column.title" >
</i-input>
</div>
<div v-if="column.disabled == true" style="width: 100%;">{{row[column.key]}}</div>
</template>
<template slot-scope="{ row, column, index }" slot="radio">
<i-Select
:value="row[column.key]"
:disabled="column.disabled"
@on-change="change_input(v.field,index,row,column.key,$event)"
>
<i-Option value="0">包含</i-Option>
<i-Option value="1">不包含</i-Option>
</i-Select>
</template>
<template slot-scope="{ row, column, index }" slot="action">
<i-Button type="error" size='small' @click="del_edit(v.field,index)" style="text-align:right;">删除</i-Button>
</template>
</i-table>
<i-Button style="margin-top:10px" @click="add_tianjia(v,v.add)" v-if="v.add != '' && v.is_type == 0">新增</i-Button>
<i-Button style="margin-top:10px" @click="addtianjia(v.field,1,v.add)" v-if="v.is_type == 1">新增行</i-Button>
<i-Button style="margin-top:10px" @click="addtianjia(v.field,2,v.columns,v.add)" v-if="v.is_type == 1">新增列</i-Button>
</block>
<!--表单输入框提示-->
<div v-if="v.tips" style="font-size: 12px;color: #838282;margin-bottom:-12px;">{{v.tips}}</div>
</Form-item>
</i-Col>
</row>
<Form-Item>
<i-Button :type="v.type" :loading="v.loading" :icon="v.icon" :type="v.type" :long="v.long" @click="handleSubmit('model',v)" v-for="(v,index) in buttonArr">{{v.title}}</i-Button>
</Form-Item>
</i-form>
</template>
</div>
<script>
var $f = new Vue({
el: "#vue",
data: {
submit_num:0,//提交点击次数
columns:[
{'title':'类型','key':'type','slot':'icon','width':'70'},
{'title':'名称','key':'name','width':'280'},
{'title':'文件地址','key':'url'},
{'title':'操作','slot':'input','width':'206'},
],//列表数据格式
// 是否是手机
is_mobile:false,
position:'right',
// 选项卡
Tabs:<?=json_encode($this->tabs)?>,
// 选项卡默认选中
is_tabs:'',
//表单数据
model: <?=json_encode($this->model)?>,
//表单数据
data: <?=json_encode($this->from)?>,
// 按钮
buttonArr: <?=json_encode($this->buttonArr)?>,
//开关数据
switch_arr: {0: false, 1: true},
//上传数据
imgArr: <?=json_encode($this->imgArr)?>,
//编辑器数据
editorArr: <?=json_encode($this->editorArr)?>,
items: [],
},
mounted() {
if (document.body.clientWidth > 760) {
this.is_mobile = false;
this.position = 'right';
} else {
this.is_mobile = true;
this.position = 'top';
}
this.$nextTick(()=>{
window.addEventListener('resize', (res) => {
if (document.body.clientWidth > 760) {
this.is_mobile = false;
this.position = 'right';
} else {
this.is_mobile = true;
this.position = 'top';
}
});
})
//判断选中状态
if(this.is_tabs == ''){
if(this.Tabs.length){
this.is_tabs = this.Tabs[0].name
}
}
if (this.editorArr) {
setTimeout(() => {
this.create_editor();
}, 200)
}
this.load();
this.change_times();
},
methods: {
/*初始化加载*/
load() {
this.data.forEach((v, k) => {
if (v.is_show) {
this.change_show_model(v.value, v.field);
}
if (v.CheckAll) {
var num = v.value.length;
if(num == v.options.length){
v.IsCheckAll = true;
}
}
})
},
/*复选框全选处理*/
handleCheckAll (checkAll,v) {
var arr = [];
if(checkAll == true){
v.options.forEach((v1, k1) => {
arr.push(v1.value)
})
this.model[v.field] = arr;
}else{
this.model[v.field] = [];
}
this.change_show_model(this.model[v.field],v.field);
},
handle_Add(v) {
this.model[v.field].push('');
},
handle_Remove (v,index) {
this.model[v.field].splice(index, 1);
},
/*公式计算处理*/
Calculate(e, field){
var reg = /(^[0-9]+(.[0-9]{1,2})?$)/;
if (!reg.test(e) && e != null){
if(!reg.test(e.data)){
if (e.data){
parent.layer.msg('格式错误，请输入整数或小数', {shift: 2});
}
this.model[field] = '';
}
}
this.data.forEach((v, k) => {
if(v.calculate){
//组装公式
var row = v.calculate;
var arr = [];
var str = '';
var num = row.length;
for (var i = 0; i < num; i++){
if(row[i] == '(' || row[i] == ')' || row[i] == '+' || row[i] == '-' || row[i] == '*' || row[i] == '/'){
if(str){
arr.push(str);
}
arr.push(row[i]);
str = '';
}else{
str = str + row[i]
if(num == i + 1){
arr.push(str);
}
}
}
if(arr.length != 0){
var calculate = '';
//组装公式值
for (var i = 0; i < arr.length; i++){
if(arr[i] !== '(' && arr[i] !== ')' && arr[i] !== '+' && arr[i] !== '-' && arr[i] !== '*' && arr[i] !== '/'){
if(isNaN(arr[i])){
if(this.model[arr[i]]){
calculate = calculate + this.model[arr[i]] * 1;
}else{
calculate = calculate + 0;
}
}else{
calculate = calculate + arr[i] * 1;
}
}else{
calculate = calculate + arr[i];
}
}
var value;
if(v.precision == 0){
value = eval(calculate);
}else{
value = eval(calculate).toFixed(2);
}
//计算
this.model[v.field] = Number(value);
}
}
})
},
/*搜索点击*/
change_model(e, field) {
var arr = [];
e.forEach((v, k) => {
if(!isNaN(v)){
arr.push(v*1)
}else{
arr.push(v)
}
})
this.model[field] = arr;
},
/*选项改变判断显示*/
change_show_model(e, field) {
if(!e){
e = '';
}
if(e.length != 0){
var is_array = 0;
if(this.isArray(e)){
is_array = 1;
}
this.data.forEach((v, k) => {
if (v.show) {
if (v.show.toString().indexOf(field) !== -1){
var is_field;
var is_xuanzhong = 0;
if(is_array == 1){
e.forEach((v1, k1) => {
is_field = field + v1;
if (v.show.indexOf(is_field) !== -1 && is_xuanzhong == 0) {
is_xuanzhong = 1;
}
})
}else{
is_field = field + e;
if (v.show.indexOf(is_field) !== -1 && is_xuanzhong == 0) {
is_xuanzhong = 1;
}
}
if (is_xuanzhong == 0) {
v.is_show = false;
v.rules = [];
}else{
v.is_show = true;
if(v.rulex){
if(v.rulex.length != 0){
v.rules = v.rulex;
}
}
}
}
}
})
}else{
this.data.forEach((v, k) => {
if (v.show) {
if (v.show.toString().indexOf(field) !== -1){
v.is_show = false;
v.rules = [];
}
}
})
}
this.data.forEach((v, k) => {
if (v.CheckAll) {
var num = this.model[v.field];
if(num){
num = num.length;
if(num == v.options.length){
v.IsCheckAll = true;
}else{
v.IsCheckAll = false;
}
}
}
})
},
Tabs_click(name) {
this.is_tabs = name
},
//收集数据
finish_form() {
let new_form = {};
for (let i in this.model) {
if (this.imgArr.indexOf(i) !== -1) {
//没有图片
if (this.model[i].length > 0) {
if (this.$refs[i][0].$vnode.data.attrs['max-length'] === 1) {
new_form[i] = this.model[i][0].url
} else {
new_form[i] = new_form[i] || [];
this.model[i].forEach((v) => {
if (v.type == 'file'){ //附件上传需要保存文件名
var img_data = {
'url':v.url,
'name':v.name
}
new_form[i].push(img_data)
}else{
new_form[i].push(v.url)
}
})
}
} else {
new_form[i] = ''
}
} else if (this.editorArr.indexOf(i) !== -1) {
new_form[i] = $('#' + i).val();
} else {
new_form[i] = this.model[i];
}
}
return new_form;
},
//表单验证
handleSubmit(refs, v) {
var that = this;
var msg = '';
this.data.forEach(function (v1, k) {
if (msg === '' && v1.rules) {
var arr = that.model[v1.field];
if (arr == null){arr='';}
if(v1.rules.length != 0){
if(arr.length == 0 || that.model[v1.field] == 'undefined'){
msg = v1.rules.message;
}else{
for (let i = 0; i < arr.length; i++) {
if(arr[i].length == 0){
msg = v1.rules.message;
break;
}
}
}
}
}
})
if(msg == ''){
this.sub(v)
}else{
layer.msg(msg, {icon: 2, time: 1800});
}
},
//提交
sub(item) {
if (this.submit_num > 0){return false;}else{this.submit_num = 1;}
var index = layer.load(0, {shade: false});
$.post(item.url, this.finish_form(), (data) => {
layer.close(index);
setTimeout(()=>{
this.submit_num = 0;
},1800)
var data = JSON.parse(data);
if (data.code == 200) {
parent.layer.msg(data.msg, {
icon: 1,
time: 1800,
end: function () {
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index);
window.parent.Fromsucceed();//触发父级方法
}
})
} else if(data.code == 204){//提交之后跳转制定页面
parent.layer.msg(data.msg, {
icon: 1,
time: 1800,
end: function () {
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index);
}
})
window.location.href = data.data.url;
} else {
layer.msg(data.msg, {icon: 2, time: 1800});
}
})
},
/*日志图片放大*/
handleShowPreview (imgdata=[],k=0) {
var arr = [];
imgdata.forEach((v,k)=>{
arr[k] = {'src':v};
})
layer.photos({
photos: {
"start":k,
"data": arr
},
footer: false // 是否显示底部栏
});
},
//放大图片
handleView(item, v) {
//放大图片
if (item.leixing == "image") {
var json = {
"data": [
{
"alt": "",
"pid": 1,
"src": item.url,
"thumb": ""
},
]
}
layer.photos({
photos: json, anim: 2
});
}
if (item.leixing == "mp4" || item.leixing == "mp3") {
layer.open({
type: 2,
title: false,
area: ['630px', '360px'],
shade: 0.8,
closeBtn: 0,
shadeClose: true,
content: item.url
});
}
},
// 删除图片
handleRemove(file, field) {
console.log(file);
console.log(field);
this.model[field].splice(this.model[field].indexOf(file), 1);
},
// 上传成功处理
handleSuccess(res, file) {
var str = res.data.filePath;
var arr = str.split('.');
var leixing = arr[arr.length - 1];
var file_type = 'wps';
if (['jpg', 'jpeg', 'png'].includes(leixing)) {
file_type = 'image';
}
if (['mp4'].includes(leixing)) {
file_type = 'mp4';
}
if (['mp3'].includes(leixing)) {
file_type = 'mp3';
}
if (['xls', 'xlsx', 'csv'].includes(leixing)) {
file_type = 'excel';
}
if (['zip', 'rar', 'gz'].includes(leixing)) {
file_type = 'zip';
}
if (['pdf','PDF'].includes(leixing)) {
file_type = 'pdf';
}
file.leixing = file_type;
file.url = res.data.filePath;
file.name = res.data.name;
},
// 文件上传错误
handleFormatError(file) {
layer.msg('文件格式错误', {icon: 2, time: 1800});
},
// 上传之前
handleBeforeUpload(item, v) {
let fileType = item.type.split('/')[1]
if (item.size > v.maxSize) {
layer.msg('文件太大,不能超过' + v.maxSize / 1024 / 1024 + 'M', {icon: 2, time: 1800});
return false;
}
return true;
},
// 文件上传时
handleProgress(event, file, field,is_file='') {
let that = this;
if (is_file == 1){file.type = 'file';}
if (event.percent == 100){
that.model[field].push(file);
}else{
if (is_file == 1){
var loadIndex = layer.msg('上传中...', {
icon: 16
, shade: 0.5
, time: 0
});
}
}
// 调用监听 上传进度 的事件
event.target.onprogress = (event) => {
let uploadPercent = parseFloat(((event.loaded / event.total) * 100).toFixed(2)) // 保留两位小数，具体根据自己需求做更改
if (uploadPercent == 100){
that.model[field].push(file);
setTimeout(function () {
layer.close(loadIndex);
}, 2000);
}
//手动设置显示上传进度条 以及上传百分比
file.showProgress = true;
file.percentage = uploadPercent;
}
},
// 编辑器
create_editor() {
var _this = this;
this.data.forEach(function (v, k) {
if (v.formType === 'editor') {
let options = {
placeholder: v.placeholder,
};
if (v.height !== undefined && v.height !== '') {
options.height = v.height
}
if (v.action !== undefined && v.action !== '') {
options.callbacks = {}
options.callbacks.onImageUpload = function (files) {
for (i = 0; i < files.length; i++) {
_this.sendFile(files[i], v.action, v.field);
}
}
options.callbacks.onFileUpload = function (files) {
for (i = 0; i < files.length; i++) {
_this.sendVideoFile(files[i], v.action, v.field);
}
}
}
$("#" + v.field).summernote(options);
}
})
},
// 编辑器传图
sendFile: function (file, url, ele) {
var formData = new FormData();
formData.append("imageData", file);
var loading = layer.msg('上传中...', {
icon: 16
, shade: 0.5
, time: 0
});
$.ajax({
url: url,
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function (res) {
var res = JSON.parse(res)
layer.close(loading);
if (res.code == 200) {
var data = res.data
$("#" + ele).summernote('insertImage', data, function ($image) {
$image.attr('src', data);
});
}
}
});
},
// 编辑器传视频
sendVideoFile: function (file, url, ele) {
var formData = new FormData();
formData.append("videoData", file);
var loading = layer.msg('上传中...', {
icon: 16
, shade: 0.5
, time: 0
});
$.ajax({
url: url,
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function (res) {
var res = JSON.parse(res)
layer.close(loading);
if (res.code == 200) {
var data = res.data;
$(".note-video-url").val(data);
//去掉插入视频禁用按钮
$(".note-video-btn").removeAttr("disabled");
}
}
});
},
// 初始化时间
change_times() {
var json = this.model;
for (var p in json) {
if(!this.isArray(json[p])){
if (json[p] instanceof Date) {
var y = json[p].getFullYear();
var m = json[p].getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = json[p].getDate();
d = d < 10 ? ('0' + d) : d;
var h = json[p].getHours();
h = h < 10 ? ('0' + h) : h;
var minute = json[p].getMinutes();
minute = minute < 10 ? ('0' + minute) : minute;
var second = json[p].getSeconds();
second = second < 10 ? ('0' + second) : second;
var timeDate = y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
this.model[p] = timeDate
}
}else{
var time_arr = [];//定义时间数组
for (var p1 in json[p]) {
if (json[p][p1].value instanceof Date) {
var tii = json[p][p1].value;
var y = tii.getFullYear();
var m = tii.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = tii.getDate();
d = d < 10 ? ('0' + d) : d;
var h = tii.getHours();
h = h < 10 ? ('0' + h) : h;
var minute = tii.getMinutes();
minute = minute < 10 ? ('0' + minute) : minute;
var second = tii.getSeconds();
second = second < 10 ? ('0' + second) : second;
var timeDate = y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
this.model[p][p1].value = timeDate
}else if (json[p][p1] instanceof Date){
var tii = json[p][p1];
var y = tii.getFullYear();
var m = tii.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = tii.getDate();
d = d < 10 ? ('0' + d) : d;
var h = tii.getHours();
h = h < 10 ? ('0' + h) : h;
var minute = tii.getMinutes();
minute = minute < 10 ? ('0' + minute) : minute;
var second = tii.getSeconds();
second = second < 10 ? ('0' + second) : second;
var timeDate = y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
time_arr[p1] = timeDate
}
}
if (time_arr.length > 0){
this.model[p] = time_arr;
}
}
}
},
// 时间选择
change_time(timeDate, field) {
this.model[field] = timeDate;
},
add_change_time(timeDate, field,ik,vv) {
this.model[field][ik][vv] = timeDate;
},
// 下拉选择 有url 请求url
remote_select(query, item) {
if (query.trim() && item.label !== query && query !== this.model[item.field]) {
item.loading = true
this.$nextTick(() => {
$.post(item.url, {value: query}, (data) => {
item.loading = false
item.options = data
}, 'JSON')
})
}
},
//开关
change_switch(i, v) {
if (i == true) {
this.model[v] = 1;
} else {
this.model[v] = 0;
}
},
// 判断是否为数组
isArray(value){
return Array.isArray(value);
},
/*文件上传列表拖拽*/
onDragDrop(a,b,v){
this.model[v.field].splice(b,1,...this.model[v.field].splice(a, 1 , this.model[v.field][b]));
},
// 文件下载
handleDownload(file, field){
var downUrl = file.url;
const now = new Date();
const year = now.getFullYear();
const month = ('0' + (now.getMonth() + 1)).slice(-2);
const day = ('0' + now.getDate()).slice(-2);
const hours = ('0' + now.getHours()).slice(-2);
const minutes = ('0' + now.getMinutes()).slice(-2);
const seconds = ('0' + now.getSeconds()).slice(-2);
const formattedTime = year + month + day + hours + minutes + seconds;
var arr = downUrl.split('.');
var leixing = arr[arr.length - 1];
var fileName = formattedTime+'.'+ leixing;
let a = document.createElement("a");// 创建a标签
if ('download' in a) {
a.download = fileName;// 设置下载文件的文件名
}
(document.body || document.documentElement).appendChild(a);
a.href = downUrl;// downUrl为后台返回的下载地址
a.target = '_parent';
a.click();// 设置点击事件
a.remove(); // 移除a标签
},
/*列表图片上传*/
handle_Progress(event, file, type,is_file='',index,row,field){
let that = this;
if (event.percent == 100){
setTimeout(res=>{
row[field] =[file.url];
// row[field] = ['https://file.iviewui.com/images/image-demo-1.jpg'];
that.model[type][index] = row;
},500)
}
},
/*列表输入框赋值*/
add_change_input(type,index,row,field,event){
row[field] = event.target.value;
this.model[type][index] = row;
},
/*列表单选赋值*/
change_input(type,index,row,field,event){
row[field] = event;
this.model[type][index] = row;
},
/*列表添加行列*/
addtianjia(field,type,columns,adds){
var that = this;
layer.prompt({title: '请填写名称'}, function(value, i, elem){
if(value === '') return elem.focus();
if(type == 1){
var index = that.model[field].length;
if(index > 8){
layer.msg('最大9行', {icon: 2, time: 1800});
}
columns.title = value;
that.model[field].splice(index, 0,columns);
}else{
var index = (columns.length - 4);
if(index > 8){
layer.msg('最大9行', {icon: 2, time: 1800});
}
var info = {
'slot':'input',
'width': 130,
'align':'center',
'title':value,
'key':field + index
}
columns.push(info);
var column = [];
var indexx = columns.length;
for (var i1 = 0; i1 < indexx; i1++){
column.push(columns[i1].title);
}
that.model['columns'] = column;
}
// 关闭 prompt
layer.close(i);
});
},
add_tianjia(v,value){
this.model[v.field].push(value);
},
//列表行删除
del_edit(field,index){
this.model[field].splice(index, 1);
},
}
})
/*select缩略图放大*/
function bigImg(v, vv) {
if (v) {
var img = "<img class='img_msg' src='" + v + "' style='width:120px;height: 120px;margin-top:7px;'/>";
layer.tips(img, '#' + vv, {
tips: 1,
time:100000
});
} else {
var index = layer.tips();
layer.close(index);
}
}
</script>
</body>
</html>