long
2 years ago
12 changed files with 1272 additions and 52 deletions
@ -0,0 +1,136 @@
|
||||
<template> |
||||
<div class="components-input-demo-presuffix"> |
||||
<!----> |
||||
<a-input @click="openModal" placeholder="请点击选择公司" v-model="departNames" readOnly :disabled="disabled"> |
||||
<a-icon slot="prefix" type="cluster" title="公司选择控件"/> |
||||
<a-icon v-if="departIds" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/> |
||||
</a-input> |
||||
|
||||
<j-select-company-modal |
||||
ref="innerDepartSelectModal" |
||||
:modal-width="modalWidth" |
||||
:multi="multi" |
||||
:rootOpened="rootOpened" |
||||
:depart-id="departIds" |
||||
@ok="handleOK" |
||||
@initComp="initComp"/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import JSelectCompanyModal from './modal/JSelectCompanyModal' |
||||
export default { |
||||
name: 'JSelectCompany', |
||||
components:{ |
||||
JSelectCompanyModal |
||||
}, |
||||
props:{ |
||||
modalWidth:{ |
||||
type:Number, |
||||
default:500, |
||||
required:false |
||||
}, |
||||
multi:{ |
||||
type:Boolean, |
||||
default:false, |
||||
required:false |
||||
}, |
||||
rootOpened:{ |
||||
type:Boolean, |
||||
default:true, |
||||
required:false |
||||
}, |
||||
value:{ |
||||
type:String, |
||||
required:false |
||||
}, |
||||
disabled:{ |
||||
type: Boolean, |
||||
required: false, |
||||
default: false |
||||
}, |
||||
// 自定义返回字段，默认返回 id |
||||
customReturnField: { |
||||
type: String, |
||||
default: 'id' |
||||
} |
||||
}, |
||||
data(){ |
||||
return { |
||||
visible:false, |
||||
confirmLoading:false, |
||||
departNames:"", |
||||
departIds:'' |
||||
} |
||||
}, |
||||
mounted(){ |
||||
this.departIds = this.value |
||||
}, |
||||
watch:{ |
||||
value(val){ |
||||
//update-begin-author:wangshuai date:20201124 for:组件 JSelectDepart.vue不是默认id时新内容编辑问题 gitee I247X2 |
||||
// if (this.customReturnField === 'id') { |
||||
this.departIds = val |
||||
// } |
||||
//update-end-author:wangshuai date:20201124 for:组件 JSelectDepart.vue不是默认id时新内容编辑问题 gitee I247X2 |
||||
} |
||||
}, |
||||
methods:{ |
||||
initComp(departNames){ |
||||
this.departNames = departNames |
||||
//update-begin-author:lvdandan date:20200513 for:TESTA-438 部门选择组件自定义返回值，数据无法回填 |
||||
//TODO 当返回字段为部门名称时会有问题,因为部门名称不唯一 |
||||
//返回字段不为id时，根据返回字段获取id |
||||
if(this.customReturnField !== 'id' && this.value){ |
||||
const dataList = this.$refs.innerDepartSelectModal.dataList; |
||||
console.log('this.value',this.value) |
||||
this.departIds = this.value.split(',').map(item => { |
||||
const data = dataList.filter(d=>d[this.customReturnField] === item) |
||||
return data.length > 0 ? data[0].id : '' |
||||
}).join(',') |
||||
} |
||||
//update-end-author:lvdandan date:20200513 for:TESTA-438 部门选择组件自定义返回值，数据无法回填 |
||||
}, |
||||
openModal(){ |
||||
this.$refs.innerDepartSelectModal.show() |
||||
}, |
||||
handleOK(rows, idstr) { |
||||
let value = '' |
||||
if (!rows && rows.length <= 0) { |
||||
this.departNames = '' |
||||
this.departIds = '' |
||||
} else { |
||||
value = rows.map(row => row[this.customReturnField]).join(',') |
||||
this.departNames = rows.map(row => row['departName']).join(',') |
||||
this.departIds = idstr |
||||
} |
||||
this.$emit("change", value) |
||||
}, |
||||
getDepartNames(){ |
||||
return this.departNames |
||||
}, |
||||
handleEmpty(){ |
||||
this.handleOK('') |
||||
} |
||||
}, |
||||
model: { |
||||
prop: 'value', |
||||
event: 'change' |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.components-input-demo-presuffix .anticon-close-circle { |
||||
cursor: pointer; |
||||
color: #ccc; |
||||
transition: color 0.3s; |
||||
font-size: 12px; |
||||
} |
||||
.components-input-demo-presuffix .anticon-close-circle:hover { |
||||
color: #f5222d; |
||||
} |
||||
.components-input-demo-presuffix .anticon-close-circle:active { |
||||
color: #666; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,248 @@
|
||||
<template> |
||||
<j-modal |
||||
title="选择公司" |
||||
:width="modalWidth" |
||||
:visible="visible" |
||||
:confirmLoading="confirmLoading" |
||||
@ok="handleSubmit" |
||||
@cancel="handleCancel" |
||||
switchFullscreen |
||||
cancelText="关闭"> |
||||
<a-spin tip="Loading..." :spinning="false"> |
||||
<a-input-search style="margin-bottom: 1px" placeholder="请输入公司名称按回车进行搜索" @search="onSearch" /> |
||||
<a-tree |
||||
checkable |
||||
class="my-dept-select-tree" |
||||
:treeData="treeData" |
||||
:checkStrictly="true" |
||||
@check="onCheck" |
||||
@select="onSelect" |
||||
@expand="onExpand" |
||||
:autoExpandParent="autoExpandParent" |
||||
:expandedKeys="expandedKeys" |
||||
:checkedKeys="checkedKeys"> |
||||
|
||||
<template slot="title" slot-scope="{title}"> |
||||
<span v-if="title.indexOf(searchValue) > -1"> |
||||
{{title.substr(0, title.indexOf(searchValue))}} |
||||
<span style="color: #f50">{{searchValue}}</span> |
||||
{{title.substr(title.indexOf(searchValue) + searchValue.length)}} |
||||
</span> |
||||
<span v-else>{{title}}</span> |
||||
</template> |
||||
</a-tree> |
||||
|
||||
</a-spin> |
||||
</j-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import { queryCompanyTreeList } from '@/api/api' |
||||
export default { |
||||
name: 'JSelectCompanyModal', |
||||
props:['modalWidth','multi','rootOpened','departId'], |
||||
data(){ |
||||
return { |
||||
visible:false, |
||||
confirmLoading:false, |
||||
treeData:[], |
||||
autoExpandParent:true, |
||||
expandedKeys:[], |
||||
dataList:[], |
||||
checkedKeys:[], |
||||
checkedRows:[], |
||||
searchValue:"" |
||||
} |
||||
}, |
||||
created(){ |
||||
this.loadDepart(); |
||||
}, |
||||
watch:{ |
||||
departId(){ |
||||
this.initDepartComponent() |
||||
}, |
||||
visible: { |
||||
handler() { |
||||
if (this.departId) { |
||||
this.checkedKeys = this.departId.split(","); |
||||
// console.log('this.departId', this.departId) |
||||
} else { |
||||
this.checkedKeys = []; |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
methods:{ |
||||
show(){ |
||||
this.visible=true |
||||
this.checkedRows=[] |
||||
this.checkedKeys=[] |
||||
}, |
||||
loadDepart(){ |
||||
queryCompanyTreeList().then(res=>{ |
||||
if(res.success){ |
||||
let arr = [...res.result] |
||||
this.reWriterWithSlot(arr) |
||||
this.treeData = arr |
||||
this.initDepartComponent() |
||||
if(this.rootOpened){ |
||||
this.initExpandedKeys(res.result) |
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
initDepartComponent(){ |
||||
let names = '' |
||||
if(this.departId){ |
||||
let currDepartId = this.departId |
||||
for(let item of this.dataList){ |
||||
if(currDepartId.indexOf(item.key)>=0){ |
||||
names+=","+item.title |
||||
} |
||||
} |
||||
if(names){ |
||||
names = names.substring(1) |
||||
} |
||||
} |
||||
this.$emit("initComp",names) |
||||
}, |
||||
reWriterWithSlot(arr){ |
||||
for(let item of arr){ |
||||
if(item.children && item.children.length>0){ |
||||
this.reWriterWithSlot(item.children) |
||||
let temp = Object.assign({},item) |
||||
temp.children = {} |
||||
this.dataList.push(temp) |
||||
}else{ |
||||
this.dataList.push(item) |
||||
item.scopedSlots={ title: 'title' } |
||||
} |
||||
} |
||||
}, |
||||
initExpandedKeys(arr){ |
||||
if(arr && arr.length>0){ |
||||
let keys = [] |
||||
for(let item of arr){ |
||||
if(item.children && item.children.length>0){ |
||||
keys.push(item.id) |
||||
} |
||||
} |
||||
this.expandedKeys=[...keys] |
||||
}else{ |
||||
this.expandedKeys=[] |
||||
} |
||||
}, |
||||
onCheck (checkedKeys,info) { |
||||
if(!this.multi){ |
||||
let arr = checkedKeys.checked.filter(item => this.checkedKeys.indexOf(item) < 0) |
||||
this.checkedKeys = [...arr] |
||||
this.checkedRows = (this.checkedKeys.length === 0) ? [] : [info.node.dataRef] |
||||
}else{ |
||||
this.checkedKeys = checkedKeys.checked |
||||
this.checkedRows = this.getCheckedRows(this.checkedKeys) |
||||
} |
||||
}, |
||||
onSelect(selectedKeys,info) { |
||||
let keys = [] |
||||
keys.push(selectedKeys[0]) |
||||
if(!this.checkedKeys || this.checkedKeys.length===0 || !this.multi){ |
||||
this.checkedKeys = [...keys] |
||||
this.checkedRows=[info.node.dataRef] |
||||
}else{ |
||||
let currKey = info.node.dataRef.key |
||||
if(this.checkedKeys.indexOf(currKey)>=0){ |
||||
this.checkedKeys = this.checkedKeys.filter(item=> item !==currKey) |
||||
}else{ |
||||
this.checkedKeys.push(...keys) |
||||
} |
||||
} |
||||
this.checkedRows = this.getCheckedRows(this.checkedKeys) |
||||
}, |
||||
onExpand (expandedKeys) { |
||||
this.expandedKeys = expandedKeys |
||||
this.autoExpandParent = false |
||||
}, |
||||
handleSubmit(){ |
||||
if(!this.checkedKeys || this.checkedKeys.length==0){ |
||||
this.$emit("ok",'') |
||||
}else{ |
||||
this.$emit("ok",this.checkedRows,this.checkedKeys.join(",")) |
||||
} |
||||
this.handleClear() |
||||
}, |
||||
handleCancel(){ |
||||
this.handleClear() |
||||
}, |
||||
handleClear(){ |
||||
this.visible=false |
||||
this.checkedKeys=[] |
||||
}, |
||||
getParentKey(currKey,treeData){ |
||||
let parentKey |
||||
for (let i = 0; i < treeData.length; i++) { |
||||
const node = treeData[i] |
||||
if (node.children) { |
||||
if (node.children.some(item => item.key === currKey)) { |
||||
parentKey = node.key |
||||
} else if (this.getParentKey(currKey, node.children)) { |
||||
parentKey = this.getParentKey(currKey, node.children) |
||||
} |
||||
} |
||||
} |
||||
return parentKey |
||||
}, |
||||
onSearch(value){ |
||||
const expandedKeys = this.dataList.map((item) => { |
||||
if (item.title.indexOf(value) > -1) { |
||||
return this.getParentKey(item.key,this.treeData) |
||||
} |
||||
return null |
||||
}).filter((item, i, self) => item && self.indexOf(item) === i) |
||||
|
||||
Object.assign(this, { |
||||
expandedKeys, |
||||
searchValue: value, |
||||
autoExpandParent: true, |
||||
}) |
||||
|
||||
|
||||
}, |
||||
// 根据 checkedKeys 获取 rows |
||||
getCheckedRows(checkedKeys) { |
||||
const forChildren = (list, key) => { |
||||
for (let item of list) { |
||||
if (item.id === key) { |
||||
return item |
||||
} |
||||
if (item.children instanceof Array) { |
||||
let value = forChildren(item.children, key) |
||||
if (value != null) { |
||||
return value |
||||
} |
||||
} |
||||
} |
||||
return null |
||||
} |
||||
|
||||
let rows = [] |
||||
for (let key of checkedKeys) { |
||||
let row = forChildren(this.treeData, key) |
||||
if (row != null) { |
||||
rows.push(row) |
||||
} |
||||
} |
||||
return rows |
||||
} |
||||
} |
||||
} |
||||
|
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
// 限制部门选择树高度，避免部门太多时点击确定不便 |
||||
.my-dept-select-tree{ |
||||
height: 350px; |
||||
overflow-y: scroll; |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,175 @@
|
||||
<template> |
||||
<a-spin :spinning="confirmLoading"> |
||||
<j-form-container :disabled="formDisabled"> |
||||
<a-form :form="form" slot="detail"> |
||||
<a-row> |
||||
<!--<a-col :span="24"> |
||||
<a-form-item label="创建人" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input v-decorator="['createBy']" placeholder="请输入创建人" ></a-input> |
||||
</a-form-item> |
||||
</a-col>--> |
||||
<a-col :span="24"> |
||||
<a-form-item label="流转意见" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<j-editor v-decorator="['opinion',{trigger:'input'}]" /> |
||||
</a-form-item> |
||||
</a-col> |
||||
<!-- <a-col :span="24"> |
||||
<a-form-item label="删除标志" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number v-decorator="['delFlag']" placeholder="请输入删除标志" style="width: 100%" /> |
||||
</a-form-item> |
||||
</a-col> |
||||
<a-col :span="24"> |
||||
<a-form-item label="删除时间" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<j-date placeholder="请选择删除时间" v-decorator="['delTime']" :trigger-change="true" style="width: 100%" /> |
||||
</a-form-item> |
||||
</a-col>--> |
||||
<a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center"> |
||||
<a-button @click="submitForm">提 交</a-button> |
||||
</a-col> |
||||
</a-row> |
||||
</a-form> |
||||
</j-form-container> |
||||
</a-spin> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import { httpAction, getAction } from '@/api/manage' |
||||
import pick from 'lodash.pick' |
||||
import { validateDuplicateValue } from '@/utils/util' |
||||
import JFormContainer from '@/components/jeecg/JFormContainer' |
||||
import JDate from '@/components/jeecg/JDate' |
||||
import JEditor from '@/components/jeecg/JEditor' |
||||
|
||||
export default { |
||||
name: 'ProcessOpinionForm', |
||||
components: { |
||||
JFormContainer, |
||||
JDate, |
||||
JEditor, |
||||
}, |
||||
props: { |
||||
//流程表单data |
||||
formData: { |
||||
type: Object, |
||||
default: ()=>{}, |
||||
required: false |
||||
}, |
||||
//表单模式：true流程表单 false普通表单 |
||||
formBpm: { |
||||
type: Boolean, |
||||
default: false, |
||||
required: false |
||||
}, |
||||
//表单禁用 |
||||
disabled: { |
||||
type: Boolean, |
||||
default: false, |
||||
required: false |
||||
} |
||||
}, |
||||
data () { |
||||
return { |
||||
form: this.$form.createForm(this), |
||||
model: {}, |
||||
labelCol: { |
||||
xs: { span: 24 }, |
||||
sm: { span: 5 }, |
||||
}, |
||||
wrapperCol: { |
||||
xs: { span: 24 }, |
||||
sm: { span: 16 }, |
||||
}, |
||||
confirmLoading: false, |
||||
validatorRules: { |
||||
}, |
||||
url: { |
||||
add: "/hy/processOpinion/add", |
||||
edit: "/hy/processOpinion/edit", |
||||
queryById: "/hy/processOpinion/queryById" |
||||
} |
||||
} |
||||
}, |
||||
computed: { |
||||
formDisabled(){ |
||||
if(this.formBpm===true){ |
||||
if(this.formData.disabled===false){ |
||||
return false |
||||
} |
||||
return true |
||||
} |
||||
return this.disabled |
||||
}, |
||||
showFlowSubmitButton(){ |
||||
if(this.formBpm===true){ |
||||
if(this.formData.disabled===false){ |
||||
return true |
||||
} |
||||
} |
||||
return false |
||||
} |
||||
}, |
||||
created () { |
||||
//如果是流程中表单，则需要加载流程表单data |
||||
this.showFlowData(); |
||||
}, |
||||
methods: { |
||||
add () { |
||||
this.edit({}); |
||||
}, |
||||
edit (record) { |
||||
this.form.resetFields(); |
||||
this.model = Object.assign({}, record); |
||||
this.visible = true; |
||||
this.$nextTick(() => { |
||||
this.form.setFieldsValue(pick(this.model,'createBy','opinion','delFlag','delTime')) |
||||
}) |
||||
}, |
||||
//渲染流程表单数据 |
||||
showFlowData(){ |
||||
if(this.formBpm === true){ |
||||
let params = {id:this.formData.dataId}; |
||||
getAction(this.url.queryById,params).then((res)=>{ |
||||
if(res.success){ |
||||
this.edit (res.result); |
||||
} |
||||
}); |
||||
} |
||||
}, |
||||
submitForm () { |
||||
const that = this; |
||||
// 触发表单验证 |
||||
this.form.validateFields((err, values) => { |
||||
if (!err) { |
||||
that.confirmLoading = true; |
||||
let httpurl = ''; |
||||
let method = ''; |
||||
if(!this.model.id){ |
||||
httpurl+=this.url.add; |
||||
method = 'post'; |
||||
}else{ |
||||
httpurl+=this.url.edit; |
||||
method = 'put'; |
||||
} |
||||
let formData = Object.assign(this.model, values); |
||||
console.log("表单提交数据",formData) |
||||
httpAction(httpurl,formData,method).then((res)=>{ |
||||
if(res.success){ |
||||
that.$message.success(res.message); |
||||
that.$emit('ok'); |
||||
}else{ |
||||
that.$message.warning(res.message); |
||||
} |
||||
}).finally(() => { |
||||
that.confirmLoading = false; |
||||
}) |
||||
} |
||||
|
||||
}) |
||||
}, |
||||
popupCallback(row){ |
||||
this.form.setFieldsValue(pick(row,'createBy','opinion','delFlag','delTime')) |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue