Skip to content

N
NLT-e-cigarette
Commit 789487a6 authored by 张伯涛's avatar 张伯涛
Browse files
Options

删除多余文件

parent 779a0f09
Show whitespace changes
Inline Side-by-side
Showing with 0 additions and 2191 deletions
public/template/OutOfOffice.html deleted 100644 → 0
View file @ 779a0f09
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'>
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 网页作者 -->
<meta name="wang" content="wang, comrade.wang.cn@gmail.com"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
<title>外出流程模板</title>
<!-- 引入element-ui样式 -->
<link
rel="stylesheet"
href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css"
/>
</head>
<body>
<div id="template-app">
<el-form ref="form" size="small" :model="form" label-width="120px">
<el-form-item label="申请人员">
<div> {{ username }} </div>
</el-form-item>
<el-form-item label="外出日期">
</el-form-item>
</el-form>
</div>
</body>
<!-- 引入版本为 2.6.11的vue文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<script>
const vm = new Vue({
el: '#template-app',
data() {
return {
// 表单对象
form: {},
// 用户名称
username: '文在寅'
}
}
})
</script>
</html>
public/template/handover.html deleted 100644 → 0
View file @ 779a0f09
<!-- {"fieldList":[{"key":"1-1","fieldType":"input","fieldName":"姓名","specialTag":"userName","ruleRegular":"","ruleApi":"","sortPriority":0,"value":"","placeholder":"请输入姓名","column":24,"required":false,"showHeader":true,"becomeFilter":false},{"key":"1-3","fieldType":"select","fieldName":"人员类别","specialTag":"userType","value":"","multiple":false,"placeholder":"请选择人员类别","sortPriority":0,"column":24,"required":false,"optionMode":"static","options":[{"label":"选项1","value":"6bfd9c00-9faf"},{"label":"选项2","value":"e0baedb0-92e2"}],"optionApi":{"mode":"builtIn","builtIn":"","configOut":{"fieldName":"","method":"get"}},"showHeader":true,"becomeFilter":false},{"key":"1-3","fieldType":"select","fieldName":"离职类别","specialTag":"quitType","value":"","multiple":false,"placeholder":"请选择离职类别","sortPriority":0,"column":24,"required":false,"optionMode":"static","options":[{"label":"选项1","value":"6bfd9c00-9faf"},{"label":"选项2","value":"e0baedb0-92e2"}],"optionApi":{"mode":"builtIn","builtIn":"","configOut":{"fieldName":"","method":"get"}},"showHeader":true,"becomeFilter":false},{"key":"1-3","fieldType":"select","fieldName":"交接状态","specialTag":"handoverType","value":"","multiple":false,"placeholder":"交接状态","sortPriority":0,"column":24,"required":false,"optionMode":"static","options":[{"label":"选项1","value":"6bfd9c00-9faf"},{"label":"选项2","value":"e0baedb0-92e2"}],"optionApi":{"mode":"builtIn","builtIn":"","configOut":{"fieldName":"","method":"get"}},"showHeader":true,"becomeFilter":false},{"key":"1-2","fieldType":"textarea","ruleRegular":"","sortPriority":0,"ruleApi":"","fieldName":"网络办备注","specialTag":"networkOffice","value":"","placeholder":"请输入内容","column":24,"required":false,"showHeader":false,"becomeFilter":false},{"key":"1-5","fieldType":"radio","fieldName":"是否向档案室借阅案卷","value":"","specialTag":"hasBorrow","sortPriority":0,"column":24,"required":false,"optionMode":"static","options":[{"label":"是","value":"3491c82e-980c"},{"label":"否","value":"52cebbdb-94f6"}],"optionApi":{"mode":"builtIn","builtIn":"","configOut":{"fieldName":"","method":"get"}},"showHeader":true,"becomeFilter":false},{"key":"1-5","fieldType":"radio","fieldName":"是否有借款","value":"hasLoan","specialTag":"","sortPriority":0,"column":24,"required":false,"optionMode":"static","options":[{"label":"是","value":"3491c82e-980c"},{"label":"否","value":"52cebbdb-94f6"}],"optionApi":{"mode":"builtIn","builtIn":"","configOut":{"fieldName":"","method":"get"}},"showHeader":true,"becomeFilter":false},{"key":"1-5","fieldType":"radio","fieldName":"是否签订离岗保密承诺书","value":"hasConfidentiality","specialTag":"","sortPriority":0,"column":24,"required":false,"optionMode":"static","options":[{"label":"是","value":"3491c82e-980c"},{"label":"否","value":"52cebbdb-94f6"}],"optionApi":{"mode":"builtIn","builtIn":"","configOut":{"fieldName":"","method":"get"}},"showHeader":true,"becomeFilter":false},{"key":"1-5","fieldType":"radio","fieldName":"是否已交接清除全部案卷","value":"","specialTag":"isClearHandover","sortPriority":0,"column":24,"required":false,"optionMode":"static","options":[{"label":"是","value":"3491c82e-980c"},{"label":"否","value":"52cebbdb-94f6"}],"optionApi":{"mode":"builtIn","builtIn":"","configOut":{"fieldName":"","method":"get"}},"showHeader":true,"becomeFilter":false},{"key":"1-5","fieldType":"radio","fieldName":"是否归还工作证","value":"","specialTag":"hasReturnPermit","sortPriority":0,"column":24,"required":false,"optionMode":"static","options":[{"label":"是","value":"3491c82e-980c"},{"label":"否","value":"52cebbdb-94f6"}],"optionApi":{"mode":"builtIn","builtIn":"","configOut":{"fieldName":"","method":"get"}},"showHeader":true,"becomeFilter":false},{"fieldType":"dateTime","value":"","fieldName":"批准时间","specialTag":"TimeOfApproval","column":24,"placeholder":"请选择批准时间","key":"1-8","sortPriority":0,"required":false,"showHeader":true,"becomeFilter":false},{"key":"1-9","fieldType":"button","fieldName":"所属部门","specialTag":"department","ruleRegular":"","ruleApi":"","sortPriority":0,"value":"","placeholder":"请选择所属部门","column":24,"required":false,"showHeader":true,"becomeFilter":false},{"key":"1-9","fieldType":"button","fieldName":"所属部门","specialTag":"department","ruleRegular":"","ruleApi":"","sortPriority":0,"value":"","placeholder":"请选择所属部门","column":24,"required":false,"showHeader":true,"becomeFilter":false},{"key":"1-10","fieldType":"input","fieldName":"职务","specialTag":"duties","ruleRegular":"","ruleApi":"","sortPriority":0,"value":"","placeholder":"请输入职务","column":24,"required":false,"showHeader":true,"becomeFilter":false},{"key":"1-11","fieldType":"radio","fieldName":"是否归还门卡","specialTag":"badge","ruleRegular":"","ruleApi":"","sortPriority":0,"value":"","placeholder":"请选择","column":24,"required":false,"showHeader":true,"becomeFilter":false},{"key":"1-12","fieldType":"radio","fieldName":"是否归还手提电脑","specialTag":"laptop","ruleRegular":"","ruleApi":"","sortPriority":0,"value":"","placeholder":"请选择","column":24,"required":false,"showHeader":true,"becomeFilter":false},{"key":"1-13","fieldType":"radio","fieldName":"是否归还其他设备","specialTag":"otherDevice","ruleRegular":"","ruleApi":"","sortPriority":0,"value":"","placeholder":"请选择","column":24,"required":false,"showHeader":true,"becomeFilter":false},{"key":"1-14","fieldType":"radio","fieldName":"是否已全部归还","specialTag":"returnAllFiles","ruleRegular":"","ruleApi":"","sortPriority":0,"value":"","placeholder":"请选择","column":24,"required":false,"showHeader":true,"becomeFilter":false},{"key":"1-15","fieldType":"radio","fieldName":"是否已还清","specialTag":"paidOff","ruleRegular":"","ruleApi":"","sortPriority":0,"value":"","placeholder":"请选择","column":24,"required":false,"showHeader":true,"becomeFilter":false},{"key":"1-16","fieldType":"input","fieldName":"其他说明","specialTag":"financeDepartmentRemark","ruleRegular":"","ruleApi":"","sortPriority":0,"value":"","placeholder":"请选择","column":24,"required":false,"showHeader":true,"becomeFilter":false},{"key":"1-17","fieldType":"input","fieldName":"工作其他说明","specialTag":"departmentRemark","ruleRegular":"","ruleApi":"","sortPriority":0,"value":"","placeholder":"请选择","column":24,"required":false,"showHeader":true,"becomeFilter":false}]} -->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<!-- 声明文档使用的字符编码 -->
<meta charset="utf-8" />
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 页面描述 -->
<meta name="description" content="交接管理流程模板" />
<!-- 页面关键词 -->
<meta name="keywords" content="" />
<!-- 网页作者 -->
<meta name="wang" content="wang, comrade.wang.cn@gmail.com" />
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow" />
<!-- 为移动设备添加 viewport -->
<meta
name="viewport"
content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"
/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
<title>交接管理流程模板</title>
<!-- 引入element-ui样式 -->
<link
rel="stylesheet"
href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css"
/>
</head>
<body>
<div id="template-app">
<el-form
size="small"
ref="form"
:rules="rules"
:model="form"
label-width="120px"
>
<el-form-item
v-if="formItemVisible('userName')"
label="姓名"
prop="userName"
>
<el-input
v-if="formItemEditable('userName')"
v-model="form.userName"
></el-input>
<div v-else>{{form.userName}}</div>
<!-- <el-input v-if="powerJson.userName && powerJson.userName.isEdit" v-model="form.name"></el-input>-->
</el-form-item>
<el-form-item v-if="formItemVisible('duties')" label="职务" prop="duties">
<el-input
v-if="formItemEditable('duties')"
v-model="form.duties"
></el-input>
<div v-else>{{form.duties}}</div>
</el-form-item>
<el-form-item
v-if="formItemVisible('userType')"
label="人员类别"
prop="userType"
clearable
>
<el-select
v-if="formItemEditable('userType')"
v-model="form.userType"
placeholder="请选择人员类别"
>
<el-option
v-for="item in personTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<div v-else>{{form.userType | typeFilter(personTypeOptions)}}</div>
</el-form-item>
<el-form-item
v-if="formItemVisible('quitType')"
label="离职类别"
prop="quitType"
>
<el-select
v-if="formItemEditable('quitType')"
v-model="form.quitType"
placeholder="请选择人员类别"
>
<el-option
v-for="item in resignationTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<div v-else>
{{form.quitType | typeFilter(resignationTypeOptions)}}
</div>
</el-form-item>
<el-form-item
v-if="formItemVisible('handoverType')"
label="交接状态"
prop="handoverType"
>
<el-select
v-if="formItemEditable('handoverType')"
v-model="form.handoverType"
placeholder="请选择交接状态"
>
<el-option
v-for="item in handoverStateOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<div v-else>
{{form.handoverType | typeFilter(handoverStateOptions)}}
</div>
</el-form-item>
<el-form-item
v-if="formItemVisible('department')"
label="所在部门"
prop="department">
<div v-if="formItemEditable('submitDate')">
<el-button type="primary" @click="dialogDeptVisible = true"
>选择</el-button
>
<div class="select-string" :title="selectedDeptString">
{{ selectedDeptString }}
</div>
</div>
<div v-else>{{ selectedDeptString }}</div>
</el-form-item>
<!-- 网络办 -->
<p>网络办</p>
<template>
<el-form-item label="是否归还门卡">
<el-radio-group v-model="form.badge">
<el-radio :label="'1'">是</el-radio>
<el-radio :label="'2'">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否归还手提">
<el-radio-group v-model="form.laptop">
<el-radio :label="'1'">是</el-radio>
<el-radio :label="'2'">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否归还其他设备">
<el-radio-group v-model="form.otherDevice">
<el-radio :label="'1'">是</el-radio>
<el-radio :label="'2'">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
v-if="formItemVisible('networkOffice')"
label="备注"
>
<el-input
v-if="formItemEditable('networkOffice')"
type="textarea"
v-model="form.networkOffice"
></el-input>
</el-form-item>
<div v-else>{{form.networkOffice}}</div>
</template>
<!-- 档案室 -->
<template>
<el-form-item
v-if="formItemVisible('hasBorrow')"
label="是否有向档案室借阅案卷"
>
<el-radio-group
v-if="formItemEditable('hasBorrow')"
v-model="form.hasBorrow"
>
<el-radio :label="'1'">是</el-radio>
<el-radio :label="'2'">否</el-radio>
</el-radio-group>
<div v-else>{{form.hasBorrow === '1' ? '是' : '否'}}</div>
</el-form-item>
<el-form-item
v-if="form.hasBorrow === '1' && formItemVisible('hasBorrow')"
label="是否已全部归还"
>
<el-radio-group
v-if="formItemEditable('hasBorrow')"
v-model="form.returnAllFiles"
>
<el-radio :label="'1'">是</el-radio>
<el-radio :label="'2'">否</el-radio>
</el-radio-group>
<div v-else>{{form.returnAllFiles === '1' ? '是' : '否'}}</div>
</el-form-item>
</template>
<!-- 财务部 -->
<p>财务部</p>
<template>
<el-form-item
v-if="formItemVisible('hasLoan')"
label="是否有借款"
>
<el-radio-group v-if="formItemEditable('hasLoan')" v-model="form.hasLoan">
<el-radio :label="'1'">是</el-radio>
<el-radio :label="'2'">否</el-radio>
</el-radio-group>
<div v-else>{{form.hasLoan === '1' ? '是' : '否'}}</div>
</el-form-item>
<el-form-item
v-if="form.hasLoan === '1' && formItemVisible('hasLoan')"
label="是否已还清"
>
<el-radio-group
v-if="formItemEditable('hasLoan')"
v-model="form.paidOff"
>
<el-radio :label="'1'">是</el-radio>
<el-radio :label="'2'">否</el-radio>
</el-radio-group>
<div v-else>{{form.paidOff === '1' ? '是' : '否'}}</div>
</el-form-item>
<el-form-item label="其他说明">
<el-input
type="textarea"
v-model="form.financeDepartmentRemark"
></el-input>
</el-form-item>
</template>
<!-- 办公室 -->
<p>办公室</p>
<template>
<el-form-item
v-if="formItemVisible('hasConfidentiality')"
label="是否签订离岗保密承诺书"
>
<el-radio-group
v-if="formItemEditable('hasConfidentiality')"
v-model="form.hasConfidentiality"
>
<el-radio :label="'1'">是</el-radio>
<el-radio :label="'2'">否</el-radio>
</el-radio-group>
<div v-else>{{form.hasConfidentiality === '1' ? '是' : '否'}}</div>
</el-form-item>
</template>
<!-- 所在部门 -->
<p>所在部门</p>
<template>
<el-form-item
v-if="formItemVisible('isClearHandover')"
label="是否已交接清楚全部案卷"
>
<el-radio-group
v-if="formItemEditable('isClearHandover')"
v-model="form.isClearHandover"
>
<el-radio :label="'1'">是</el-radio>
<el-radio :label="'2'">否</el-radio>
</el-radio-group>
<div v-else>{{form.isClearHandover === '1' ? '是' : '否'}}</div>
</el-form-item>
<el-form-item label="工作其他说明">
<el-input
type="textarea"
v-model="form.departmentRemark"
></el-input>
</el-form-item>
<!-- 政治部 -->
<p>政治部</p>
<el-form-item
v-if="formItemVisible('hasReturnPermit')"
label="是否归还工作证"
>
<el-radio-group
v-if="formItemEditable('hasReturnPermit')"
v-model="form.hasReturnPermit"
>
<el-radio :label="'1'">是</el-radio>
<el-radio :label="'2'">否</el-radio>
</el-radio-group>
<div v-else>{{form.hasReturnPermit === '1' ? '是' : '否'}}</div>
</el-form-item>
<el-form-item
v-if="formItemVisible('TimeOfApproval')"
label="批准时间"
>
<el-date-picker
v-if="formItemEditable('TimeOfApproval')"
v-model="form.dateTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择批准时间"
>
</el-date-picker>
<div v-else>{{form.TimeOfApproval}}</div>
</el-form-item>
</template>
</el-form>
<!-- 部门弹出框-->
<el-dialog
:close-on-click-modal="false"
title="选择所在部门"
:visible.sync="dialogDeptVisible"
:show-close="false"
:modal="false"
:destroy-on-close="true"
>
<el-tree
ref="tree"
:data="depts"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
:show-checkbox="true"
default-expand-all
node-key="id"
@check ="handleNodeClick"
></el-tree>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogDeptVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogDeptVisible = false"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</body>
<!-- 引入版本为 2.6.11的vue文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<!-- axios支持 -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script>
const vm = new Vue({
el: "#template-app",
data: function() {
return {
// 权限Json
powerJson: {},
// 默认选中的部门
selectedDept: [],
defaultProps: {
children: "children",
label: "label"
},
//选择部门弹出框
dialogDeptVisible: false,
// 部门信息
depts: [],
// 是否可编辑
editable: true,
myMessage: "123123",
form: {
// 姓名
userName: "",
// 所属部门
department: "",
// 职务
duties: "3",
// 人员类别
userType: '1',
// 离职类别
quitType: '1',
// 交接状态
handoverType: '1',
//网络办 -- 是否归还门卡
badge: '1',
//网络办 -- 是否归还手提电脑
laptop: '1',
//网络办 -- 是否归还其他设备
otherDevice: '1',
//网络办 -- 备注
networkOffice: "",
// 档案室 -- 是否有向档案室借阅案卷
hasBorrow: '1',
// 档案室 -- 是否已全部归还
returnAllFiles: '1',
// 财务部 -- 是否有借款
hasLoan: '1',
// 财务部 -- 是否已还清
paidOff: '1',
// 财务部 -- 其他说明
financeDepartmentRemark: "",
// 办公室 -- 是否签订离岗保密承诺书
hasConfidentiality: '1',
// 所在部门 -- 是否已交接清楚全部案卷
isClearHandover: '1',
// 所在部门 -- 工作其他说明
departmentRemark: "",
// 政治部 -- 是否归还工作证
hasReturnPermit: '1',
// 政治部 -- 批准时间
TimeOfApproval: new Date()
},
rules: {
userName: [
{ required: true, message: "请输入姓名", trigger: "blur" },
{
min: 3,
max: 5,
message: "长度在 2 到 5 个字符",
trigger: "blur"
}
],
duties: [
{ required: true, message: "请输入职务", trigger: "blur" }
],
department: [
{ required: true, message: "请选择部门", trigger: "blur" },
{
validator: this.departmentPass,
trigger: 'blur'
}
],
userType: [
{ required: true, message: "请选择人员类别", trigger: "change" }
],
quitType: [
{
required: true,
message: "请选择离职类别",
trigger: "change"
}
],
handoverType: [
{
required: true,
message: "请选择交接状态",
trigger: "change"
}
],
},
// 人员类别下拉框选项
personTypeOptions: [
{
value: '1',
label: "在编"
},
{
value: '2',
label: "聘用"
}
],
// 离职类别
resignationTypeOptions: [
{
value: '1',
label: "退休"
},
{
value: '2',
label: "调动"
},
{
value: '3',
label: "辞职"
}
],
// 交接状态
handoverStateOptions: [
{
value: '1',
label: "已交接"
},
{
value: '2',
label: "待交接"
}
]
};
},
filters: {
typeFilter(value, options) {
if (value && value !== "") {
const obj = options.find(item => {
return item.value === value;
});
return obj.label;
}
return "";
}
},
computed: {
checkedKey() {
return this.selectedDept.map(item => {
return item.id;
});
},
selectedDeptString() {
return this.selectedDept
.map(item => {
return item.label;
})
.toString();
},
// 计算 form-item 是否显示
formItemVisible() {
return specialTag => {
const temp = this.powerJson.flowType ? (this.powerJson.flowType === 3 ? true : this.powerJson[specialTag] && Number(this.powerJson[specialTag].isRead)) : true
return temp;
};
},
// 计算 form-item 中是否可编辑
formItemEditable() {
return specialTag => {
// 判断进入的详情页是否为已办(flowType = 3) 如为已办 则所有项为只读
const temp = this.powerJson.flowType ? (this.powerJson.flowType === 3 ? false :Number(this.powerJson[specialTag].isEdit)) : true
return temp;
};
}
},
created() {},
mounted() {
const self = this
this.getNeedData();
// 接受父页面发来的信息
window.addEventListener("message", event => {
const data = event.data;
const switchCmd = {
// 编辑时查询并回显表单数据
getFormJson: () => {
this.form = data.params.form;
},
// 提交节点 提交事件
onSubmit: () => {
// this.submitForm();
this.onSubmissionProcess();
},
// 返回数据处理
backData: () => {
if (data.params.name === "treeselect") {
this.depts = data.params.data.data;
const timer = setInterval(function() {
if (self.powerJson.flowType){
clearInterval(timer)
self.getSelectDeptLabel();
}
},100)
}
},
// 获取表单权限是否只读信息
powerJson: () => {
this.handlePowerJson(data.params);
},
// 审批通过或者驳回事件
onPassOrRejected() {
self.handlePassOrRejected();
}
};
switchCmd[data.cmd] && switchCmd[data.cmd]();
});
this.$nextTick(() => {
this.getClientHeight();
});
},
methods: {
/**
* @Description: 获取所选dept label
* @author liuhuaizhi
* @date 2020/7/24
*/
getSelectDeptLabel() {
const that = this;
this.selectedDept.forEach(item => {
item["label"] = that.getSelectDeptLabelChildren(item, that.depts);
});
this.selectedDept = this.selectedDept.map(item => {
return item
})
},
getSelectDeptLabelChildren(item, array) {
const that = this;
for (let i= 0; i< array.length;i++){
if (Number(item.id) === Number(array[i].id)) {
return array[i].label;
} else if (array[i].children && array[i].children.length > 0) {
let temp = that.getSelectDeptLabelChildren(item, array[i].children);
if (temp) {
return temp;
}
}
}
},
departmentPass(rule, value, callback) {
if (!this.selectedDeptString) {
callback(new Error('请选择所属部门'));
} else {
callback();
}
},
// 处理表单权限是否只读信息
handlePowerJson(params) {
this.powerJson = Object.assign({}, params);
// 根据flowType考虑是否将form赋值
if (this.powerJson.flowType && this.powerJson.flowType !== 1){
for(key in this.powerJson) {
this.$set( this.form,key,this.powerJson[key].fieldValue)
}
/* this.form = Object.assign({}, {
userName: this.powerJson.userName.fieldValue,
department: this.powerJson.department.fieldValue,
duties: this.powerJson.duties.fieldValue,
financeDepartmentRemark: this.powerJson.financeDepartmentRemark.fieldValue,
departmentRemark: this.powerJson.departmentRemark.fieldValue,
userType: Number(this.powerJson.userType.fieldValue),
badge: Number(this.powerJson.badge.fieldValue),
laptop: Number(this.powerJson.laptop.fieldValue),
otherDevice: Number(this.powerJson.otherDevice.fieldValue),
quitType: Number(this.powerJson.quitType.fieldValue),
handoverType: Number(this.powerJson.handoverType.fieldValue),
networkOffice: Number(this.powerJson.networkOffice.fieldValue),
hasBorrow: Number(this.powerJson.hasBorrow.fieldValue),
returnAllFiles: Number(this.powerJson.returnAllFiles.fieldValue),
hasLoan: Number(this.powerJson.hasLoan.fieldValue),
paidOff: Number(this.powerJson.paidOff.fieldValue),
isClearHandover: Number(this.powerJson.isClearHandover.fieldValue),
hasReturnPermit: Number(this.powerJson.hasReturnPermit.fieldValue),
hasConfidentiality: Number(this.powerJson.hasConfidentiality.fieldValue),
TimeOfApproval: this.powerJson.TimeOfApproval.fieldValue
});*/
if (this.form.department){
this.selectedDept.push({id: this.form.department})
}
}
},
// 节点单击事件
handleNodeClick(data, checked) {
let flag = true
this.selectedDept.forEach(item => {
if (data.id === item.id) {
flag = false
}
})
if (flag) {
this.selectedDept.push(data);
} else {
this.selectedDept = this.selectedDept.filter(item => {
if (data.id !== item.id) {
return true;
}
});
}
this.form.department = this.selectedDept.length > 0 ? this.selectedDept[this.selectedDept.length -1].id : ''
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
/**
* @author: jooey wong
* @description: 提交表单，验证表单 返回给父组件
* @return:
*/
submitForm() {
let returnData = {
cmd: "iframeSubmit",
params: {
success: true,
data: null
}
};
this.$refs.form.validate(valid => {
if (valid) {
returnData.params.success = true;
returnData.params.data = this.form;
} else {
returnData.params.success = false;
}
// 向父vue页面发送信息
window.parent.postMessage(returnData, "*");
});
},
/**
* 获取iframe页面所需数据
*/
getNeedData() {
let returnData = {
cmd: "iframeGetData",
params: {
api: ["treeselect"]
}
};
// 向父vue页面发送信息
window.parent.postMessage(returnData, "*");
},
/**
* @author WangXinYu
* @describe 获取当前的iframe高度
**/
getClientHeight() {
const clientHeight = document.getElementById("template-app")
.offsetHeight;
const data = {
cmd: "getClientHeight",
params: {
clientHeight: clientHeight + 100
}
};
window.parent.postMessage(data, "*");
},
/**
* @author WangXinYu
* @describe 提交节点 提交按钮触发事件
**/
onSubmissionProcess() {
let returnData = {
cmd: "onSubmissionProcess",
params: {
success: true,
data: null
}
};
// 处理数据变为请求需要的参数格式
// 提交流程 需要填写 名称 人员类别 职务 离职类别 交接状态 所在部门
// 提交节点 提交功能的specialTag Array
// 返回的表单字段
const queryDtoArray = [];
// 只要是可显示的字段 就传回去
Object.keys(this.powerJson).forEach(key => {
const powerJsonItem = this.powerJson[key];
if (powerJsonItem.isRead) {
queryDtoArray.push({
fieldId: powerJsonItem.businessId,
fieldValue: this.form[key],
remark: ""
});
}
});
returnData.params.data = queryDtoArray;
// 向父组件发送请求
window.parent.postMessage(returnData, "*");
// this.$refs.form.validate(valid => {
// if (valid) {
// returnData.params.success = true;
// returnData.params.data = this.form;
// } else {
// returnData.params.success = false;
// }
// // 向父vue页面发送信息
// });
},
/**
* @author: Comrade Wong
* @describe: 处理审批流程的通过或者驳回或者完成
**/
handlePassOrRejected() {
let returnData = {
cmd: "completeTask",
params: {
success: true,
data: null
}
};
// 返回的表单字段
const queryDtoArray = [];
// 只要是可显示的字段 就传回去
Object.keys(this.powerJson).forEach(key => {
const powerJsonItem = this.powerJson[key];
if (powerJsonItem.isRead) {
queryDtoArray.push({
fieldId: powerJsonItem.businessId,
fieldValue: this.form[key],
remark: ""
});
}
});
returnData.params.data = queryDtoArray;
// 向父组件发送请求
window.parent.postMessage(returnData, "*");
}
}
});
</script>
</html>
public/template/instance.html deleted 100644 → 0
View file @ 779a0f09
<!-- {"fieldList":[{"key":"1-1","type":"input","name":"输入框","specialTag":"","ruleRegular":"","ruleApi":"","sortPriority":0,"value":"","placeholder":"请输入内容","column":24,"required":true,"showHeader":true,"becomeFilter":false},{"key":"1-2","type":"textarea","ruleRegular":"","sortPriority":0,"ruleApi":"","name":"文本域","specialTag":"","value":"","placeholder":"请输入内容","column":24,"required":true,"showHeader":true,"becomeFilter":false},{"key":"1-3","type":"select","name":"下拉框","specialTag":"","value":"","multiple":false,"placeholder":"输入提示","sortPriority":0,"column":24,"required":true,"optionMode":"static","options":[{"label":"选项1","value":"6bfd9c00-9faf"},{"label":"选项2","value":"e0baedb0-92e2"}],"optionApi":{"mode":"builtIn","builtIn":"","configOut":{"name":"","method":"get"}},"showHeader":true,"becomeFilter":false},{"key":"1-4","type":"checkbox","name":"多选框","value":[],"column":24,"specialTag":"","sortPriority":0,"required":false,"optionMode":"static","options":[{"label":"选项1","value":"4de92cf6-971f"},{"label":"选项2","value":"5c21bffe-957d"}],"optionApi":{"mode":"builtIn","builtIn":"","configOut":{"name":"","method":"get"}},"showHeader":false,"becomeFilter":false},{"key":"1-5","type":"radio","name":"单选框","value":"","specialTag":"","sortPriority":0,"column":24,"required":false,"optionMode":"static","options":[{"label":"选项1","value":"3491c82e-980c"},{"label":"选项2","value":"52cebbdb-94f6"}],"optionApi":{"mode":"builtIn","builtIn":"","configOut":{"name":"","method":"get"}},"showHeader":true,"becomeFilter":false},{"key":"1-6","type":"date","name":"日期选择框","value":"","column":24,"specialTag":"","placeholder":"请选择日期","required":false,"format":"yyyy-MM-dd","sortPriority":0,"dateFormat":"year","showHeader":true,"becomeFilter":false},{"key":"1-7","type":"time","name":"时间选择框","value":"","specialTag":"","column":24,"sortPriority":0,"placeholder":"请选择时间","required":false,"format":"HH:mm:ss","showHeader":true,"becomeFilter":false},{"type":"dateTime","value":"","name":"日期时间选择","specialTag":"","column":24,"placeholder":"请选择日期时间","key":"1-8","sortPriority":0,"required":false,"showHeader":true,"becomeFilter":false},{"key":"1-9","type":"dateRange","value":["2020-07-16","2020-07-24"],"specialTag":"","name":"日期范围选择","column":24,"sortPriority":0,"required":false,"startPlaceholder":"开始日期","endPlaceholder":"结束日期","format":"yyyy-MM-dd","showHeader":false,"becomeFilter":false}]} -->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>模板html</title>
<!-- 引入element-ui样式 -->
<link
rel="stylesheet"
href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css"
/>
</head>
<body>
<div id="app">
<el-form
size="small"
ref="form"
:rules="rules"
:model="form"
label-width="80px"
>
<el-form-item label="模板名称" prop="name">
<el-input v-model="form.name" :maxlength="30"></el-input>
</el-form-item>
<el-form-item label="文本域" prop="textarea">
<el-input type="textarea" v-model="form.textarea"></el-input>
</el-form-item>
<el-form-item label="下拉框" prop="select">
<el-select v-model="form.select" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="多选框" prop="checkbox">
<el-checkbox-group v-model="form.checkbox">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="单选框" prop="radio">
<el-radio-group v-model="form.radio">
<el-radio label="选项1"></el-radio>
<el-radio label="选项2"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="日期选择" prop="date1">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="form.date1"
style="width: 100%;"
></el-date-picker>
</el-form-item>
<el-form-item label="时间选择" prop="date2">
<el-time-picker
placeholder="选择时间"
v-model="form.date2"
style="width: 100%;"
></el-time-picker>
</el-form-item>
<el-form-item label="日期时间选择" prop="dateTimePicker">
<el-date-picker
v-model="form.dateTimePicker"
type="datetime"
placeholder="选择日期时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="日期范围选择" prop="date1">
<el-date-picker
v-model="form.date3"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')"
>立即创建</el-button
>
<el-button @click="resetForm('form')">重置</el-button>
</el-form-item>
</el-form>
</div>
</body>
<!-- 引入版本为 2.6.11的vue文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<!-- axios支持 -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: function() {
return {
myMessage: "123123",
form: {
name: "",
textarea: "",
select: "",
date1: "",
date2: "",
dateTimePicker: "",
// 日期范围选择
date3: "",
checkbox: [],
resource: ""
},
rules: {
name: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{
min: 3,
max: 5,
message: "长度在 3 到 5 个字符",
trigger: "blur"
}
],
textarea: [
{ required: true, message: "请填写活动形式", trigger: "blur" }
],
select: [
{ required: true, message: "请选择活动区域", trigger: "change" }
],
checkbox: [
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change"
}
],
radio: [
{ required: true, message: "请选择活动资源", trigger: "change" }
],
date1: [
{
type: "date",
required: true,
message: "请选择日期",
trigger: "change"
}
],
date2: [
{
type: "date",
required: true,
message: "请选择时间",
trigger: "change"
}
],
dateTimePicker: [
{
type: "date",
required: true,
message: "请选择时间",
trigger: "change"
}
]
}
};
},
created() {},
mounted() {
// 接受父页面发来的信息
window.addEventListener("message", event => {
var data = event.data;
const switchCmd = {
getFormJson: () => {
this.form = data.params.form;
},
onSubmit: () => {
this.submitForm();
}
};
switchCmd[data.cmd]();
});
},
methods: {
/**
* @author: jooey wong
* @description: 提交表单，验证表单 返回给父组件
* @param {type}
* @return:
*/
submitForm() {
let returnData = {
cmd: "iframeSubmit",
params: {
success: true,
data: null
}
};
this.$refs.form.validate(valid => {
if (valid) {
returnData.params.success = true;
returnData.params.data = this.form;
} else {
returnData.params.success = false;
}
// 向父vue页面发送信息
window.parent.postMessage(returnData, "*");
});
}
}
});
</script>
</html>
public/template/test.html deleted 100644 → 0
View file @ 779a0f09
<!-- {"fieldList":[{"key":"1-1","fieldType":"dateTime","fieldName":"提交日期","specialTag":"submitDate","ruleRegular":"","ruleApi":"","sortPriority":0,"value":"","placeholder":"请输入提交日期","column":24,"required":false,"showHeader":true,"becomeFilter":false},{"key":"1-2","fieldType":"input","fieldName":"经办人","specialTag":"agent","value":"","placeholder":"请填写经办人","sortPriority":0,"column":24,"required":false,"optionMode":"static","showHeader":true,"becomeFilter":false}]} -->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<!-- 声明文档使用的字符编码 -->
<meta charset="utf-8" />
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 页面描述 -->
<meta name="description" content="工会慰问金流程模板" />
<!-- 页面关键词 -->
<meta name="keywords" content="" />
<!-- 网页作者 -->
<meta name="wang" content="wang, comrade.wang.cn@gmail.com" />
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow" />
<!-- 为移动设备添加 viewport -->
<meta
name="viewport"
content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"
/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
<title>鹏鹏测试模板</title>
<!-- 引入element-ui样式 -->
<link
rel="stylesheet"
href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css"
/>
</head>
<body>
<div id="template-app">
<el-form
size="small"
ref="form"
:rules="rules"
:model="form"
label-width="120px"
ref="ruleForm"
>
<el-form-item
v-if="formItemVisible('submitDate')"
label="提交日期"
prop="submitDate"
>
<el-date-picker
v-if="formItemEditable('submitDate')"
v-model="form.submitDate"
type="datetime"
placeholder="选择提交日期"
>
</el-date-picker>
<div v-else>{{form.submitDate}}</div>
</el-form-item>
<el-form-item
v-if="formItemVisible('agent')"
label="经办人"
prop="agent"
clearable
>
<el-input
v-if="formItemEditable('agent')"
v-model="form.agent"
></el-input>
<div v-else>{{form.agent}}</div>
</el-form-item>
</el-form>
<!-- 部门弹出框-->
<el-dialog
:close-on-click-modal="false"
title="部门信息"
:visible.sync="dialogDeptVisible"
:show-close="false"
:modal="false"
:destroy-on-close="true"
>
<el-tree
ref="tree"
:data="depts"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
:show-checkbox="true"
default-expand-all
node-key="id"
:default-checked-keys="checkedKey"
@check="handleNodeClick"
></el-tree>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogDeptVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogDeptVisible = false"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</body>
<!-- 引入版本为 2.6.11的vue文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<!-- axios支持 -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script>
const vm = new Vue({
el: "#template-app",
data: function() {
return {
// 权限Json
powerJson: {},
// 默认选中的部门
selectedDept: [],
defaultProps: {
children: "children",
label: "label"
},
//选择部门弹出框
dialogDeptVisible: false,
// 部门信息
depts: [],
// 是否可编辑
editable: true,
myMessage: "123123",
form: {
// 提交日期
submitDate: "",
// 经办人
agent: "",
},
rules: {
submitDate: [
{
type: "date",
required: true,
message: "请选择提交日期",
trigger: "change"
}
],
applyDept: [
{ required: true, message: "请选择部门", trigger: "blur" },
{
validator: this.applyDeptPass,
trigger: "blur"
}
],
agent: [
{ required: true, message: "请输入经办人", trigger: "blur" }
],
bankName: [
{ required: true, message: "请输入收款人", trigger: "blur" }
],
bankAccount: [
{ required: true, message: "请输入账号", trigger: "blur" }
],
paymentAmount: [
{ required: true, message: "请输入付款金额", trigger: "blur" }
],
reasonsPpayment: [
{ required: true, message: "请输入付款事由", trigger: "blur" }
],
payee: [
{ required: true, message: "请输入开户行", trigger: "blur" }
]
}
};
},
filters: {
typeFilter(value, options) {
if (value && value !== "") {
const obj = options.find(item => {
return item.value === value;
});
return obj.label;
}
return "";
}
},
computed: {
checkedKey() {
return this.selectedDept.map(item => {
return item.id;
});
},
selectedDeptString() {
return this.selectedDept
.map(item => {
return item.label;
})
.toString();
},
// 计算 form-item 是否显示
formItemVisible() {
return specialTag => {
const temp = this.powerJson.flowType
? this.powerJson.flowType === 3
? true
: this.powerJson[specialTag] &&
Number(this.powerJson[specialTag].isRead)
: true;
return temp;
};
},
// 计算 form-item 中是否可编辑
formItemEditable() {
return specialTag => {
// 判断进入的详情页是否为已办(flowType = 3) 如为已办 则所有项为只读
const temp = this.powerJson.flowType
? this.powerJson.flowType === 3
? false
: Number(this.powerJson[specialTag].isEdit)
: true;
return temp;
};
},
// 数字转换汉字钱
transferMoney() {
return n => {
const fraction = ["角", "分"];
const digit = [
"零",
"壹",
"贰",
"叁",
"肆",
"伍",
"陆",
"柒",
"捌",
"玖"
];
const unit = [["元", "万", "亿"], ["", "拾", "佰", "仟"]];
const head = n < 0 ? "欠" : "";
n = Math.abs(n);
let s = "";
for (let i = 0; i < fraction.length; i++) {
s += (
digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]
).replace(/零./, "");
}
s = s || "整";
n = Math.floor(n);
for (let i = 0; i < unit[0].length && n > 0; i++) {
let p = "";
for (let j = 0; j < unit[1].length && n > 0; j++) {
p = digit[n % 10] + unit[1][j] + p;
n = Math.floor(n / 10);
}
s =
p.replace(/(零.)*零$/, "").replace(/^$/, "零") + unit[0][i] + s;
}
return (
head +
s
.replace(/(零.)*零元/, "元")
.replace(/(零.)+/g, "零")
.replace(/^整$/, "零元整")
);
};
}
},
created() {},
mounted() {
const self = this;
this.getNeedData();
// 接受父页面发来的信息
window.addEventListener("message", event => {
const data = event.data;
const switchCmd = {
// 编辑时查询并回显表单数据
getFormJson: () => {
this.form = data.params.form;
},
// 提交节点 提交事件
onSubmit: () => {
// this.submitForm();
this.onSubmissionProcess();
},
// 返回数据处理
backData: () => {
if (data.params.name === "treeselect") {
this.depts = data.params.data.data;
const timer = setInterval(function() {
if (self.powerJson.flowType){
clearInterval(timer)
self.getSelectDeptLabel();
}
},100)
}
},
// 获取表单权限是否只读信息
powerJson: () => {
this.handlePowerJson(data.params);
},
// 审批通过或者驳回事件
onPassOrRejected() {
self.handlePassOrRejected();
}
};
switchCmd[data.cmd] && switchCmd[data.cmd]();
});
this.$nextTick(() => {
this.getClientHeight();
});
},
methods: {
/**
* @Description: 获取所选dept label
* @author liuhuaizhi
* @date 2020/7/24
*/
getSelectDeptLabel() {
const that = this;
this.selectedDept.forEach(item => {
item["label"] = that.getSelectDeptLabelChildren(item, that.depts);
});
this.selectedDept = this.selectedDept.map(item => {
return item
})
},
getSelectDeptLabelChildren(item, array) {
const that = this;
for (let i= 0; i< array.length;i++){
if (Number(item.id) === Number(array[i].id)) {
return array[i].label;
} else if (array[i].children && array[i].children.length > 0) {
let temp = that.getSelectDeptLabelChildren(item, array[i].children);
if (temp) {
return temp;
}
}
}
},
applyDeptPass(rule, value, callback) {
if (!this.selectedDeptString) {
callback(new Error("请选择所属部门"));
} else {
callback();
}
},
// 处理表单权限是否只读信息
handlePowerJson(params) {
this.powerJson = Object.assign({}, params);
// 根据flowType考虑是否将form赋值
if (this.powerJson.flowType && this.powerJson.flowType !== 1) {
for (key in this.powerJson) {
this.$set(this.form, key, this.powerJson[key].fieldValue);
}
/*this.form = Object.assign({}, {
submitDate: this.powerJson.submitDate.fieldValue,
applyDept: this.powerJson.applyDept.fieldValue,
agent: this.powerJson.agent.fieldValue,
payee: this.powerJson.payee.fieldValue,
bankName: this.powerJson.bankName.fieldValue,
bankAccount: this.powerJson.bankAccount.fieldValue,
paymentAmount: this.powerJson.paymentAmount.fieldValue,
reasonsPpayment: this.powerJson.reasonsPpayment.fieldValue
});*/
if (this.form.applyDept) {
this.selectedDept.push({ id: this.form.applyDept });
}
}
},
// 节点单击事件
handleNodeClick(data, checked) {
let flag = true;
this.selectedDept.forEach(item => {
if (data.id === item.id) {
flag = false;
}
});
if (flag) {
this.selectedDept.push(data);
} else {
this.selectedDept = this.selectedDept.filter(item => {
if (data.id !== item.id) {
return true;
}
});
}
this.form.applyDept =
this.selectedDept.length > 0
? this.selectedDept[this.selectedDept.length - 1].id
: "";
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
/**
* @author: jooey wong
* @description: 提交表单，验证表单 返回给父组件
* @return:
*/
submitForm() {
let returnData = {
cmd: "iframeSubmit",
params: {
success: true,
data: null
}
};
this.$refs.form.validate(valid => {
if (valid) {
returnData.params.success = true;
returnData.params.data = this.form;
} else {
returnData.params.success = false;
}
// 向父vue页面发送信息
window.parent.postMessage(returnData, "*");
});
},
/**
* 获取iframe页面所需数据
*/
getNeedData() {
let returnData = {
cmd: "iframeGetData",
params: {
api: ["treeselect"]
}
};
// 向父vue页面发送信息
window.parent.postMessage(returnData, "*");
},
/**
* @author WangXinYu
* @describe 获取当前的iframe高度
**/
getClientHeight() {
const clientHeight = document.getElementById("template-app")
.offsetHeight;
const data = {
cmd: "getClientHeight",
params: {
clientHeight: clientHeight + 100
}
};
window.parent.postMessage(data, "*");
},
/**
* @author WangXinYu
* @describe 提交节点 提交按钮触发事件
**/
onSubmissionProcess() {
let returnData = {
cmd: "onSubmissionProcess",
params: {
success: true,
data: null
}
};
// 处理数据变为请求需要的参数格式
// 提交流程 需要填写 名称 人员类别 职务 离职类别 交接状态 所在部门
// 提交节点 提交功能的specialTag Array
// 返回的表单字段
const queryDtoArray = [];
// 只要是可显示的字段 就传回去
Object.keys(this.powerJson).forEach(key => {
const powerJsonItem = this.powerJson[key];
if (powerJsonItem.isRead) {
queryDtoArray.push({
fieldId: powerJsonItem.businessId,
fieldValue: this.form[key],
remark: ""
});
}
});
returnData.params.data = queryDtoArray;
// 向父组件发送请求
window.parent.postMessage(returnData, "*");
// this.$refs.form.validate(valid => {
// if (valid) {
// returnData.params.success = true;
// returnData.params.data = this.form;
// } else {
// returnData.params.success = false;
// }
// // 向父vue页面发送信息
// });
},
/**
* @author: Comrade Wong
* @describe: 处理审批流程的通过或者驳回或者完成
**/
handlePassOrRejected() {
let returnData = {
cmd: "completeTask",
params: {
success: true,
data: null
}
};
// 返回的表单字段
const queryDtoArray = [];
// 只要是可显示的字段 就传回去
Object.keys(this.powerJson).forEach(key => {
const powerJsonItem = this.powerJson[key];
if (powerJsonItem.isRead) {
queryDtoArray.push({
fieldId: powerJsonItem.businessId,
fieldValue: this.form[key],
remark: ""
});
}
});
returnData.params.data = queryDtoArray;
// 向父组件发送请求
window.parent.postMessage(returnData, "*");
}
}
});
</script>
</html>
public/template/unionConsolationFund.html deleted 100644 → 0
View file @ 779a0f09
<!-- {"fieldList":[{"key":"1-1","fieldType":"dateTime","fieldName":"提交日期","specialTag":"submitDate","ruleRegular":"","ruleApi":"","sort":"0","showHeader":"0","filter":"0","filterOrder":"1","value":"","placeholder":"请输入提交日期","column":24,"required":false,"becomeFilter":false},{"key":"1-2","fieldType":"select","fieldName":"申请部门","specialTag":"applyDept","sort":"0","showHeader":"1","filter":"0","filterOrder":"3","fieldOptionMode":"origin","fieldOptionOrigin":"getDepts","value":"","placeholder":"请选择部门","sortPriority":0,"column":24,"required":true,"optionMode":"static","becomeFilter":false},{"key":"1-3","fieldType":"input","fieldName":"经办人","sort":"0","showHeader":"0","filter":"0","filterOrder":"2","specialTag":"agent","value":"","placeholder":"请填写经办人","sortPriority":0,"column":24,"required":false,"optionMode":"static","becomeFilter":false},{"key":"1-4","fieldType":"select","fieldName":"收款人","specialTag":"payee","value":"","placeholder":"请填写收款人","sort":"0","showHeader":"1","filter":"0","filterOrder":"4","fieldOptionMode":"static","fieldOptionStatic":[{"label":"选项1","value":"1"},{"label":"选项2","value":"2"}],"sortPriority":0,"column":24,"required":false,"optionMode":"static","becomeFilter":false},{"key":"1-5","fieldType":"input","ruleRegular":"","sortPriority":0,"ruleApi":"","fieldName":"开户行","specialTag":"bankName","value":"","placeholder":"请输入开户行","column":24,"required":false,"becomeFilter":false},{"key":"1-6","fieldType":"input","fieldName":"账号","value":"","specialTag":"bankAccount","sortPriority":0,"column":24,"required":false,"optionMode":"static","becomeFilter":false},{"key":"1-7","fieldType":"input","fieldName":"付款金额","value":"","specialTag":"paymentAmount","sortPriority":0,"column":24,"required":false,"optionMode":"static","becomeFilter":false},{"key":"1-8","fieldType":"textarea","fieldName":"付款事由","value":"","specialTag":"reasonsPpayment","sortPriority":0,"column":24,"required":false,"optionMode":"static","becomeFilter":false}]} -->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<!-- 声明文档使用的字符编码 -->
<meta charset="utf-8" />
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 页面描述 -->
<meta name="description" content="工会慰问金流程模板" />
<!-- 页面关键词 -->
<meta name="keywords" content="" />
<!-- 网页作者 -->
<meta name="wang" content="wang, comrade.wang.cn@gmail.com" />
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow" />
<!-- 为移动设备添加 viewport -->
<meta
name="viewport"
content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"
/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
<title>交接管理流程模板</title>
<!-- 引入element-ui样式 -->
<link
rel="stylesheet"
href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css"
/>
</head>
<body>
<div id="template-app">
<el-form
size="small"
ref="form"
:rules="rules"
:model="form"
label-width="120px"
ref="ruleForm"
>
<el-form-item
v-if="formItemVisible('submitDate')"
label="提交日期"
prop="submitDate"
>
<el-date-picker
v-if="formItemEditable('submitDate')"
v-model="form.submitDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择提交日期"
>
</el-date-picker>
<div v-else>{{form.submitDate}}</div>
</el-form-item>
<el-form-item
v-if="formItemVisible('applyDept')"
prop="applyDept"
label="申请部门"
>
<div v-if="formItemEditable('submitDate')">
<el-button type="primary" @click="dialogDeptVisible = true"
>选择</el-button
>
<div class="select-string" :title="selectedDeptString">
{{ selectedDeptString }}
</div>
</div>
<div v-else>{{ selectedDeptString }}</div>
</el-form-item>
<el-form-item
v-if="formItemVisible('agent')"
label="经办人"
prop="agent"
clearable
>
<el-input
v-if="formItemEditable('agent')"
v-model="form.agent"
></el-input>
<div v-else>{{form.agent}}</div>
</el-form-item>
<el-form-item
v-if="formItemVisible('payee')"
label="收款人"
prop="payee"
clearable
>
<el-input
v-if="formItemEditable('payee')"
v-model="form.payee"
></el-input>
<div v-else>{{form.payee}}</div>
</el-form-item>
<el-form-item
v-if="formItemVisible('bankName')"
label="开户行"
prop="bankName"
clearable
>
<el-input
v-if="formItemEditable('bankName')"
v-model="form.bankName"
></el-input>
<div v-else>{{form.bankName}}</div>
</el-form-item>
<el-form-item
v-if="formItemVisible('bankAccount')"
label="账号"
prop="bankAccount"
clearable
>
<el-input
v-if="formItemEditable('bankAccount')"
v-model="form.bankAccount"
></el-input>
<div v-else>{{form.bankAccount}}</div>
</el-form-item>
<el-form-item
v-if="formItemVisible('paymentAmount')"
label="付款金额"
prop="paymentAmount"
clearable
>
<el-input
v-if="formItemEditable('paymentAmount')"
v-model="form.paymentAmount"
></el-input>
<div v-else>{{form.paymentAmount}}</div>
</el-form-item>
<el-form-item
v-if="formItemVisible('paymentAmount')"
label="付款金额"
clearable
>
<div>{{transferMoney(form.paymentAmount)}}</div>
</el-form-item>
<el-form-item
v-if="formItemVisible('reasonsPpayment')"
label="付款事由"
prop="reasonsPpayment"
clearable
>
<el-input
v-if="formItemEditable('reasonsPpayment')"
type="textarea"
v-model="form.reasonsPpayment"
></el-input>
<div v-else>{{form.reasonsPpayment}}</div>
</el-form-item>
</el-form>
<!-- 部门弹出框-->
<el-dialog
:close-on-click-modal="false"
title="部门信息"
:visible.sync="dialogDeptVisible"
:show-close="false"
:modal="false"
:destroy-on-close="true"
>
<el-tree
ref="tree"
:data="depts"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
:show-checkbox="true"
default-expand-all
node-key="id"
:default-checked-keys="checkedKey"
@check="handleNodeClick"
></el-tree>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogDeptVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogDeptVisible = false"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</body>
<!-- 引入版本为 2.6.11的vue文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<!-- axios支持 -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script>
const vm = new Vue({
el: "#template-app",
data: function() {
return {
// 权限Json
powerJson: {},
// 默认选中的部门
selectedDept: [],
defaultProps: {
children: "children",
label: "label"
},
//选择部门弹出框
dialogDeptVisible: false,
// 部门信息
depts: [],
// 是否可编辑
editable: true,
myMessage: "123123",
form: {
// 提交日期
submitDate: "",
// 申请部门
applyDept: "",
// 经办人
agent: "",
// 收款人
payee: "",
// 开户行
bankName: "",
// 账号
bankAccount: "",
// 付款金额
paymentAmount: "",
//付款事由
reasonsPpayment: ""
},
rules: {
submitDate: [
{
type: "date",
required: true,
message: "请选择提交日期",
trigger: "change"
}
],
applyDept: [
{ required: true, message: "请选择部门", trigger: "blur" },
{
validator: this.applyDeptPass,
trigger: "blur"
}
],
agent: [
{ required: true, message: "请输入经办人", trigger: "blur" }
],
bankName: [
{ required: true, message: "请输入收款人", trigger: "blur" }
],
bankAccount: [
{ required: true, message: "请输入账号", trigger: "blur" }
],
paymentAmount: [
{ required: true, message: "请输入付款金额", trigger: "blur" }
],
reasonsPpayment: [
{ required: true, message: "请输入付款事由", trigger: "blur" }
],
payee: [
{ required: true, message: "请输入开户行", trigger: "blur" }
]
}
};
},
filters: {
typeFilter(value, options) {
if (value && value !== "") {
const obj = options.find(item => {
return item.value === value;
});
return obj.label;
}
return "";
}
},
computed: {
checkedKey() {
return this.selectedDept.map(item => {
return item.id;
});
},
selectedDeptString() {
return this.selectedDept
.map(item => {
return item.label;
})
.toString();
},
// 计算 form-item 是否显示
formItemVisible() {
return specialTag => {
const temp = this.powerJson.flowType
? (this.powerJson.flowType === 3 || this.powerJson.flowType === 4)
? true
: this.powerJson[specialTag] &&
Number(this.powerJson[specialTag].isRead)
: true;
return temp;
};
},
// 计算 form-item 中是否可编辑
formItemEditable() {
return specialTag => {
// 判断进入的详情页是否为已办(flowType = 3) 如为已办 则所有项为只读
const temp = this.powerJson.flowType
? (this.powerJson.flowType === 3 || this.powerJson.flowType === 4)
? false
: Number(this.powerJson[specialTag].isEdit)
: true;
return temp;
};
},
// 数字转换汉字钱
transferMoney() {
return n => {
const fraction = ["角", "分"];
const digit = [
"零",
"壹",
"贰",
"叁",
"肆",
"伍",
"陆",
"柒",
"捌",
"玖"
];
const unit = [["元", "万", "亿"], ["", "拾", "佰", "仟"]];
const head = n < 0 ? "欠" : "";
n = Math.abs(n);
let s = "";
for (let i = 0; i < fraction.length; i++) {
s += (
digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]
).replace(/零./, "");
}
s = s || "整";
n = Math.floor(n);
for (let i = 0; i < unit[0].length && n > 0; i++) {
let p = "";
for (let j = 0; j < unit[1].length && n > 0; j++) {
p = digit[n % 10] + unit[1][j] + p;
n = Math.floor(n / 10);
}
s =
p.replace(/(零.)*零$/, "").replace(/^$/, "零") + unit[0][i] + s;
}
return (
head +
s
.replace(/(零.)*零元/, "元")
.replace(/(零.)+/g, "零")
.replace(/^整$/, "零元整")
);
};
}
},
created() {},
mounted() {
const self = this;
this.getNeedData();
// 接受父页面发来的信息
window.addEventListener("message", event => {
const data = event.data;
const switchCmd = {
// 编辑时查询并回显表单数据
getFormJson: () => {
this.form = data.params.form;
},
// 提交节点 提交事件
onSubmit: () => {
// this.submitForm();
this.onSubmissionProcess();
},
// 返回数据处理
backData: () => {
if (data.params.name === "treeselect") {
this.depts = data.params.data.data;
const timer = setInterval(function() {
if (self.powerJson.flowType){
clearInterval(timer)
self.getSelectDeptLabel();
}
},100)
}
},
// 获取表单权限是否只读信息
powerJson: () => {
this.handlePowerJson(data.params);
},
// 审批通过或者驳回事件
onPassOrRejected() {
self.handlePassOrRejected();
}
};
switchCmd[data.cmd] && switchCmd[data.cmd]();
});
this.$nextTick(() => {
this.getClientHeight();
});
},
methods: {
/**
* @Description: 获取所选dept label
* @author liuhuaizhi
* @date 2020/7/24
*/
getSelectDeptLabel() {
const that = this;
this.selectedDept.forEach(item => {
item["label"] = that.getSelectDeptLabelChildren(item, that.depts);
});
this.selectedDept = this.selectedDept.map(item => {
return item
})
},
getSelectDeptLabelChildren(item, array) {
const that = this;
for (let i= 0; i< array.length;i++){
if (Number(item.id) === Number(array[i].id)) {
return array[i].label;
} else if (array[i].children && array[i].children.length > 0) {
let temp = that.getSelectDeptLabelChildren(item, array[i].children);
if (temp) {
return temp;
}
}
}
},
applyDeptPass(rule, value, callback) {
if (!this.selectedDeptString) {
callback(new Error("请选择所属部门"));
} else {
callback();
}
},
// 处理表单权限是否只读信息
handlePowerJson(params) {
this.powerJson = Object.assign({}, params);
// 根据flowType考虑是否将form赋值
if (this.powerJson.flowType && this.powerJson.flowType !== 1) {
for (key in this.powerJson) {
this.$set(this.form, key, this.powerJson[key].fieldValue);
}
/*this.form = Object.assign({}, {
submitDate: this.powerJson.submitDate.fieldValue,
applyDept: this.powerJson.applyDept.fieldValue,
agent: this.powerJson.agent.fieldValue,
payee: this.powerJson.payee.fieldValue,
bankName: this.powerJson.bankName.fieldValue,
bankAccount: this.powerJson.bankAccount.fieldValue,
paymentAmount: this.powerJson.paymentAmount.fieldValue,
reasonsPpayment: this.powerJson.reasonsPpayment.fieldValue
});*/
if (this.form.applyDept) {
this.selectedDept.push({ id: this.form.applyDept });
}
}
},
// 节点单击事件
handleNodeClick(data, checked) {
let flag = true;
this.selectedDept.forEach(item => {
if (data.id === item.id) {
flag = false;
}
});
if (flag) {
this.selectedDept.push(data);
} else {
this.selectedDept = this.selectedDept.filter(item => {
if (data.id !== item.id) {
return true;
}
});
}
this.form.applyDept =
this.selectedDept.length > 0
? this.selectedDept[this.selectedDept.length - 1].id
: "";
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
/**
* @author: jooey wong
* @description: 提交表单，验证表单 返回给父组件
* @return:
*/
submitForm() {
let returnData = {
cmd: "iframeSubmit",
params: {
success: true,
data: null
}
};
this.$refs.form.validate(valid => {
if (valid) {
returnData.params.success = true;
returnData.params.data = this.form;
} else {
returnData.params.success = false;
}
// 向父vue页面发送信息
window.parent.postMessage(returnData, "*");
});
},
/**
* 获取iframe页面所需数据
*/
getNeedData() {
let returnData = {
cmd: "iframeGetData",
params: {
api: ["treeselect"]
}
};
// 向父vue页面发送信息
window.parent.postMessage(returnData, "*");
},
/**
* @author WangXinYu
* @describe 获取当前的iframe高度
**/
getClientHeight() {
const clientHeight = document.getElementById("template-app")
.offsetHeight;
const data = {
cmd: "getClientHeight",
params: {
clientHeight: clientHeight + 100
}
};
window.parent.postMessage(data, "*");
},
/**
* @author WangXinYu
* @describe 提交节点 提交按钮触发事件
**/
onSubmissionProcess() {
let returnData = {
cmd: "onSubmissionProcess",
params: {
success: true,
data: null
}
};
// 处理数据变为请求需要的参数格式
// 提交流程 需要填写 名称 人员类别 职务 离职类别 交接状态 所在部门
// 提交节点 提交功能的specialTag Array
// 返回的表单字段
const queryDtoArray = [];
// 只要是可显示的字段 就传回去
Object.keys(this.powerJson).forEach(key => {
const powerJsonItem = this.powerJson[key];
if (powerJsonItem.isRead) {
queryDtoArray.push({
fieldId: powerJsonItem.businessId,
fieldValue: this.form[key],
remark: ""
});
}
});
returnData.params.data = queryDtoArray;
// 向父组件发送请求
window.parent.postMessage(returnData, "*");
// this.$refs.form.validate(valid => {
// if (valid) {
// returnData.params.success = true;
// returnData.params.data = this.form;
// } else {
// returnData.params.success = false;
// }
// // 向父vue页面发送信息
// });
},
/**
* @author: Comrade Wong
* @describe: 处理审批流程的通过或者驳回或者完成
**/
handlePassOrRejected() {
let returnData = {
cmd: "completeTask",
params: {
success: true,
data: null
}
};
// 返回的表单字段
const queryDtoArray = [];
// 只要是可显示的字段 就传回去
Object.keys(this.powerJson).forEach(key => {
const powerJsonItem = this.powerJson[key];
if (powerJsonItem.isRead) {
queryDtoArray.push({
fieldId: powerJsonItem.businessId,
fieldValue: this.form[key],
remark: ""
});
}
});
returnData.params.data = queryDtoArray;
// 向父组件发送请求
window.parent.postMessage(returnData, "*");
}
}
});
</script>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment