Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
457da5df by xiaomiao
Options

Merge branch 'dev' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web into dev

2 parents b27c9ed7 e358c272
Inline Side-by-side
Showing 41 changed files with 1655 additions and 5939 deletions
......@@ -6,6 +6,11 @@ import afterLeave from 'element-ui/src/utils/after-leave';
const Mask = Vue.extend(Loading);
const loadingDirective = {};
/**
* @description: install
* @author: renchao
*/
loadingDirective.install = Vue => {
if (Vue.prototype.$isServer) return;
const toggleLoading = (el, binding) => {
......@@ -110,14 +115,24 @@ loadingDirective.install = Vue => {
binding.value && toggleLoading(el, binding);
},
/**
* @description: update
* @param {*} el
* @param {*} binding
* @author: renchao
*/
update: function (el, binding) {
el.instance.setText(el.getAttribute('element-loading-text'));
if (binding.oldValue !== binding.value) {
toggleLoading(el, binding);
}
},
/**
* @description: unbind
* @param {*} el
* @param {*} binding
* @author: renchao
*/
unbind: function (el, binding) {
if (el.domInserted) {
el.mask &&
......
......@@ -20,6 +20,10 @@ let fullscreenLoading;
LoadingConstructor.prototype.originalPosition = '';
LoadingConstructor.prototype.originalOverflow = '';
/**
* @description: close
* @author: renchao
*/
LoadingConstructor.prototype.close = function() {
if (this.fullscreen) {
fullscreenLoading = undefined;
......@@ -38,6 +42,13 @@ LoadingConstructor.prototype.close = function() {
this.visible = false;
};
/**
* @description: addStyle
* @param {*} options
* @param {*} parent
* @param {*} instance
* @author: renchao
*/
const addStyle = (options, parent, instance) => {
let maskStyle = {};
if (options.fullscreen) {
......@@ -64,6 +75,10 @@ const addStyle = (options, parent, instance) => {
});
};
/**
* @description: Loading
* @author: renchao
*/
const Loading = (options = {}) => {
if (Vue.prototype.$isServer) return;
options = merge({}, defaults, options);
......
......@@ -43,6 +43,11 @@ const MessageBoxConstructor = Vue.extend(msgboxVue);
let currentMsg, instance;
let msgQueue = [];
/**
* @description: defaultCallback
* @author: renchao
*/
const defaultCallback = action => {
if (currentMsg) {
let callback = currentMsg.callback;
......@@ -56,6 +61,10 @@ const defaultCallback = action => {
}
};
/**
* @description: initInstance
* @author: renchao
*/
const initInstance = () => {
instance = new MessageBoxConstructor({
el: document.createElement('div')
......@@ -64,6 +73,10 @@ const initInstance = () => {
instance.callback = defaultCallback;
};
/**
* @description: showNextMsg
* @author: renchao
*/
const showNextMsg = () => {
if (!instance) {
initInstance();
......@@ -109,6 +122,10 @@ const showNextMsg = () => {
}
};
/**
* @description: MessageBox
* @author: renchao
*/
const MessageBox = function (options, callback) {
if (Vue.prototype.$isServer) return;
if (typeof options === 'string' || isVNode(options)) {
......@@ -143,10 +160,18 @@ const MessageBox = function (options, callback) {
}
};
/**
* @description: setDefaults
* @author: renchao
*/
MessageBox.setDefaults = defaults => {
MessageBox.defaults = defaults;
};
/**
* @description: alert
* @author: renchao
*/
MessageBox.alert = (title, message, options) => {
if (typeof title === 'object') {
options = title;
......@@ -163,6 +188,10 @@ MessageBox.alert = (title, message, options) => {
}, options));
};
/**
* @description: close
* @author: renchao
*/
MessageBox.close = () => {
instance.doClose();
instance.visible = false;
......
......@@ -97,6 +97,10 @@ export default {
},
methods: {
/**
* @description: getSafeClose
* @author: renchao
*/
getSafeClose () {
const currentId = this.uid;
return () => {
......@@ -105,6 +109,10 @@ export default {
});
};
},
/**
* @description: doClose
* @author: renchao
*/
doClose () {
if (!this.visible) return;
this.visible = false;
......@@ -122,18 +130,31 @@ export default {
});
},
/**
* @description: handleWrapperClick
* @author: renchao
*/
handleWrapperClick () {
if (this.closeOnClickModal) {
this.handleAction(this.distinguishCancelAndClose ? 'close' : 'cancel');
}
},
/**
* @description: handleInputEnter
* @author: renchao
*/
handleInputEnter () {
if (this.inputType !== 'textarea') {
return this.handleAction('confirm');
}
},
/**
* @description: handleAction
* @param {*} action
* @author: renchao
*/
handleAction (action) {
if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) {
return;
......@@ -147,6 +168,10 @@ export default {
}
},
/**
* @description: validate
* @author: renchao
*/
validate () {
if (this.$type === 'prompt') {
const inputPattern = this.inputPattern;
......@@ -174,15 +199,27 @@ export default {
removeClass(this.getInputElement(), 'invalid');
return true;
},
/**
* @description: getFirstFocus
* @author: renchao
*/
getFirstFocus () {
const btn = this.$el.querySelector('.el-message-box__btns .el-button');
const title = this.$el.querySelector('.el-message-box__btns .el-message-box__title');
return btn || title;
},
/**
* @description: getInputElement
* @author: renchao
*/
getInputElement () {
const inputRefs = this.$refs.input.$refs;
return inputRefs.input || inputRefs.textarea;
},
/**
* @description: handleClose
* @author: renchao
*/
handleClose () {
this.handleAction('close');
}
......@@ -200,6 +237,11 @@ export default {
}
},
/**
* @description: visible
* @param {*} val
* @author: renchao
*/
visible (val) {
if (val) {
this.uid++;
......@@ -222,6 +264,10 @@ export default {
}
},
/**
* @description: mounted
* @author: renchao
*/
mounted () {
this.$nextTick(() => {
if (this.closeOnHashChange) {
......@@ -230,6 +276,10 @@ export default {
});
},
/**
* @description: beforeDestroy
* @author: renchao
*/
beforeDestroy () {
if (this.closeOnHashChange) {
window.removeEventListener('hashchange', this.close);
......@@ -298,4 +348,4 @@ export default {
/deep/.el-message-box__content {
padding-top: 0;
}
</style>
\ No newline at end of file
</style>
......
......@@ -49,10 +49,18 @@ export default {
}
},
methods: {
/**
* @description: handleNotice
* @param {*} item
* @author: renchao
*/
handleNotice (item) {
this.$alertMes(item.noticeTitle, item.noticeContent)
},
// 获取数据
/**
* @description: 获取数据
* @author: renchao
*/
getData () {
let style = document.styleSheets[0];
let text = this.$refs.text;
......@@ -72,13 +80,19 @@ export default {
this.changeState();
}, 300);
},
// 用速度计算时间（想要保持速度一样，2种状态时间不同需算出）
/**
* @description: 用速度计算时间（想要保持速度一样，2种状态时间不同需算出）
* @author: renchao
*/
ComputationTime () {
this.firstAnimationTime = this.wordLength / this.speed;
this.secondAnimationTime =
(this.wordLength + this.backWidth) / this.speed;
},
// 根据状态切换动画
/**
* @description: 根据状态切换动画
* @author: renchao
*/
changeState () {
let text = this.$refs.text;
if (this.state == 1) {
......@@ -88,6 +102,10 @@ export default {
text.style.animation = `secondAnimation ${this.secondAnimationTime}s linear infinite`;
}
},
/**
* @description: Listener
* @author: renchao
*/
Listener () {
let text = this.$refs.text;
text.addEventListener(
......@@ -98,10 +116,18 @@ export default {
false
)
},
/**
* @description: mouseOver
* @author: renchao
*/
mouseOver () {
let text = this.$refs.text;
text.style.animationPlayState = 'paused'
},
/**
* @description: mouseLeave
* @author: renchao
*/
mouseLeave () {
let text = this.$refs.text;
text.style.animationPlayState = ''
......@@ -151,4 +177,4 @@ export default {
}
}
}
</style>
\ No newline at end of file
</style>
......
......@@ -188,6 +188,10 @@
this.$img = this.$refs["img"];
},
methods: {
/**
* @description: imgLoaded
* @author: renchao
*/
imgLoaded () {
let imgInfo = this.$img.getBoundingClientRect();
if (JSON.stringify(this.imgInfo) != JSON.stringify(imgInfo)) {
......@@ -200,6 +204,10 @@
this.$emit("created", imgInfo);
}
},
/**
* @description: mouseMove
* @author: renchao
*/
mouseMove (e) {
if (!this.hideZoom && this.imgLoadedFlag) {
this.imgLoaded();
......@@ -225,6 +233,11 @@
selector.bgTop = addWidth - y * scale;
}
},
/**
* @description: initSelectorProperty
* @param {*} selectorWidth
* @author: renchao
*/
initSelectorProperty (selectorWidth) {
const selectorHalfWidth = selectorWidth / 2;
const selector = this.selector;
......@@ -236,12 +249,20 @@
selector.absoluteLeft = left + selectorHalfWidth + scrollLeft;
selector.absoluteTop = top + selectorHalfWidth + scrollTop;
},
/**
* @description: mouseLeave
* @author: renchao
*/
mouseLeave () {
this.hideSelector = true;
if (this.outShow) {
this.hideOutShow = true;
}
},
/**
* @description: reset
* @author: renchao
*/
reset () {
Object.assign(this.selector, {
top: 0,
......@@ -251,9 +272,18 @@
});
this.resetOutShowInitPosition();
},
/**
* @description: resetOutShowInitPosition
* @author: renchao
*/
resetOutShowInitPosition () {
this.outShowInitTop = 0;
},
/**
* @description: resetOutShowInitPosition
* @param {*} e
* @author: renchao
*/
imgerrorfun (e) {
// let img = require('@/assets/vehicle_img/blank_vehicle.jpg')
// this.url = img
......@@ -326,4 +356,4 @@
top: 50%;
transform: translateY(-50%);
}
</style>
\ No newline at end of file
</style>
......
......@@ -2,6 +2,15 @@ import Vue from 'vue'
import Popup from './index.vue'
const PopupBox = Vue.extend(Popup)
/**
* @description: install
* @param {*} title
* @param {*} editItem
* @param {*} data
* @param {*} formData
* @author: renchao
*/
Popup.install = function (title, editItem, data, formData) {
data.title = title
data.editItem = editItem
......
......@@ -55,7 +55,10 @@ export default {
}
},
mounted () {
// 计算滚动条高度
/**
* @description: 计算滚动条高度
* @author: renchao
*/
setTimeout(() => {
if (this.btnShow) {
if (this.height == 'auto') {
......@@ -73,10 +76,18 @@ export default {
}, 300)
},
methods: {
/**
* @description: onCancel
* @author: renchao
*/
onCancel () {
this.isShow = false
this.cancel()
},
/**
* @description: onConfirm
* @author: renchao
*/
onConfirm () {
this.loading = true
let res = new Promise((resolve, reject) => {
......@@ -87,9 +98,19 @@ export default {
this.isShow = false
}
},
/**
* @description: loadingFn
* @param {*} e
* @author: renchao
*/
loadingFn (e) { //加载状态
this.loading = e
},
/**
* @description: loadViewFn
* @param {*} view
* @author: renchao
*/
loadViewFn (view) {
return (r) =>
require.ensure([], () =>
......
/*
* @Description:
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-06-14 15:05:38
*/
......@@ -8,6 +8,10 @@ import Popup from './index.vue'
const PopupBox = Vue.extend(Popup)
let popuping = undefined
/**
* @description: close
* @author: renchao
*/
PopupBox.prototype.close = function () {
// 如果Popup 有引用，则去掉引用
if (popuping) {
......@@ -23,7 +27,14 @@ PopupBox.prototype.close = function () {
}
}, 300)
}
/**
* @description: Popup1
* @param {*} title
* @param {*} editItem
* @param {*} data
* @param {*} formData
* @author: renchao
*/
const Popup1 = (title, editItem, data, formData) => {
// 如果组件已渲染，则返回即可
if (popuping) {
......
......@@ -56,7 +56,10 @@
}
},
mounted () {
// 计算滚动条高度
/**
* @description: 计算滚动条高度
* @author: renchao
*/
setTimeout(() => {
if (this.btnShow) {
if (this.height == 'auto') {
......@@ -74,9 +77,17 @@
}, 300)
},
methods: {
/**
* @description: onCancel
* @author: renchao
*/
onCancel () {
Popup1().close()
},
/**
* @description: onConfirm
* @author: renchao
*/
onConfirm () {
let res = new Promise((resolve, reject) => {
this.confirm()
......@@ -86,6 +97,11 @@
this.isShow = false
}
},
/**
* @description: loadViewFn
* @param {*} view
* @author: renchao
*/
loadViewFn (view) {
return (r) =>
require.ensure([], () =>
......@@ -185,4 +201,3 @@
opacity: 0;
}
</style>
\ No newline at end of file
......
......@@ -84,6 +84,13 @@ export default {
},
methods: {
/**
* @description: updateStyle
* @param {*} style
* @param {*} oldCluster
* @param {*} newCluster
* @author: renchao
*/
updateStyle (style, oldCluster, newCluster) {
let newStyle = style
oldCluster.forEach((color, index) => {
......@@ -92,6 +99,12 @@ export default {
return newStyle
},
/**
* @description: getCSSString
* @param {*} url
* @param {*} variable
* @author: renchao
*/
getCSSString (url, variable) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest()
......@@ -106,6 +119,11 @@ export default {
})
},
/**
* @description: getThemeCluster
* @param {*} theme
* @author: renchao
*/
getThemeCluster (theme) {
const tintColor = (color, tint) => {
let red = parseInt(color.slice(0, 2), 16)
......@@ -169,4 +187,4 @@ export default {
.theme-picker-dropdown .el-color-dropdown__link-btn {
display: none;
}
</style>
\ No newline at end of file
</style>
......
......@@ -2,6 +2,10 @@ import objectAssign from 'element-ui/src/utils/merge';
import { markNodeData, NODE_KEY } from './util';
import { arrayFindIndex } from 'element-ui/src/utils/util';
/**
* @description: getChildState
* @author: renchao
*/
export const getChildState = node => {
let all = true;
let none = true;
......@@ -22,6 +26,11 @@ export const getChildState = node => {
return { all, none, allWithoutDisable, half: !all && !none };
};
/**
* @description: reInitChecked
* @param {*} node
* @author: renchao
*/
const reInitChecked = function(node) {
if (node.childNodes.length === 0 || node.loading) return;
......@@ -45,6 +54,12 @@ const reInitChecked = function(node) {
}
};
/**
* @description: getPropertyFromData
* @param {*} node
* @param {*} prop
* @author: renchao
*/
const getPropertyFromData = function(node, prop) {
const props = node.store.props;
const data = node.data || {};
......@@ -63,6 +78,11 @@ const getPropertyFromData = function(node, prop) {
let nodeIdSeed = 0;
export default class Node {
/**
* @description: constructor
* @param {*} options
* @author: renchao
*/
constructor(options) {
this.id = nodeIdSeed++;
this.text = null;
......@@ -135,6 +155,11 @@ export default class Node {
this.updateLeafState();
}
/**
* @description: setData
* @param {*} data
* @author: renchao
*/
setData(data) {
if (!Array.isArray(data)) {
markNodeData(this, data);
......@@ -155,20 +180,36 @@ export default class Node {
}
}
/**
* @description: label
* @author: renchao
*/
get label() {
return getPropertyFromData(this, 'label');
}
/**
* @description: key
* @author: renchao
*/
get key() {
const nodeKey = this.store.key;
if (this.data) return this.data[nodeKey];
return null;
}
/**
* @description: disabled
* @author: renchao
*/
get disabled() {
return getPropertyFromData(this, 'disabled');
}
/**
* @description: nextSibling
* @author: renchao
*/
get nextSibling() {
const parent = this.parent;
if (parent) {
......@@ -180,6 +221,10 @@ export default class Node {
return null;
}
/**
* @description: previousSibling
* @author: renchao
*/
get previousSibling() {
const parent = this.parent;
if (parent) {
......@@ -191,6 +236,12 @@ export default class Node {
return null;
}
/**
* @description: contains
* @param {*} target
* @param {*} deep
* @author: renchao
*/
contains(target, deep = true) {
const walk = function(parent) {
const children = parent.childNodes || [];
......@@ -208,6 +259,10 @@ export default class Node {
return walk(this);
}
/**
* @description: remove
* @author: renchao
*/
remove() {
const parent = this.parent;
if (parent) {
......@@ -215,6 +270,13 @@ export default class Node {
}
}
/**
* @description: insertChild
* @param {*} child
* @param {*} index
* @param {*} batch
* @author: renchao
*/
insertChild(child, index, batch) {
if (!child) throw new Error('insertChild error: child is required.');
......@@ -247,6 +309,12 @@ export default class Node {
this.updateLeafState();
}
/**
* @description: insertBefore
* @param {*} child
* @param {*} ref
* @author: renchao
*/
insertBefore(child, ref) {
let index;
if (ref) {
......@@ -255,6 +323,12 @@ export default class Node {
this.insertChild(child, index);
}
/**
* @description: insertAfter
* @param {*} child
* @param {*} ref
* @author: renchao
*/
insertAfter(child, ref) {
let index;
if (ref) {
......@@ -264,6 +338,11 @@ export default class Node {
this.insertChild(child, index);
}
/**
* @description: removeChild
* @param {*} child
* @author: renchao
*/
removeChild(child) {
const children = this.getChildren() || [];
const dataIndex = children.indexOf(child.data);
......@@ -282,6 +361,11 @@ export default class Node {
this.updateLeafState();
}
/**
* @description: removeChildByData
* @param {*} data
* @author: renchao
*/
removeChildByData(data) {
let targetNode = null;
......@@ -297,6 +381,12 @@ export default class Node {
}
}
/**
* @description: expand
* @param {*} callback
* @param {*} expandParent
* @author: renchao
*/
expand(callback, expandParent) {
const done = () => {
if (expandParent) {
......@@ -326,20 +416,38 @@ export default class Node {
}
}
/**
* @description: doCreateChildren
* @param {*} array
* @param {*} defaultProps
* @author: renchao
*/
doCreateChildren(array, defaultProps = {}) {
array.forEach((item) => {
this.insertChild(objectAssign({ data: item }, defaultProps), undefined, true);
});
}
/**
* @description: collapse
* @author: renchao
*/
collapse() {
this.expanded = false;
}
/**
* @description: shouldLoadData
* @author: renchao
*/
shouldLoadData() {
return this.store.lazy === true && this.store.load && !this.loaded;
}
/**
* @description: updateLeafState
* @author: renchao
*/
updateLeafState() {
if (this.store.lazy === true && this.loaded !== true && typeof this.isLeafByUser !== 'undefined') {
this.isLeaf = this.isLeafByUser;
......@@ -353,6 +461,14 @@ export default class Node {
this.isLeaf = false;
}
/**
* @description: setChecked
* @param {*} value
* @param {*} deep
* @param {*} recursion
* @param {*} passValue
* @author: renchao
*/
setChecked(value, deep, recursion, passValue) {
this.indeterminate = value === 'half';
this.checked = value === true;
......@@ -406,6 +522,11 @@ export default class Node {
}
}
/**
* @description: getChildren
* @param {*} forceInit
* @author: renchao
*/
getChildren(forceInit = false) { // this is data
if (this.level === 0) return this.data;
const data = this.data;
......@@ -428,6 +549,10 @@ export default class Node {
return data[children];
}
/**
* @description: updateChildren
* @author: renchao
*/
updateChildren() {
const newData = this.getChildren() || [];
const oldData = this.childNodes.map((node) => node.data);
......@@ -458,6 +583,12 @@ export default class Node {
this.updateLeafState();
}
/**
* @description: loadData
* @param {*} callback
* @param {*} defaultProps
* @author: renchao
*/
loadData(callback, defaultProps = {}) {
if (this.store.lazy === true && this.store.load && !this.loaded && (!this.loading || Object.keys(defaultProps).length)) {
this.loading = true;
......
......@@ -2,6 +2,11 @@ import Node from './node';
import { getNodeKey } from './util';
export default class TreeStore {
/**
* @description: constructor
* @param {*} options
* @author: renchao
*/
constructor(options) {
this.currentNode = null;
this.currentNodeKey = null;
......@@ -30,6 +35,11 @@ export default class TreeStore {
}
}
/**
* @description: filter
* @param {*} value
* @author: renchao
*/
filter(value) {
const filterNodeMethod = this.filterNodeMethod;
const lazy = this.lazy;
......@@ -60,6 +70,11 @@ export default class TreeStore {
traverse(this);
}
/**
* @description: setData
* @param {*} newVal
* @author: renchao
*/
setData(newVal) {
const instanceChanged = newVal !== this.root.data;
if (instanceChanged) {
......@@ -70,22 +85,44 @@ export default class TreeStore {
}
}
/**
* @description: getNode
* @param {*} data
* @author: renchao
*/
getNode(data) {
if (data instanceof Node) return data;
const key = typeof data !== 'object' ? data : getNodeKey(this.key, data);
return this.nodesMap[key] || null;
}
/**
* @description: insertBefore
* @param {*} data
* @param {*} refData
* @author: renchao
*/
insertBefore(data, refData) {
const refNode = this.getNode(refData);
refNode.parent.insertBefore({ data }, refNode);
}
/**
* @description: insertAfter
* @param {*} data
* @param {*} refData
* @author: renchao
*/
insertAfter(data, refData) {
const refNode = this.getNode(refData);
refNode.parent.insertAfter({ data }, refNode);
}
/**
* @description: remove
* @param {*} data
* @author: renchao
*/
remove(data) {
const node = this.getNode(data);
......@@ -97,6 +134,12 @@ export default class TreeStore {
}
}
/**
* @description: append
* @param {*} data
* @param {*} parentData
* @author: renchao
*/
append(data, parentData) {
const parentNode = parentData ? this.getNode(parentData) : this.root;
......@@ -105,6 +148,10 @@ export default class TreeStore {
}
}
/**
* @description: _initDefaultCheckedNodes
* @author: renchao
*/
_initDefaultCheckedNodes() {
const defaultCheckedKeys = this.defaultCheckedKeys || [];
const nodesMap = this.nodesMap;
......@@ -118,6 +165,11 @@ export default class TreeStore {
});
}
/**
* @description: _initDefaultCheckedNode
* @param {*} node
* @author: renchao
*/
_initDefaultCheckedNode(node) {
const defaultCheckedKeys = this.defaultCheckedKeys || [];
......@@ -126,6 +178,11 @@ export default class TreeStore {
}
}
/**
* @description: setDefaultCheckedKey
* @param {*} newVal
* @author: renchao
*/
setDefaultCheckedKey(newVal) {
if (newVal !== this.defaultCheckedKeys) {
this.defaultCheckedKeys = newVal;
......@@ -133,6 +190,11 @@ export default class TreeStore {
}
}
/**
* @description: registerNode
* @param {*} node
* @author: renchao
*/
registerNode(node) {
const key = this.key;
if (!key || !node || !node.data) return;
......@@ -141,6 +203,11 @@ export default class TreeStore {
if (nodeKey !== undefined) this.nodesMap[node.key] = node;
}
/**
* @description: deregisterNode
* @param {*} node
* @author: renchao
*/
deregisterNode(node) {
const key = this.key;
if (!key || !node || !node.data) return;
......@@ -152,6 +219,12 @@ export default class TreeStore {
delete this.nodesMap[node.key];
}
/**
* @description: getCheckedNodes
* @param {*} leafOnly
* @param {*} includeHalfChecked
* @author: renchao
*/
getCheckedNodes(leafOnly = false, includeHalfChecked = false) {
const checkedNodes = [];
const traverse = function(node) {
......@@ -171,10 +244,19 @@ export default class TreeStore {
return checkedNodes;
}
/**
* @description: getCheckedKeys
* @param {*} leafOnly
* @author: renchao
*/
getCheckedKeys(leafOnly = false) {
return this.getCheckedNodes(leafOnly).map((data) => (data || {})[this.key]);
}
/**
* @description: getHalfCheckedNodes
* @author: renchao
*/
getHalfCheckedNodes() {
const nodes = [];
const traverse = function(node) {
......@@ -194,10 +276,18 @@ export default class TreeStore {
return nodes;
}
/**
* @description: getHalfCheckedKeys
* @author: renchao
*/
getHalfCheckedKeys() {
return this.getHalfCheckedNodes().map((data) => (data || {})[this.key]);
}
/**
* @description: _getAllNodes
* @author: renchao
*/
_getAllNodes() {
const allNodes = [];
const nodesMap = this.nodesMap;
......@@ -210,6 +300,12 @@ export default class TreeStore {
return allNodes;
}
/**
* @description: updateChildren
* @param {*} key
* @param {*} data
* @author: renchao
*/
updateChildren(key, data) {
const node = this.nodesMap[key];
if (!node) return;
......@@ -224,6 +320,13 @@ export default class TreeStore {
}
}
/**
* @description: _setCheckedKeys
* @param {*} key
* @param {*} leafOnly
* @param {*} checkedKeys
* @author: renchao
*/
_setCheckedKeys(key, leafOnly = false, checkedKeys) {
const allNodes = this._getAllNodes().sort((a, b) => b.level - a.level);
const cache = Object.create(null);
......@@ -268,6 +371,12 @@ export default class TreeStore {
}
}
/**
* @description: setCheckedNodes
* @param {*} array
* @param {*} leafOnly
* @author: renchao
*/
setCheckedNodes(array, leafOnly = false) {
const key = this.key;
const checkedKeys = {};
......@@ -278,6 +387,12 @@ export default class TreeStore {
this._setCheckedKeys(key, leafOnly, checkedKeys);
}
/**
* @description: setCheckedKeys
* @param {*} array
* @param {*} leafOnly
* @author: renchao
*/
setCheckedKeys(keys, leafOnly = false) {
this.defaultCheckedKeys = keys;
const key = this.key;
......@@ -289,6 +404,11 @@ export default class TreeStore {
this._setCheckedKeys(key, leafOnly, checkedKeys);
}
/**
* @description: setDefaultExpandedKeys
* @param {*} keys
* @author: renchao
*/
setDefaultExpandedKeys(keys) {
keys = keys || [];
this.defaultExpandedKeys = keys;
......@@ -299,6 +419,13 @@ export default class TreeStore {
});
}
/**
* @description: setChecked
* @param {*} data
* @param {*} checked
* @param {*} deep
* @author: renchao
*/
setChecked(data, checked, deep) {
const node = this.getNode(data);
......@@ -307,10 +434,19 @@ export default class TreeStore {
}
}
/**
* @description: getCurrentNode
* @author: renchao
*/
getCurrentNode() {
return this.currentNode;
}
/**
* @description: setCurrentNode
* @param {*} currentNode
* @author: renchao
*/
setCurrentNode(currentNode) {
const prevCurrentNode = this.currentNode;
if (prevCurrentNode) {
......@@ -320,12 +456,22 @@ export default class TreeStore {
this.currentNode.isCurrent = true;
}
/**
* @description: setUserCurrentNode
* @param {*} node
* @author: renchao
*/
setUserCurrentNode(node) {
const key = node[this.key];
const currNode = this.nodesMap[key];
this.setCurrentNode(currNode);
}
/**
* @description: setCurrentNodeKey
* @param {*} key
* @author: renchao
*/
setCurrentNodeKey(key) {
if (key === null || key === undefined) {
this.currentNode && (this.currentNode.isCurrent = false);
......
export const NODE_KEY = '$treeNodeId';
/**
* @description: markNodeData
* @param {*} node
* @param {*} data
* @author: renchao
*/
export const markNodeData = function(node, data) {
if (!data || data[NODE_KEY]) return;
Object.defineProperty(data, NODE_KEY, {
......@@ -10,11 +16,23 @@ export const markNodeData = function(node, data) {
});
};
/**
* @description: getNodeKey
* @param {*} key
* @param {*} data
* @author: renchao
*/
export const getNodeKey = function(key, data) {
if (!key) return data[NODE_KEY];
return data[key];
};
/**
* @description: findNearestComponent
* @param {*} element
* @param {*} componentName
* @author: renchao
*/
export const findNearestComponent = (element, componentName) => {
let target = element;
while (target && target.tagName !== 'BODY') {
......
......@@ -116,10 +116,21 @@ export default {
},
methods: {
/**
* @description: getNodeKey
* @param {*} node
* @author: renchao
*/
getNodeKey (node) {
return getNodeKey(this.tree.nodeKey, node.data);
},
/**
* @description: handleSelectChange
* @param {*} checked
* @param {*} indeterminate
* @author: renchao
*/
handleSelectChange (checked, indeterminate) {
if (this.oldChecked !== checked && this.oldIndeterminate !== indeterminate) {
this.tree.$emit('check-change', this.node.data, checked, indeterminate);
......@@ -128,6 +139,10 @@ export default {
this.indeterminate = indeterminate;
},
/**
* @description: handleClick
* @author: renchao
*/
handleClick () {
const store = this.tree.store;
store.setCurrentNode(this.node);
......@@ -144,6 +159,11 @@ export default {
this.tree.$emit('node-click', this.node.data, this.node, this);
},
/**
* @description: handleContextMenu
* @param {*} event
* @author: renchao
*/
handleContextMenu (event) {
if (this.tree._events['node-contextmenu'] && this.tree._events['node-contextmenu'].length > 0) {
event.stopPropagation();
......@@ -152,6 +172,10 @@ export default {
this.tree.$emit('node-contextmenu', event, this.node.data, this.node, this);
},
/**
* @description: handleExpandIconClick
* @author: renchao
*/
handleExpandIconClick () {
if (this.node.isLeaf) return;
if (this.expanded) {
......@@ -163,6 +187,12 @@ export default {
}
},
/**
* @description: handleCheckChange
* @param {*} value
* @param {*} ev
* @author: renchao
*/
handleCheckChange (value, ev) {
this.node.setChecked(ev.target.checked, !this.tree.checkStrictly);
this.$nextTick(() => {
......@@ -176,26 +206,53 @@ export default {
});
},
/**
* @description: handleChildNodeExpand
* @param {*} nodeData
* @param {*} node
* @param {*} instance
* @author: renchao
*/
handleChildNodeExpand (nodeData, node, instance) {
this.broadcast('ElTreeNode', 'tree-node-expand', node);
this.tree.$emit('node-expand', nodeData, node, instance);
},
/**
* @description: handleDragStart
* @param {*} event
* @author: renchao
*/
handleDragStart (event) {
if (!this.tree.draggable) return;
this.tree.$emit('tree-node-drag-start', event, this);
},
/**
* @description: handleDragOver
* @param {*} event
* @author: renchao
*/
handleDragOver (event) {
if (!this.tree.draggable) return;
this.tree.$emit('tree-node-drag-over', event, this);
event.preventDefault();
},
/**
* @description: handleDrop
* @param {*} event
* @author: renchao
*/
handleDrop (event) {
event.preventDefault();
},
/**
* @description: handleDragEnd
* @param {*} event
* @author: renchao
*/
handleDragEnd (event) {
if (!this.tree.draggable) return;
this.tree.$emit('tree-node-drag-end', event, this);
......
......@@ -177,15 +177,30 @@
},
methods: {
/**
* @description: filter
* @param {*} value
* @author: renchao
*/
filter(value) {
if (!this.filterNodeMethod) throw new Error('[Tree] filterNodeMethod is required when filter');
this.store.filter(value);
},
/**
* @description: getNodeKey
* @param {*} node
* @author: renchao
*/
getNodeKey(node) {
return getNodeKey(this.nodeKey, node.data);
},
/**
* @description: getNodePath
* @param {*} data
* @author: renchao
*/
getNodePath(data) {
if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in getNodePath');
const node = this.store.getNode(data);
......@@ -199,87 +214,188 @@
return path.reverse();
},
/**
* @description: getCheckedNodes
* @param {*} leafOnly
* @param {*} includeHalfChecked
* @author: renchao
*/
getCheckedNodes(leafOnly, includeHalfChecked) {
return this.store.getCheckedNodes(leafOnly, includeHalfChecked);
},
/**
* @description: getCheckedKeys
* @param {*} leafOnly
* @author: renchao
*/
getCheckedKeys(leafOnly) {
return this.store.getCheckedKeys(leafOnly);
},
/**
* @description: getCurrentNode
* @author: renchao
*/
getCurrentNode() {
const currentNode = this.store.getCurrentNode();
return currentNode ? currentNode.data : null;
},
/**
* @description: getCurrentKey
* @author: renchao
*/
getCurrentKey() {
if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in getCurrentKey');
const currentNode = this.getCurrentNode();
return currentNode ? currentNode[this.nodeKey] : null;
},
/**
* @description: setCheckedNodes
* @param {*} nodes
* @param {*} leafOnly
* @author: renchao
*/
setCheckedNodes(nodes, leafOnly) {
if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes');
this.store.setCheckedNodes(nodes, leafOnly);
},
/**
* @description: setCheckedKeys
* @param {*} keys
* @param {*} leafOnly
* @author: renchao
*/
setCheckedKeys(keys, leafOnly) {
if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedKeys');
this.store.setCheckedKeys(keys, leafOnly);
},
/**
* @description: setChecked
* @param {*} data
* @param {*} checked
* @param {*} deep
* @author: renchao
*/
setChecked(data, checked, deep) {
this.store.setChecked(data, checked, deep);
},
/**
* @description: getHalfCheckedNodes
* @author: renchao
*/
getHalfCheckedNodes() {
return this.store.getHalfCheckedNodes();
},
/**
* @description: getHalfCheckedKeys
* @author: renchao
*/
getHalfCheckedKeys() {
return this.store.getHalfCheckedKeys();
},
/**
* @description: setCurrentNode
* @param {*} node
* @author: renchao
*/
setCurrentNode(node) {
if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentNode');
this.store.setUserCurrentNode(node);
},
/**
* @description: setCurrentKey
* @param {*} key
* @author: renchao
*/
setCurrentKey(key) {
if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentKey');
this.store.setCurrentNodeKey(key);
},
/**
* @description: getNode
* @param {*} data
* @author: renchao
*/
getNode(data) {
return this.store.getNode(data);
},
/**
* @description: remove
* @param {*} data
* @author: renchao
*/
remove(data) {
this.store.remove(data);
},
/**
* @description: append
* @param {*} data
* @param {*} parentNode
* @author: renchao
*/
append(data, parentNode) {
this.store.append(data, parentNode);
},
/**
* @description: insertBefore
* @param {*} data
* @param {*} refNode
* @author: renchao
*/
insertBefore(data, refNode) {
this.store.insertBefore(data, refNode);
},
/**
* @description: insertAfter
* @param {*} data
* @param {*} refNode
* @author: renchao
*/
insertAfter(data, refNode) {
this.store.insertAfter(data, refNode);
},
/**
* @description: handleNodeExpand
* @param {*} nodeData
* @param {*} node
* @param {*} instance
* @author: renchao
*/
handleNodeExpand(nodeData, node, instance) {
this.broadcast('ElTreeNode', 'tree-node-expand', node);
this.$emit('node-expand', nodeData, node, instance);
},
/**
* @description: updateKeyChildren
* @param {*} key
* @param {*} data
* @author: renchao
*/
updateKeyChildren(key, data) {
if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in updateKeyChild');
this.store.updateChildren(key, data);
},
/**
* @description: initTabIndex
* @author: renchao
*/
initTabIndex() {
this.treeItems = this.$el.querySelectorAll('.is-focusable[role=treeitem]');
this.checkboxItems = this.$el.querySelectorAll('input[type=checkbox]');
......@@ -291,6 +407,11 @@
this.treeItems[0] && this.treeItems[0].setAttribute('tabindex', 0);
},
/**
* @description: handleKeydown
* @param {*} ev
* @author: renchao
*/
handleKeydown(ev) {
const currentItem = ev.target;
if (currentItem.className.indexOf('el-tree-node') === -1) return;
......@@ -319,6 +440,10 @@
}
},
/**
* @description: created
* @author: renchao
*/
created() {
this.isTree = true;
......
<template>
<div class="temp">
<table class="tempTable" cellspacing="0" cellpadding="0" border="1">
<tr>
<template v-if="lq == ''">
<td colspan="2"><span class="table-title">权利人信息</span></td>
<td colspan="2">共有方式</td>
</template>
<template v-else>
<td colspan="2">共有方式</td>
</template>
<td :colspan="lq == '' ? 8 : 10">
<el-row>
<el-col :span="14" class="fl" style="line-height:32px">
<el-radio-group v-model="gyfs" @change="updateGyfs">
<el-radio :label="item.bsm" :disabled="+qszt !== 0 || item.disabled" :key="item.bsm"
v-for="item in gyfsList">{{ item.mc }}</el-radio>
</el-radio-group>
</el-col>
<el-col :span="10" class="fr">
<!-- <div v-show="qszt=='0'" class="fr" style="margin-right:20px">
<el-button class="qlrBtn" size="mini" @click="addRow">
<i class="iconfont iconxinzeng"></i> 新增
</el-button>
<el-button class="qlrBtn" size="mini" @click="changeRow">
<i class="iconfont iconbianji"></i> 编辑
</el-button>
<el-button class="qlrBtn" size="mini" @click="delRow">
<i class="iconfont iconshanchu"></i> 删除
</el-button>
</div>-->
<div v-show="+qszt === 0" class="fr" style="margin-right:20px">
<el-button class="qlrBtn" size="mini"
:disabled="+qszt !== 0 || (tableData.length > 0 && gyfs === 'PSHGSBDCQJDC000000000000DC340010')"
@click="addRow">
<i class="iconfont iconxinzeng" :disabled="+qszt !== 0"></i> 新增
</el-button>
<el-button class="qlrBtn" size="mini" :disabled="+qszt !== 0" @click="changeRow">
<i class="iconfont iconbianji"></i> 编辑
</el-button>
<el-button class="qlrBtn" size="mini" :disabled="+qszt !== 0" @click="delRow">
<i class="iconfont iconshanchu"></i> 删除
</el-button>
</div>
</el-col>
</el-row>
</td>
</tr>
</table>
<el-table class="qlrTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
@row-dblclick="rowDbclick" border>
<el-table-column type="selection" width="40" align="center">
</el-table-column>
<el-table-column prop="qlrmc" label="权利人名称" align="center">
</el-table-column>
<el-table-column prop="qlrlxbsm_dictText" label="权利人类型" align="center">
</el-table-column>
<el-table-column prop="zjzlbsm_dictText" label="证件种类" align="center">
</el-table-column>
<el-table-column prop="zjh" label="证件号" align="center">
</el-table-column>
<el-table-column prop="dz" label="通讯地址" align="center">
</el-table-column>
<el-table-column prop="dh" label="联系电话" align="center">
</el-table-column>
</el-table>
<el-dialog :close-on-click-modal="false" title="权利人信息" :visible.sync="dialogVisible" custom-class="insetDialog"
append-to-body width="50%">
<el-form :model="formData" class="qlrForm">
<table class="zdjbxxTable" cellspacing="0" cellpadding="0" border="1">
<tr>
<td colspan="4" class="tdright"><i class="requisite">*</i>权利人名称</td>
<td colspan="6">
<el-input v-model="formData.qlrmc" ref="qlrmc" @blur="inputBlur($event)"></el-input>
</td>
<td colspan="4" class="tdright"><i class="requisite">*</i>权利人类型</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.qlrlxbsm" ref="qlrlxbsm">
<el-option v-for="item in $store.state.qlrlxList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td colspan="4" class="tdright"><i class="requisite">*</i>证件类型</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.zjzlbsm" ref="zjzlbsm">
<el-option v-for="item in $store.state.zjzlList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
<td colspan="4" class="tdright"><i class="requisite">*</i>证件号</td>
<td colspan="6">
<el-input maxlength="18" v-model="formData.zjh" ref="zjh" @blur="inputBlur($event)"></el-input>
</td>
</tr>
<tr>
<td colspan="4" class="tdright"><i class="requisite">*</i>电话</td>
<td colspan="6">
<!-- @blur="inputBlur($event)"-->
<el-input v-model="formData.dh" ref="dh" @blur="inputBlur($event)"></el-input>
</td>
<td colspan="4" class="tdright"><i class="requisite">*</i>地址</td>
<td colspan="6">
<el-input v-model="formData.dz" ref="dz" @blur="inputBlur($event)"></el-input>
</td>
</tr>
<tr>
<td colspan="4" class="tdright">国家</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.gjbsm">
<el-option v-for="item in $store.state.gjList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
<td colspan="4" class="tdright">户籍所在省市</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.hjszssbsm">
<el-option v-for="item in $store.state.ssList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td colspan="4" class="tdright">性别</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.xbbsm">
<el-option v-for="item in $store.state.xbList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
<td colspan="4" class="tdright">邮编</td>
<td colspan="6">
<el-input v-model="formData.yb" />
</td>
</tr>
<tr>
<td colspan="4" class="tdright">所属行业</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.sshy">
<el-option v-for="item in $store.state.sshyList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
<td colspan="4" class="tdright">电子邮件</td>
<td colspan="6">
<el-input v-model="formData.dzyj" />
</td>
</tr>
<tr>
<th colspan="20">法人信息</th>
</tr>
<tr>
<td colspan="4" class="tdright">法定代表人或负责人姓名</td>
<td colspan="6">
<el-input v-model="formData.fr.dlrfrmc" />
</td>
<td colspan="4" class="tdright">证件类型</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.fr.zjzlbsm">
<el-option v-for="item in $store.state.zjzlList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td colspan="4" class="tdright">证件号码</td>
<td colspan="6">
<el-input v-model="formData.fr.zjh" />
</td>
<td colspan="4" class="tdright">电话</td>
<td colspan="6">
<el-input v-model="formData.fr.dh" />
</td>
</tr>
<tr>
<th colspan="20">代理人信息</th>
</tr>
<template v-for="(item, index) in formData.dlrList">
<tr :key="item.index">
<td :rowspan="(formData.dlrList.length - 1) * 2 + 2" v-if="index == 0" class="btnCol">
<span :style="{ 'padding-top': (formData.dlrList.length - 1) * 36 + 20 + 'px' }">
<i v-show="index == 0" class="iconfont iconicon-test2" @click="handleClick(item, index, 'add')"></i>
</span>
<!-- <div class="line" v-show=" index != formData.dlrList.length-1"></div> -->
</td>
<td rowspan="2" class="minusBtnCol">
<span>
<i class="iconfont icon-" @click="handleClick(item, index, 'minus')"></i>
</span>
</td>
<td class="tdright" colspan="2">代理人姓名</td>
<td colspan="6">
<el-input v-model="item.dlrfrmc" />
</td>
<td colspan="4" class="tdright">证件类型</td>
<td colspan="6">
<el-select class="formSelect" v-model="item.zjzlbsm">
<el-option v-for="item in $store.state.zjzlList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
</tr>
<!-- <tr :key="item.dh">-->
<tr :key="'dh' + index">
<td class="tdright" colspan="2">证件号码</td>
<td colspan="6">
<el-input v-model="item.zjh" />
</td>
<td colspan="4" class="tdright">电话</td>
<td colspan="6">
<el-input v-model="item.dh" />
</td>
</tr>
</template>
<tr>
<th colspan="20">权利信息</th>
</tr>
<tr>
<td colspan="4" class="tdright">共有方式</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.gyfsbsm" disabled>
<el-option v-for="item in $store.state.gyfsList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
<td colspan="4" class="tdright">权利比例(%)</td>
<td colspan="6">
<el-input v-model="formData.qlbl"></el-input>
</td>
</tr>
<tr>
<td colspan="4" class="tdright">房产证号</td>
<td colspan="6">
<el-input v-model="formData.fczh"></el-input>
</td>
<td colspan="4" class="tdright">土地证号</td>
<td colspan="6">
<el-input v-model="formData.tdzh"></el-input>
</td>
</tr>
<tr>
<td colspan="4" class="tdright">共有情况</td>
<td colspan="12">
<el-input v-model="formData.gyqk"></el-input>
</td>
</tr>
</table>
</el-form>
<div class="dialog-footer">
<el-button type="primary" @click="addNewQlrInfo">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
// import { getDdicByMC } from "@api/common";
// import { insertQlrDlrFr, getQlrInfoByGlbsm, updateQlrDlrFr, deleteQlrDlrFrByQlrbsm, updateGyGyQlrQk, getQlrByGlbsmAndType } from "@api/qlr";
export default {
props: {
qszt: {
type: String,
default: "0",
},
title: {
type: String,
default: "",
},
topHeight: {
type: String,
default: "15vh",
},
bsm: {
type: String,
default: "",
},
type: {
type: String,
default: "",
},
lq: {
type: String,
default: "",
}
},
data () {
return {
update: false,
gyfs: this.$store.state.gyfsList[0].bsm,
tableData: [],
gyfsList: [],
//表格选中项
multipleSelection: [],
dialogVisible: false,
formData: {
addQjDlrFrRequest: [],
dlrList: [
{
dh: "",
dlrfrmc: "",
qlrbsm: "",
zjh: "",
zjzlbsm: "",
},
],
fr: {
dh: "",
dlrfrmc: "",
qlrbsm: "",
zjh: "",
zjzlbsm: "",
},
bz: "",
dh: "",
dz: "",
dzyj: "",
fczh: "",
fzjg: "",
gjbsm: "PSHGSBDCQJDC000000000000DC350010", //默认中国
glbsm: "",
gyfsbsm: "",
gyqk: "",
gzdw: "",
hjszssbsm: "",
isdel: 0,
qlbl: "",
qlrlxbsm: "",
qlrmc: "",
sshy: "",
sxh: 0,
tdzh: "",
xbbsm: "",
yb: "",
zjh: "",
zjzlbsm: "",
lqqlrtype: ""
},
glbsm: '',
rules: [],
};
},
methods: {
/**
* @description: inputBlur
* @author: renchao
*/
inputBlur (e) {
if (e.target.value != '') {
e.target.style.border = ""
} else {
e.target.style.border = "1px solid red";
e.target.style.boxSizing = 'border-box';
}
},
/**
* @description: 新增行数据
* @author: renchao
*/
addRow () {
console.log(this.gyfs, '共有方式')
this.update = false;
let flag = false;
for (let i = 0; i < this.$store.state.gyfsList.length; i++) {
let item = this.$store.state.gyfsList[i];
if (item.mc === "单独所有" && item.bsm === this.gyfs) {
flag = true;
}
}
if (flag) {
if (this.tableData.length > 0) {
this.$message({
message: "当前方式不可再新增权利人",
type: "warning",
});
} else {
this.formData.gyfsbsm = this.gyfs;
this.dialogVisible = true;
}
} else {
this.formData.gyfsbsm = this.gyfs;
this.dialogVisible = true;
}
},
/**
* @description: 确认权利人信息按钮；可以进行新增；可以进行更新；
* @author: renchao
*/
addNewQlrInfo () {
this.rules = [
{
data: this.formData.qlrmc,
name: '权利人名称',
dom: this.$refs.qlrmc,
rule: /^\s*$/g, //非空
},
{
data: this.formData.qlrlxbsm,
name: '权利人类型',
dom: this.$refs.qlrlxbsm,
rule: /^\s*$/g, //非空
},
{
data: this.formData.zjzlbsm,
name: '证件类型',
dom: this.$refs.zjzlbsm,
rule: /^\s*$/g, //非空
},
{
data: this.formData.zjh,
name: '证件号',
dom: this.$refs.zjh,
rule: /^\s*$/g, //非空
},
{
data: this.formData.dh,
name: '电话',
dom: this.$refs.dh,
rule: /^\s*$/g, //非空
},
{
data: this.formData.dz,
name: '地址',
dom: this.$refs.dz,
rule: /^\s*$/g, //非空
},
]
let flag = true;
this.rules.forEach(item => {
if (item.rule.test(item.data) || item.data == null) {
if (item.dom.$el) {
item.dom.$el.style.border = '1px solid red';
item.dom.$el.style.boxSizing = 'border-box';
} else {
item.dom.style.border = '1px solid red';
item.dom.style.boxSizing = 'border-box';
}
flag = false;
return false
}
console.log(this.tableData, '权利人信息')
console.log(this.$store.state.gyfsList[0].bsm, '确定之后共有方式')
})
this.$nextTick(() => {
if (flag) {
//todo 权利人页面调整
this.formData.addQjDlrFrRequest = [];
this.formData.glbsm = this.bsm;
//将代理人，法人数据合在一起，名称为addQjDlrFrRequest；
//法人的type字段类型为0,
this.formData.fr.type = 0;
this.formData.addQjDlrFrRequest.push(this.formData.fr);
for (let k = 0; k < this.formData.dlrList.length; k++) {
//代理人的type字段类型为1,
this.formData.dlrList[k].type = 1;
this.formData.addQjDlrFrRequest.push(this.formData.dlrList[k]);
}
//林权权利人类型判断
this.formData.lqqlrtype = this.lq;
//如果是从更新按钮点击确定的则进行更新操作，如果不是，则进行添加操作
if (this.update) {
console.log(this.formData)
updateQlrDlrFr(this.formData).then((res) => {
if (res.code === 200) {
this.dialogVisible = false;
this.$message.success("修改完成！");
this.getQlrInfo(this.bsm);
this.update = false;
}
})
} else {
insertQlrDlrFr(this.formData).then((res) => {
if (res.code === 200) {
this.dialogVisible = false;
this.tableData.push(this.formData);
this.getQlrInfo(this.bsm);
Object.assign(this.$data, this.$options.data())
}
})
}
}
})
},
/**
* @description: 修改行数据
* @author: renchao
*/
changeRow () {
if (this.multipleSelection.length === 1) {
this.dialogVisible = true;
this.update = true;
this.formData = this.multipleSelection[0];
if (this.multipleSelection[0].frList.length > 0) {
this.formData.fr = this.multipleSelection[0].frList[0];
}
} else {
this.$message({
message: "请选择一条信息后继续操作",
type: "warning",
});
}
},
/**
* @description: updateGyfs
* @author: renchao
*/
updateGyfs (val) {
console.log(val, this.type)
updateGyGyQlrQk(this.bsm, this.type, val).then((res) => {
if (res.code === 200) {
console.log("修改完成！")
//todo 修改该建筑物的所有权利人的相关共有方式
}
})
},
/**
* @description: 父组件改变子组件的共有方式
* @author: renchao
*/
changeGyfs (val) {
this.gyfs = val;
},
/**
* @description: 行双击事件
* @author: renchao
*/
rowDbclick (row) {
if (+this.qszt == 0) {
this.dialogVisible = true;
this.update = true;
this.formData = row;
if (row.frList.length > 0) {
this.formData.fr = row.frList[0];
}
}
},
// inputBlur(e){
// if(e.target.value!=''){
// console.log(e.target.value)
// console.log(!(/^1(3|4|5|6|7|8|9)d{9}$/.test(e.target.value)))
// if(!(/^1(3|4|5|6|7|8|9)d{9}$/.test(e.target.value))){
// e.target.style.border="1px solid red";
// e.target.style.boxSizing = 'border-box';
// }else {
// e.target.style.border=""
// }
// }else{
// e.target.style.border="1px solid red";
// e.target.style.boxSizing = 'border-box';
// }
// },
/**
* @description: 删除行数据
* @author: renchao
*/
delRow () {
if (this.multipleSelection.length > 0) {
let qlrbsms = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
qlrbsms.push(this.multipleSelection[i].qlrbsm)
}
console.log(qlrbsms)
deleteQlrDlrFrByQlrbsm(qlrbsms).then((res) => {
if (res.code === 200) {
this.$message.success("删除完成！")
this.getQlrInfo(this.bsm);
}
})
} else {
this.$message({
message: "请至少选择一条信息后继续操作",
type: "warning",
});
}
},
/**
* @description: 选中表格某一项
* @author: renchao
*/
handleSelectionChange (val) {
this.multipleSelection = val;
},
/**
* @description: 供父组件调用来获取共有方式
* @author: renchao
*/
getQlgyfsData () {
return this.gyfs;
},
/**
* @description: 供父组件调用来获取权利人表格数据
* @author: renchao
*/
getQlrxxData () {
return this.tableData;
},
/**
* @description: 增删代理人
* @param {*} obj
* @param {*} ind
* @param {*} type
* @author: renchao
*/
handleClick (obj, ind, type) {
if (type === "add") {
this.formData.dlrList.push({
id: Math.random(),
dh: "",
dlrfrmc: "",
qlrbsm: "",
zjh: "",
zjzlbsm: "",
});
} else {
this.formData.dlrList.forEach((item, index) => {
if (index == ind && this.formData.dlrList.length > 1) {
this.formData.dlrList.splice(ind, 1);
}
});
}
},
/**
* @description: getQlrInfo
* @param {*} bsm
* @author: renchao
*/
getQlrInfo (bsm) {
if (this.lq == "") {
getQlrInfoByGlbsm(bsm).then((res) => {
if (res.code) {
if (res.result != null) {
this.tableData = res.result;
if (this.tableData.length === 0) {
this.gyfs = this.$store.state.gyfsList[0].bsm;
} else {
this.gyfs = res.result[0].gyfsbsm;
}
}
}
})
} else {
let params = {
bsm: bsm,
type: this.lq
}
getQlrByGlbsmAndType(params).then((res) => {
if (res.code) {
if (res.result != null) {
this.tableData = res.result;
if (this.tableData.length === 0) {
this.gyfs = this.$store.state.gyfsList[0].bsm;
} else {
this.gyfs = res.result[0].gyfsbsm;
}
}
}
})
}
}
},
created () {
this.gyfsList = this.$store.state.gyfsList;
},
mounted () {
this.getQlrInfo(this.bsm);
},
watch: {
tableData: {
handler: function (v) {
this.gyfsList[0].disabled = v.length > 1;
},
deep: true
},
dialogVisible (n) {
if (n === false) {
this.formData = {
addQjDlrFrRequest: [],
dlrList: [
{
dh: "",
dlrfrmc: "",
qlrbsm: "",
zjh: "",
zjzlbsm: "",
},
],
fr: {
dh: "",
dlrfrmc: "",
qlrbsm: "",
zjh: "",
zjzlbsm: "",
},
bz: "",
dh: "",
dz: "",
dzyj: "",
fczh: "",
fzjg: "",
gjbsm: "PSHGSBDCQJDC000000000000DC350010", //默认中国
glbsm: "",
gyfsbsm: "",
gyqk: "",
gzdw: "",
hjszssbsm: "",
isdel: 0,
qlbl: "",
qlrlxbsm: "",
qlrmc: "",
sshy: "",
sxh: 0,
tdzh: "",
xbbsm: "",
yb: "",
zjh: "",
zjzlbsm: "",
}
}
},
"formData.qlrlxbsm": function (val) {
if (val != '') {
this.$refs.qlrlxbsm.$el.style.border = '';
}
},
}
};
</script>
<style lang="scss">
.temp {
width: 100%;
table {
border-bottom: 0;
background-color: #fff;
font-size: 14px;
width: 100%;
table-layout: fixed;
.qlrBtn {
border: 0;
font-size: 14px;
}
.qlrBtn:hover {
background-color: none !important;
}
.iconfont {
font-size: 14px !important;
}
.span {
color: #409eff;
margin-right: 10px;
cursor: pointer;
}
.noEdit {
color: #606266;
margin-right: 10px;
cursor: not-allowed;
}
.el-radio {
margin-right: 20px !important;
}
td {
text-align: center;
padding: 8px 0;
}
}
.table-title {
font-weight: 700;
font-size: 15px;
}
.el-table th {
background-color: #fff !important;
}
el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
border-color: black;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
background-color: rgba(0, 0, 0, 0);
}
.el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
border-right: 1px solid#E6E6E6;
}
.el-table td,
.el-table th {
padding: 12px 0;
color: #333 !important;
font-weight: normal;
}
.el-table td,
.el-table th.is-leaf {
border-bottom: 1px solid#E6E6E6;
border-color: #E6E6E6 !important;
}
.qlrTable {
border-color: #E6E6E6 !important;
border-bottom: 0;
border-right: 0;
position: relative;
top: -1px;
.el-input__inner {
height: 20px;
margin: 0;
line-height: 20px;
outline: none;
border: none;
color: #606764;
overflow: visible;
cursor: text;
text-align: center;
}
}
}
.insetDialog {
.qlrForm {
height: 500px;
overflow-y: scroll;
}
.zdjbxxTable {
margin: 10px 0;
background-color: #fff;
font-size: 14px;
width: 100%;
border-bottom: 1px solid #000;
.btnCol,
.minusBtnCol {
position: relative;
padding-right: 0;
span {
display: inline-block;
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
padding-right: 10px;
padding-top: 20px;
}
.line {
width: 100%;
height: 2px;
background: #fff;
}
i {
color: #66b1ff;
font-size: 30px;
cursor: pointer;
z-index: 1;
}
}
.minusBtnCol {
i {
color: #FA6400;
}
}
th {
height: 36px;
line-height: 36px;
}
td {
text-align: right;
height: 36px;
}
/deep/.el-input__inner {
margin: 0;
height: 36px;
outline: none;
border: none;
color: #606764;
overflow: visible;
text-align: left;
cursor: text;
}
.percent68 {
width: 68% !important;
float: left;
position: relative;
top: 7px;
}
.percent30 {
width: 30% !important;
float: left;
}
.el-input__icon {
line-height: 37px;
}
.el-select {
width: 100%;
}
}
.dialog-footer {
width: 160px;
margin: 20px auto 0;
}
}
</style>
<template>
<div class="temp">
<div class="qlxzAdd fl">
<span>权利性质</span>
<i class="iconfont iconicon-test2" v-if="formData.qszt == '0'" @click="handleClick(0, 'add')"></i>
<i class="iconfont iconicon-test2" v-if="formData.qszt != '0'" style="cursor: not-allowed;"></i>
</div>
<el-row class="qlxzModule fl" v-for="(items, index) in countList" :key="items.id">
<template v-for="(childItem, childIndex) in items.list">
<el-col :span="1" class="btnCol " :key="childIndex + '1'" :class="childIndex > 0 ? 'childYT noTopBorder' : ''">
<i v-show="childIndex == 0 && formData.qszt == '0'"
:style="{ 'margin-top': (items.list.length - 1) * 57 - 18 + 'px' }" class="iconfont icon- qlxzMinus"
@click="handleClick(index, 'minus')"></i>
<i v-show="childIndex == 0 && formData.qszt != '0'"
:style="{ 'margin-top': (items.list.length - 1) * 57 - 18 + 'px' }" class="iconfont icon- qlxzMinus"
style="cursor: not-allowed;"></i>
<div :class="items.hasNotBorder ? 'itemShow whiteItem' : 'whiteItem'" v-if="items.isInside"></div>
</el-col>
<el-col :span="2" class="btnCol tdytAdd" :key="childIndex + '17'"
:class="childIndex > 0 ? 'childYT noTopBorder' : ''">
<template>
<span v-show="childIndex == 0"
:style="{ 'margin-top': (items.list.length - 1) * 57 - 40 + 'px' }">土地用途</span>
<i class="iconfont iconicon-test1" v-show="childIndex == 0 && formData.qszt == '0'"
:style="{ 'margin-top': (items.list.length - 1) * 57 + 'px' }"
@click="handleInClick(index, childIndex, 'add')"></i>
<i class="iconfont iconicon-test1" v-show="childIndex == 0 && formData.qszt != '0'"
:style="{ 'margin-top': (items.list.length - 1) * 57 + 'px' }" style="cursor: not-allowed;"></i>
</template>
</el-col>
<el-col :span="1" class="btnCol tdytMinus pr10" :key="childIndex + '18'"
:class="childIndex > 0 ? 'childYT' : ''">
<i class="iconfont iconicon-test" v-if="formData.qszt == '0'"
@click="handleInClick(index, childIndex, 'minus')"></i>
<i class="iconfont iconicon-test" v-if="formData.qszt != '0'" style="cursor: not-allowed;"></i>
</el-col>
<template v-if="hasSyqx">
<el-col :span="3" :key="childIndex + '7'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li class="pr10"><i class="requisite">*</i>批准用途</li>
<li class="pr10"><i class="requisite">*</i>实际用途</li>
<li class="pr10"><i class="requisite">*</i>土地使用起始时间</li>
</ul>
</el-col>
<el-col :span="4" :key="childIndex + '6'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>
<el-select-tree class="formSelect percent30" v-if="show" :default-expand-all="defaultExpandAll"
ref="pzytdm" :multiple="multiple" :placeholder="placeholder" :disabled="formData.qszt != '0'"
:data="$store.state.tdytList" :props="treeProps" :check-strictly="checkStrictly"
:clearable="clearable" v-model="childItem.pzytdm"></el-select-tree>
</li>
<li>
<el-select-tree class="formSelect percent30" v-if="show" :default-expand-all="defaultExpandAll"
ref="sjytdm" :multiple="multiple" :placeholder="placeholder" :disabled="formData.qszt != '0'"
:data="$store.state.tdytList" :props="treeProps" :check-strictly="checkStrictly"
:clearable="clearable" v-model="childItem.sjytdm"></el-select-tree>
</li>
<li>
<el-date-picker :disabled="formData.qszt != '0'" v-model="childItem.tdsyqssj" type="date" ref="tdsyqssj"
:picker-options="childItem.pickerStart" value-format="yyyy-MM-dd" placeholder="选择日期"
@blur="inputBlur($event, true)" @input="startTime(index, childIndex)">
</el-date-picker>
</li>
</ul>
</el-col>
<el-col :span="3" :key="childIndex + '5'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li class="pr10">地类编码</li>
<li class="pr10">地类编码</li>
<li class="pr10"><i class="requisite">*</i>年限</li>
</ul>
</el-col>
<el-col :span="3" :key="childIndex + '4'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>
<input type="text" style="top: -1px;" :disabled="formData.qszt != '0'" v-model="childItem.pzytdm"
class="formInput" />
</li>
<li>
<input type="text" :disabled="formData.qszt != '0'" v-model="childItem.sjytdm" class="formInput" />
</li>
<li>
<input type="text" ref="syqx" @blur="inputBlur($event, false)" maxlength="3"
onkeyup="value=value.replace(/[^\d]/g,'')"
@input="sumTime(index, childIndex, childItem.syqx, childItem.syqx)" :disabled="formData.qszt != '0'"
v-model="childItem.syqx" class="formInput" />
</li>
</ul>
</el-col>
<el-col class="pr10" :span="3" :key="childIndex + '2'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>等级</li>
<li>等级</li>
<li><i class="requisite">*</i>土地使用结束时间</li>
</ul>
</el-col>
<el-col :span="4" :key="childIndex + '3'" class="noRightBorder" :class="childIndex > 0 ? 'childYT ' : ''">
<ul>
<li>
<el-select :disabled="formData.qszt != '0'" class="formSelect percent30" v-model="childItem.pzdjbsm">
<el-option v-for="item in $store.state.tddjList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</li>
<li>
<el-select :disabled="formData.qszt != '0'" class="formSelect percent30" v-model="childItem.sjdjbsm">
<el-option v-for="item in $store.state.tddjList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</li>
<li>
<el-date-picker :disabled="formData.qszt != '0'" v-model="childItem.tdsyjssj" type="date" ref="tdsyjssj"
@blur="inputBlur($event, true)" :picker-options="childItem.pickerEnd"
@input="endTime(index, childIndex, $event)" value-format="yyyy-MM-dd" placeholder="选择日期">
</el-date-picker>
</li>
</ul>
</el-col>
</template>
<template v-if="!hasSyqx">
<el-col :span="5" :key="childIndex + '7'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li class="pr10"><i class="requisite">*</i>批准用途</li>
<li class="pr10"><i class="requisite">*</i>实际用途</li>
<li class="pr10"><i class="requisite">*</i>土地使用起始时间</li>
</ul>
</el-col>
<el-col :span="5" :key="childIndex + '6'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>
<el-select-tree v-if="show" class="formSelect percent30" :default-expand-all="defaultExpandAll"
ref="pzytdm" :multiple="multiple" :placeholder="placeholder" :disabled="formData.qszt != '0'"
:data="$store.state.tdytList" :props="treeProps" :check-strictly="checkStrictly"
:clearable="clearable" v-model="childItem.pzytdm"></el-select-tree>
</li>
<li>
<el-select-tree v-if="show" class="formSelect percent30" :default-expand-all="defaultExpandAll"
ref="sjytdm" :multiple="multiple" :placeholder="placeholder" :disabled="formData.qszt != '0'"
:data="$store.state.tdytList" :props="treeProps" :check-strictly="checkStrictly"
:clearable="clearable" v-model="childItem.sjytdm"></el-select-tree>
</li>
<li>
<el-date-picker v-model="childItem.tdsyqssj" ref="tdsyqssj" :disabled="formData.qszt != '0'"
:picker-options="childItem.pickerStart" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
@blur="inputBlur($event, true)" @input="startTime(index, childIndex)">
</el-date-picker>
</li>
</ul>
</el-col>
<el-col :span="5" :key="childIndex + '5'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li class="pr10">地类编码</li>
<li class="pr10">地类编码</li>
<li class="pr10"><i class="requisite">*</i>土地使用结束时间</li>
</ul>
</el-col>
<el-col :span="5" :key="childIndex + '4'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>
<input type="text" style="top: -1px;" :disabled="formData.qszt != '0'" v-model="childItem.pzytdm"
class="formInput" />
</li>
<li>
<input type="text" :disabled="formData.qszt != '0'" v-model="childItem.sjytdm" class="formInput" />
</li>
<li>
<el-date-picker v-model="childItem.tdsyjssj" :disabled="formData.qszt != '0'" ref="tdsyjssj" type="date"
value-format="yyyy-MM-dd" :picker-options="childItem.pickerEnd" placeholder="选择日期"
@blur="inputBlur($event, true)" @input="endTime(index, childIndex)">
</el-date-picker>
</li>
</ul>
</el-col>
</template>
</template>
<div class="title">
<el-select-tree v-if="show" class="formSelect" :disabled="formData.qszt != '0'"
:default-expand-all="defaultExpandAll" :multiple="multiple" :placeholder="placeholder"
:data="$store.state.qlxzList" :props="treeProps" :check-strictly="checkStrictly" :clearable="clearable"
ref="qlxzdm" v-model="items.qlxzdm"></el-select-tree>
</div>
</el-row>
</div>
</template>
<script>
// import { getDdicByMC } from "@api/common";
export default {
props: {
formData: {
type: Object,
default: () => {
return {};
},
},
hasSyqx: {
type: Boolean,
default: false
}
},
data () {
return {
//树型结构
show: true,
clearable: true,
defaultExpandAll: true,
multiple: false,
placeholder: "请选择",
disabled: false,
checkStrictly: true,
treeProps: {
value: "dm",
children: "children",
label: "mc",
},
countList: [
{
id: Math.random(),
isInside: false,
hasNotBorder: false,
bsm: "", //权利性质标识码
glbsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
qlxzdm: "",
qlxzmc: "",
zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
list: [
{
pzdjbsm: "",
pzdjmc: "",
pzytdm: "",
pzytmc: "",
pzytmj: 0,
qlxzbsm: "",
sjdjbsm: "",
sjdjmc: "",
sjytdm: "",
sjytmc: "",
sjytmj: 0,
syqx: "",
tdsyjssj: "",
pickerStart: {},
pickerEnd: {},
tdsyqssj: "",
tdzh: "",
},
],
},
],
outNum: 0,
rulesResult: true,//权利性质表单校验结果
};
},
created () { },
mounted () {
},
methods: {
/**
* @description: startTime
* @param {*} index
* @param {*} childIndex
* @author: renchao
*/
startTime (index, childIndex) {
let startTime = this.countList[index].list[childIndex].tdsyqssj;
let endTime = this.countList[index].list[childIndex].tdsyjssj;
this.countList[index].list[childIndex].pickerEnd = {
disabledDate: (time) => {
if (Object.keys(startTime).length > 0) {
return new Date(startTime).getTime() > time.getTime();
} else {
return time.getTime() < Date.now();
}
}
}
if (Object.keys(startTime).length > 0 && Object.keys(endTime).length > 0) {
let startYear = new Date(startTime).getFullYear();
let endYear = new Date(endTime).getFullYear();
//年限暂时不算
// this.countList[index].list[childIndex].syqx=endYear-startYear;
}
},
/**
* @description: sumTime
* @param {*} index
* @param {*} childIndex
* @param {*} syqx
* @author: renchao
*/
sumTime (index, childIndex, syqx, e) {
this.$refs.syqx.forEach((item, index) => {
if (item.value == syqx) {
this.$refs.tdsyjssj[index].$el.style.border = ""
}
})
let startTime = this.countList[index].list[childIndex].tdsyqssj;
this.countList[index].list[childIndex].tdsyjssj = Number(startTime.substring(0, 4)) + Number(syqx) + startTime.slice(4, 10);
},
/**
* @description: endTime
* @param {*} index
* @param {*} childIndex
* @author: renchao
*/
endTime (index, childIndex, e) {
let startTime = this.countList[index].list[childIndex].tdsyqssj;
let endTime = this.countList[index].list[childIndex].tdsyjssj;
this.countList[index].list[childIndex].pickerStart = {
disabledDate: (time) => {
if (Object.keys(endTime).length > 0) {
return new Date(endTime).getTime() < time.getTime();
} else {
return time.getTime() > Date.now();
}
}
}
if (Object.keys(startTime).length > 0 && Object.keys(endTime).length > 0) {
let startYear = new Date(startTime).getFullYear();
let endYear = new Date(endTime).getFullYear();
// this.countList[index].list[childIndex].syqx=endYear-startYear;
}
},
/**
* @description: 外层操作
* @param {*} ind
* @param {*} type
* @author: renchao
*/
handleClick (ind, type) {
let outsideObj = {
id: Math.random(),
isInside: false,
hasNotBorder: false,
bsm: "", //权利性质标识码
glbsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
qlxzdm: "",
qlxzmc: "",
zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
list: [
{
pzdjbsm: "",
pzdjmc: "",
pzytdm: "",
pzytmc: "",
pzytmj: 0,
qlxzbsm: "",
sjdjbsm: "",
sjdjmc: "",
sjytdm: "",
pickerStart: {},
pickerEnd: {},
sjytmc: "",
sjytmj: 0,
syqx: "",
tdsyjssj: "",
tdsyqssj: "",
tdzh: "",
},
],
};
if (type === "add") {
this.countList.push(outsideObj);
this.outNum++;
} else {
this.countList.forEach((item, index) => {
if (index == ind && this.countList.length > 1) {
this.countList.splice(index, 1);
}
});
this.outNum--;
}
},
/**
* @description: reset
* @author: renchao
*/
reset () {
this.countList = [
{
id: Math.random(),
isInside: false,
hasNotBorder: false,
bsm: "", //权利性质标识码
glbsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
qlxzdm: "",
qlxzmc: "",
zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
list: [
{
pzdjbsm: "",
pzdjmc: "",
pzytdm: "",
pzytmc: "",
pzytmj: 0,
qlxzbsm: "",
sjdjbsm: "",
sjdjmc: "",
sjytdm: "",
sjytmc: "",
sjytmj: 0,
syqx: "",
tdsyjssj: "",
pickerStart: {},
pickerEnd: {},
tdsyqssj: "",
tdzh: "",
},
],
},
];
},
/**
* @description: 内层操作
* @param {*} index
* @param {*} childIndex
* @param {*} type
* @author: renchao
*/
handleInClick (index, childIndex, type) {
let insideObj = {
pzdjbsm: "",
pzdjmc: "",
pzytdm: "",
pzytmc: "",
pzytmj: 0,
qlxzbsm: "",
sjdjbsm: "",
sjdjmc: "",
sjytdm: "",
sjytmc: "",
sjytmj: 0,
pickerStart: {},
pickerEnd: {},
syqx: "",
tdsyjssj: "",
tdsyqssj: "",
tdzh: "",
};
if (type === "add") {
this.countList[index].list.splice(childIndex + 1, 0, insideObj);
} else {
this.countList[index].list.forEach((item, childInd) => {
if (childIndex == childInd && this.countList[index].list.length > 1) {
this.countList[index].list.splice(childIndex, 1);
}
});
}
this.hasBorderOrNot();
},
/**
* @description: 判断是否显示边框
* @author: renchao
*/
hasBorderOrNot () {
this.countList.forEach((item, index) => {
if (index == this.countList.length - 1) {
item.hasNotBorder = true;
} else {
item.hasNotBorder =
item.isInside && !this.countList[index + 1].isInside ? true : false;
}
});
},
/**
* @description: getQlxzDataList
* @author: renchao
*/
getQlxzDataList () {
return this.countList;
},
/**
* @description: getRules
* @author: renchao
*/
getRules () {
let rules = [];
let temp = 0;
this.countList.forEach((item, index) => {
rules.push({
data: this.countList[index].qlxzdm,
name: '权利性质',
dom: this.$refs.qlxzdm[index],
rule: /^\s*$/g, //非空
})
item.list.forEach((j, ind) => {
rules.push(
{
data: item.list[ind].tdsyqssj,
name: '土地使用起始时间',
dom: this.$refs.tdsyqssj[temp + ind],
// val:this.$refs.tdsyqssj[temp+ind].value,
rule: /^\s*$/g, //非空
},
{
data: item.list[ind].tdsyjssj,
name: '土地使用结束时间',
dom: this.$refs.tdsyjssj[temp + ind],
// val:this.$refs.tdsyjssj[temp+ind].value,
rule: /^\s*$/g, //非空
},
{
data: item.list[ind].pzytdm,
name: '批准用途',
dom: this.$refs.pzytdm[temp + ind],
// val:this.$refs.tdsyjssj[temp+ind].value,
rule: /^\s*$/g, //非空
},
{
data: item.list[ind].sjytdm,
name: '实际用途',
dom: this.$refs.sjytdm[temp + ind],
// val:this.$refs.tdsyjssj[temp+ind].value,
rule: /^\s*$/g, //非空
},
)
if (this.hasSyqx) {
rules.push(
{
data: item.list[ind].syqx,
name: '使用期限',
dom: this.$refs.syqx[temp + ind],
// val:this.$refs.syqx[temp+ind].value,
rule: /^\s*$/g, //非空
}
)
}
if (ind == item.list.length - 1) {
temp += item.list.length;
}
})
})
this.rulesResult = true;
rules.forEach(item => {
if (item.rule.test(item.data) || item.data == null) {
if (item.dom.$el) {
item.dom.$el.style.border = '1px solid red';
item.dom.$el.style.boxSizing = 'border-box';
} else {
item.dom.style.border = '1px solid red';
item.dom.style.boxSizing = 'border-box';
}
// this.$message({
// // message: item.name+'不能为空',
// message: '不能为空',
// type: "warning",
// });
this.rulesResult = false;
return false
}
})
// console.log(rules,'rules');
},
/**
* @description: getRulesResult
* @author: renchao
*/
getRulesResult () {
return this.rulesResult
},
/**
* @description: inputBlur
* @author: renchao
*/
inputBlur (e, flag) {
if (flag) {
if (e.value != '') {
e.$el.style.border = ""
} else {
e.$el.style.border = "1px solid red"
e.$el.style.boxSizing = 'border-box';
}
} else {
if (e.target.value != '') {
e.target.style.border = ""
} else {
e.target.style.border = "1px solid red"
e.target.style.boxSizing = 'border-box';
}
}
},
//后续考虑在点击加减号时操作校验规则
// addRules(){
// this.tempQssj.push()
// },
// minusRules(){
// },
},
watch: {
countList: {
handler: function (newVal, oldVal) {
newVal.forEach((i, ind) => {
if (i.qlxzdm != '' && i.qlxzdm != null) {
console.log(this.$refs.qlxzdm, 'this.$refs.qlxzdm[ind]');
i.qlxzmc = this.$refs.qlxzdm[ind].name;
this.$refs.qlxzdm[ind].$el.style.border = ""
}
i.list.forEach((item, index) => {
if (item.sjytdm != '' && item.sjytdm != null) {
this.$refs.sjytdm[ind].$el.style.border = ""
}
if (item.pzytdm != '' && item.pzytdm != null) {
this.$refs.pzytdm[ind].$el.style.border = ""
}
})
})
},
deep: true
},
}
};
</script>
<style lang="scss">
.temp {
width: 100%;
height: 100%;
.iconfont {
cursor: pointer;
}
.qlxzAdd {
width: 100px;
height: 100%;
border-right: 1px solid #E6E6E6;
position: relative;
span {
font-size: 14px;
height: 140px;
text-align: center;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
position: absolute;
top: 50%;
margin-top: -70px;
left: 30%;
}
i {
color: #66b1ff;
font-size: 30px;
position: absolute;
top: 50%;
margin-top: -18px;
left: 55%;
z-index: 1;
}
}
.qlxzModule {
width: calc(100% - 102px);
height: auto;
position: relative;
border-bottom: 1px solid #E6E6E6;
.pr10 {
padding-right: 10px !important;
}
.el-col {
// height: 100%;
border-right: 1px solid #E6E6E6;
position: relative;
text-align: right;
.qlxz {
line-height: 34px;
}
.qlxzMinus {
color: #FA6400;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
margin: -18px 0 0 -18px;
z-index: 1;
}
ul {
margin-top: 34px;
li {
height: 37px;
line-height: 37px;
text-decoration: none;
border-bottom: 1px solid #e6e6e6;
.el-select {
width: 100%;
}
.el-input {
width: 100%;
}
input {
position: relative;
top: -2px;
height: 35px;
width: calc(100% - 1px) !important;
}
.el-input__inner {
height: 34px;
}
}
li:last-child {
border-bottom: none;
}
}
.whiteItem {
background-color: #fff;
position: absolute;
width: 100%;
height: 2px;
bottom: -1px;
left: 0;
}
.itemShow {
bottom: 2px;
}
}
.childYT {
height: 114px;
border-top: 1px solid #E6E6E6;
ul {
margin-top: 0;
li {
.el-input__inner {
height: 29px;
}
}
}
.changeBtn {
margin-top: -48px;
}
.el-button+.el-button {
margin-top: 4px;
}
}
.noTopBorder {
border-top: 0;
}
.noRightBorder {
border-right: 0;
}
.el-col:nth-last-child(2) {
border-right: none;
}
.title {
width: 95.83333%;
height: 34px;
line-height: 34px;
background-color: #fff;
border-bottom: 1px solid #E6E6E6;
position: absolute;
right: 0;
top: 0;
.formSelect {
top: -1px;
width: 100%;
.el-input__inner {
height: 32px;
}
}
}
}
.btnCol {
position: relative;
height: 146px;
.changeBtn {
width: 46px;
height: 46px;
font-size: 30px;
padding: 4px 6px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -38px;
margin-left: -23px;
}
.el-button+.el-button {
margin-left: -23px;
margin-top: 16px;
}
}
.tdytAdd {
width: 100px;
}
.tdytAdd,
.tdytMinus {
span {
font-size: 14px;
height: 114px;
text-align: center;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
position: absolute;
top: 50%;
left: 30%;
}
i {
color: #66b1ff;
font-size: 30px;
position: absolute;
top: 50%;
margin-top: 0px;
left: 55%;
z-index: 1;
}
}
.tdytMinus {
i {
color: #FA6400;
left: 50%;
margin-left: -18px;
}
}
.childYT {
i {
top: 50%;
margin-top: -18px;
}
}
.el-row:nth-last-child(1) {
border-bottom: none;
}
/deep/.el-select-tree {
width: 100%;
.el-input__inner {
height: 34px !important;
position: relative;
top: -1px;
}
}
}
</style>
<template>
<div class="temp">
<el-row class="qlxzModule" v-for="(items, index) in countList" :key="items.id">
<template v-for="(childItem, childIndex) in items.list">
<el-col :span="2" class="btnCol" :key="childIndex + '1'" :class="childIndex > 0 ? 'childYT noTopBorder' : ''">
<el-button v-show="childIndex < 1" type="primary" class="changeBtn addMinus outAdd"
@click="handleClick(index, 'add')">+</el-button>
<el-button v-show="childIndex < 1" type="primary" class="changeBtn addMinus outMinus"
@click="handleClick(index, 'minus')">-</el-button>
<div :class="items.hasNotBorder ? 'itemShow whiteItem' : 'whiteItem'" v-if="items.isInside"></div>
</el-col>
<el-col :span="2" class="btnCol" :key="childIndex + '8'" :class="childIndex > 0 ? 'childYT' : ''">
<!-- <template v-if="childIndex>0"> -->
<span class="qlxz" v-show="childIndex < 1">权利性质</span><br />
<el-button type="primary" class="changeBtn addMinus inAdd" @click="handleInClick(index, childIndex, 'add')">+
</el-button>
<el-button type="primary" class="changeBtn addMinus inMinus"
@click="handleInClick(index, childIndex, 'minus')">-</el-button>
<!-- </template> -->
</el-col>
<el-col :span="5" :key="childIndex + '7'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>批准用途</li>
<li>实际用途</li>
<li>土地使用起始时间<i class="requisite">*</i></li>
</ul>
</el-col>
<el-col :span="5" :key="childIndex + '6'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>
<el-select-tree v-if="show" :default-expand-all="defaultExpandAll" :multiple="multiple"
:placeholder="placeholder" :disabled="disabled" :data="$store.state.tdytList" :props="treeProps"
:check-strictly="checkStrictly" :clearable="clearable" v-model="childItem.pzytdm"></el-select-tree>
</li>
<li>
<el-select-tree v-if="show" :default-expand-all="defaultExpandAll" :multiple="multiple"
:placeholder="placeholder" :disabled="disabled" :data="$store.state.tdytList" :props="treeProps"
:check-strictly="checkStrictly" :clearable="clearable" v-model="childItem.sjytdm"></el-select-tree>
</li>
<li>
<el-date-picker v-model="childItem.tdsyqssj" :picker-options="childItem.pickerStart" type="date"
value-format="yyyy-MM-dd" placeholder="选择日期" @input="startTime(index, childIndex)">
</el-date-picker>
</li>
</ul>
</el-col>
<el-col :span="5" :key="childIndex + '5'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>地类编码</li>
<li>地类编码</li>
<li>土地使用结束时间<i class="requisite">*</i></li>
</ul>
</el-col>
<el-col :span="5" :key="childIndex + '4'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>
<input type="text" style="top: -1px;" v-model="childItem.pzytdm" class="formInput" />
</li>
<li>
<input type="text" v-model="childItem.sjytdm" class="formInput" />
</li>
<li>
<el-date-picker v-model="childItem.tdsyjssj" type="date" value-format="yyyy-MM-dd"
:picker-options="childItem.pickerEnd" placeholder="选择日期" @input="endTime(index, childIndex)">
</el-date-picker>
</li>
</ul>
</el-col>
</template>
<div class="title">
<el-select class="formSelect" v-model="items.qlxzdm">
<el-option v-for="item in $store.state.qlxzList" :key="item.dm" :label="item.mc" :value="item.dm">
</el-option>
</el-select>
</div>
</el-row>
</div>
</template>
<script>
// import { getDdicByMC } from "@api/common";
export default {
props: {
// widtd: {
// type: String,
default: "70%",
,
a () {
return {
//树型结构
how: true,
arable: true,
aultExpandAll: true,
tiple: false,
ceholder: "请选择",
abled: false,
ckStrictly: true,
eProps: {
lue: "dm",
ildren: "children",
bel: "mc",
ntList: [
id: Math.random(),
isInside: false,
hasNotBorder: false,
bsm: "", //权利性质标识码
lbsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
lxzdm: "",
zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
list: [
{
pzdjbsm: "",
pzdjmc: "",
pzytdm: "",
pzytmc: "",
pzytmj: 0,
qlxzbsm: "",
sjdjbsm: "",
sjdjmc: "",
sjytdm: "",
sjytmc: "",
jytmj: 0,
syqx: "",
tdsyjssj: "",
tdsyqssj: "",
pickerStart: {},
pickerEnd: {},
tdzh: "",
},
Num: 0,
ed () { },
hods: {
外层操作
ndleClick (ind, type) {
outsideObj = {
Math.random(),
Inside: false,
sNotBorder: false,
"", //权利性质标识码
bsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
xzdm: "",
zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
list: [
{
pzdjbsm: "",
pzdjmc: "",
pzytdm: "",
pzytmc: "",
pzytmj: 0,
qlxzbsm: "",
sjdjbsm: "",
sjdjmc: "",
sjytdm: "",
sjytmc: "",
sjytmj: 0,
syqx: "",
tdsyjssj: "",
tdsyqssj: "",
tdzh: "",
};
(type === "add") {
is.countList.push(outsideObj);
is.outNum++;
lse {
.countList.forEach((item, index) => {
f (index == ind && this.countList.length > 1) {
this.countList.splice(index, 1);
}
});
this.outNum--;
Click (index, childIndex, type) {
eObj = {
",
,
"",
"",
: 0,
m: "",
m: "",
"",
: "",
: "",
: 0,
"",
jssj: "",
sj: "",
: "",
e === "add") {
ountList[index].list.splice(childIndex + 1, 0, insideObj);
ountList[index].list.forEach((item, childInd) => {
(childIndex == childInd && this.countList[index].list.length > 1) {
this.countList[index].list.splice(childIndex, 1);
}
});
s.hasBorderOrNot();
是否显示边框
orderOrNot () {
s.countList.forEach((item, index) => {
(index == this.countList.length - 1) {
m.hasNotBorder = true;
{
sNotBorder =
sInside && !this.countList[index + 1].isInside ? true : false;
aList () {
this.countList;
时间判断
tTime (index, childIndex) {
tartTime = this.countList[index].list[childIndex].tdsyqssj;
endTime = this.countList[index].list[childIndex].tdsyjssj;
s.countList[index].list[childIndex].pickerEnd = {
bledDate: (time) => {
f (Object.keys(startTime).length > 0) {
return new Date(startTime).getTime() > time.getTime();
lse {
rn time.getTime() < Date.now();
t.keys(startTime).length > 0 && Object.keys(endTime).length > 0) {
ear = new Date(startTime).getFullYear();
ear = new Date(endTime).getFullYear();
ime (index, childIndex, e) {
onsole.log(e, 'eeeeee');
let startTime = this.countList[index].list[childIndex].tdsyqssj;
let endTime = this.countList[index].list[childIndex].tdsyjssj;
this.countList[index].list[childIndex].pickerStart = {
disabledDate: (time) => {
if (Object.keys(endTime).length > 0) {
return new Date(endTime).getTime() < time.getTime();
} else {
return time.getTime() > Date.now();
}
}
}
if (Object.keys(startTime).length > 0 && Object.keys(endTime).length > 0) {
let startYear = new Date(startTime).getFullYear();
let endYear = new Date(endTime).getFullYear();
}
},
},
};
</script>
<style lang="scss">
.temp {
width: 100%;
.qlxzModule {
height: auto;
position: relative;
border-bottom: 1px solid #e6e6e6;
.el-col {
// height: 100%;
border-right: 1px solid #E6E6E6;
position: relative;
text-align: right;
padding-right: 10px;
.qlxz {
line-height: 34px;
}
ul {
margin-top: 34px;
li {
height: 37px;
line-height: 37px;
text-decoration: none;
border-bottom: 1px solid #e6e6e6;
.el-select {
width: 100%;
}
.el-input {
width: 100%;
}
.el-input__inner {
height: 34px;
}
input {
position: relative;
top: -2px;
height: 35px;
width: calc(100% - 1px) !important;
}
}
li:last-child {
border-bottom: none;
}
}
.whiteItem {
background-color: #fff;
position: absolute;
width: 100%;
height: 2px;
bottom: -1px;
left: 0;
}
.itemShow {
bottom: 2px;
}
}
.childYT {
height: 114px;
border-top: 1px solid #E6E6E6;
ul {
margin-top: 0;
li {
.el-input__inner {
height: 29px;
}
}
}
.changeBtn {
margin-top: -48px;
}
.el-button+.el-button {
margin-top: 4px;
}
}
.noTopBorder {
border-top: 0;
}
.noRightBorder {
border-right: 0;
}
.el-col:nth-last-child(2) {
border-right: none;
}
.title {
width: 83.33333%;
height: 34px;
line-height: 34px;
background-color: #fff;
border-bottom: 1px solid #E6E6E6;
position: absolute;
right: 0;
top: 0;
.formSelect {
top: -1px;
width: 100%;
.el-input__inner {
height: 32px;
}
}
}
}
.btnCol {
position: relative;
height: 146px;
.changeBtn {
width: 46px;
height: 46px;
font-size: 30px;
padding: 4px 6px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -38px;
margin-left: -23px;
}
.el-button+.el-button {
margin-left: -23px;
margin-top: 16px;
}
}
.el-row:nth-last-child(1) {
border-bottom: none;
}
/deep/.el-select-tree {
width: 100%;
.el-input__inner {
height: 30px !important;
}
}
}
</style>
<template>
<div class="tree_item_box">
<div class="column-start-start linkLine_default" v-for="(item, s_index) in list" :key="s_index" :class="{
linkLine_first: (s_index === 0) & (list.length > 1),
linkLine_half_top: s_index === 0 && list.length === 1,
linkLine_last: s_index === list.length - 1 && s_index !== 0,
third_layer: !item.children,
second_layer: item.children,
curNode: $route.query.bsm && $route.query.bsm == item.bsm,
zxxNode: item.qszt,
iszd: item.qszt && item.type == 'zd',
isdz: item.qszt && item.type == 'dz',
iszrz: item.qszt && item.type == 'zrz',
isgzw: item.qszt && item.type == 'gzw'
}">
<div class="row-flex-start basic_banner" @click="itemClick(item)" @dblclick="dbclick(item, item.zdbsm)" :class="{
active_color: item.expand,
}">
<div class="layer_text nowrap" @contextmenu.prevent="openMenu($event, item, list)" :class="{
active_color: item.expand
}" :ref="($route.query.bsm && $route.query.bsm == item.bsm) ? 'curZxx' : ''" :data-zdbsm="item.zdbsm"
:title=item.mc>
<i v-show="!islpb && !item.qszt && !item.type" class="iconfont iconguoyou" style="margin-right:6px"></i>
<template v-if="islpb && item.type == 'ljz' && item.children.length > 0">
<i v-if="!item.expand" class="iconfont iconxiala lpbTree-node"></i>
<i v-if="item.expand" class="iconfont iconxialazhankai lpbTree-node"></i>
</template>
<!-- <i v-show="islpb && item.expand && item.children.length > 0" class="iconfont iconxiala" style="margin-right:6px"></i>
<i v-show="islpb && !item.expand && item.children.length > 0" class="iconfont iconxialazhankai" style="margin-right:6px"></i> -->
<span class="qsztImg" v-if="item.bblx == 1 || (item.bhqkbsm != '' && item.bhqkbsm != null)">
<!-- <span class="qsztFont" style="color: #9e9b9b">变</span> -->
<i
:class="$route.query.bsm && $route.query.bsm == item.bsm ? 'iconfont iconbianing' : 'iconfont iconbian'"></i>
</span>
<template v-else>
<span class="qsztImg" v-if="item.qszt == '0'">
<!-- <span class="qsztFont" style="color: #2FA3FA; ">临</span> -->
<i :class="$route.query.bsm && $route.query.bsm == item.bsm ? 'iconfont iconlining' : 'iconfont iconlin'"
style="color: #F7B500;"></i>
</span>
<span class="qsztImg" v-if="item.qszt == '1'">
<!-- <span class="qsztFont" style="color: #1AD6E1; ">正</span> -->
<i :class="$route.query.bsm && $route.query.bsm == item.bsm ? 'iconfont iconzhenging' : 'iconfont iconzheng'"
style="color: #15D7E2;"></i>
</span>
<span class="qsztImg" v-if="item.qszt == '2'">
<!-- <span class="qsztFont" style="color: #45AEFD; ">现</span> -->
<i :class="$route.query.bsm && $route.query.bsm == item.bsm ? 'iconfont iconxianing' : 'iconfont iconxian'"
style="color: #2FA3FA;"></i>
</span>
</template>
<i class="iconfont iconziranchuang1 mr4" v-if="item.type == 'zrz'"></i>
<i class="iconfont iconduochuang1 mr4" v-if="item.type == 'dz'"></i>
<i class="iconfont icongouzhuwu mr4" v-if="item.type == 'gzw'"></i>
<span v-if="islpb">({{ item.type | bdcLxFilter }})</span>
<span>{{ item.mc }}</span>
</div>
<div v-if="item.children" class="reTree_icon" :style="{
height: 10 + 'px',
width: 10 + 'px',
}" :class="{
reTree_default_icon: item.children.length === 0,
reTree_collapse_icon: !islpb && item.expand && item.children.length > 0,
reTree_expand_icon: !islpb && !item.expand && item.children.length > 0,
}"></div>
<div v-if="item.children == null" class="reTree_icon" :class="{
reTree_default_icon: item.dm != 'G' && item.dm != 'J' && item.dm != 'Z',
reTree_expand_icon: item.dm == 'G' || item.dm == 'J' || item.dm == 'Z',
}" :style="{
height: 10 + 'px',
width: 10 + 'px',
}"></div>
</div>
<line-item :list="item.children" v-on="$listeners" :islpb="islpb" :size="size"
v-if="item.expand && item.children && item.children.length > 0"></line-item>
</div>
</div>
</template>
<script>
// import { getZdDetailList } from "@api/common"
export default {
name: "line-item",
props: {
list: {
ype: Array,
ault: () => {
turn [];
,
},
formatData: {
ype: Array,
ault: () => {
turn [];
: {
e: Number,
ault: 16,
ble: {
e: Boolean,
ault: false,
b: {
e: Boolean,
efault: false,
}
,
a () {
rn {
e: null,
reeXzqHeight: 0,
linshi: require("@/image/lpb/lin.png"),
zhengshi: require("@/image/lpb/zheng.png"),
ianshi: require("@/image/lpb/xian.png"),
}
,
nted () {
onsole.log(this.$refs.curZxx,'this.$refs.curZxx');
this.$refs.curZxx) {
onsole.log(this.$refs.curZxx[0].dataset.zdbsm);
his.$store.state.oldZdbsm = this.$refs.curZxx[0].dataset.zdbsm;
: {
Click (item) {
self = this;
开启延时器，300ms的间隔区分单击和双击，解决双击时执行两次单击事件
learTimeout(self.time);
elf.time = setTimeout(() => {
em.expand = item.expand == undefined ? true : !item.expand;
self.$emit("itemClick", item);
source = ''
itch (this.$route.path) {
ase '/add':
source = '1,2'
break;
case '/change':
source = '2'
break;
case '/panel':
source = '0,1,2'
break;
e '/modify':
source = '1'
break;
e '/search':
source = '0,1,2'
break;
default:
break;
目录树的所有权类型单击时加载子节点
(!item.children && !item.type) {
et data = {
xzqbsm: item.xzq,
djqbsm: item.djq,
djzqbsm: item.djzq,
syqlx: item.dm,
source: source
/ getZdDetailList(data).then((res) => {
// if (res.result.length > 0) {
/ res.result.forEach(i => {
// if (i.children.length > 0) {
/ i.expand = false;
}
/ })
// self.$emit("ownerMethod", item, res.result);
/ }
/ }).catch((error) => {
/ });
0);
键点击事件
enMenu (e, item, list) {
onsole.log(item, '右键list');
his.$emit("changeTop", e.pageY);
s.$emit("changeLeft", e.pageX);
s.$emit("changeZdData", item);
$emit("changeVisible", false);
所有权类型
e.log(item.dm,'item.dm ');
dm == 'G' || item.dm == 'J' ||item.dm == 'Z'){
mit("changeCreateVisible", true);
(item.type) {
zd':
$emit("changeIsZD", true);
mit("changeVisible", true);
;
dz':
$emit("changeDzVisible", true);
;
'zrz':
$emit("changeIsZD", false);
s.$emit("changeVisible", true);
;
zdy':
$emit("changeLpbVisible", true);
ljz':
s.$emit("changeLpbVisible", true);
reak;
case 'gzw':
this.$emit("changeGzwVisible", true);
break;
fault:
reak;
键双击事件
ick (item, bsm) {
Timeout(this.time);
tore.state.newZdbsm = bsm;
tem.type) {
':
tore.state.zdbsm = item.bsm;
:
tore.state.zrzbsm = item.bsm;
;
'dz':
his.$store.state.dzbsm = item.bsm;
reak;
'gzw':
his.$store.state.gzwbsm = item.bsm;
reak;
fault:
reak;
m.type == 'zd' || item.type == 'dz' || item.type == 'zrz' || item.type == 'gzw') {
= {
2,
.bsm,
his.$route.query.auth ? this.$route.query.auth : '0,1,2'
.$route.query.workitemInstanceId) {
workitemInstanceId = this.$route.query.workitemInstanceId;
(this.$route.query.ywbsm) {
data.ywbsm = this.$route.query.ywbsm;
}
this.$router.push({
path: '/' + item.type,
query: data
});
}
},
closeMenu () {
this.$emit("changeVisible", false);
},
},
watch: {
visible (value) {
if (value) {
document.body.addEventListener("click", this.closeMenu);
} else {
document.body.removeEventListener("click", this.closeMenu);
}
},
},
};
</script>
<style lang="scss">
.content {
height: 100%;
width: 100%;
}
.column-start-center {
display: flex;
display: -webkit-flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.row-flex-start {
display: flex;
display: -webkit-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// .active_color {
// color: #ffffff;
// }
.reTree_icon {
width: 17px;
height: 17px;
margin-right: 16px;
}
.no_icon {
width: 17px;
height: 17px;
}
.tree_item_box {
position: relative;
width: 100%;
cursor: pointer;
}
// .ofy_scroll{
// overflow-y: scroll;
// overflow-x: hidden;
// }
.basic_layer {
width: 100%;
position: relative;
color: #4a4a4a;
cursor: pointer;
.layer_text {
flex: 1;
line-height: 40px;
}
}
.first_vertical_line {
content: "";
position: absolute;
width: 1px;
left: 6px;
top: 17px;
background: #c3c5c8;
}
.basic_banner {
position: relative;
width: 279px;
height: 40px;
box-sizing: border-box;
padding-left: 20px;
}
.lpb_basic_banner {
padding-left: 42px;
}
.second_layer {
position: relative;
width: calc(100% - 20px);
cursor: pointer;
padding-left: 20px;
.basic_banner {
width: 100%;
}
}
.zxxNode {
width: 279px !important;
position: relative;
left: -80px;
text-indent: 80px;
}
.iszd {
.tree_item_box {
.zxxNode {
padding-left: 0;
left: 0;
}
}
}
.iszrz,
.isgzw {
left: 0px !important;
text-indent: 96px;
}
.isdz {
text-indent: 96px !important;
.iszrz {
left: 0 !important;
text-indent: 112px !important;
}
}
.third_layer {
position: relative;
width: calc(100% - 20px);
cursor: pointer;
padding-left: 20px;
}
.white_layer {
color: black !important;
}
.lpbTree-node {
position: absolute;
top: 1px;
left: 0;
}
// .second_layer::before {
// content: "";
// position: absolute;
// height: 1px;
// width: 16px;
// left: 8px;
// top: 8px;
// opacity: .5;
// background: url('../../assets/images/rowline1.png');
// background-position-y: center;
// }
// .third_layer::before {
// content: "";
// position: absolute;
// height: 1px;
// width: 16px;
// left: 8px;
// top: 8px;
// opacity: .5;
// background: url('../../assets/images/rowline1.png');
// background-position-y: center;
// }
// .linkLine_default::after {
// content: "";
// position: absolute;
// height: 100%;
// width: 1px;
// left: 7px;
// top: 0px;
// opacity: .5;
// background: url('../../assets/images/colline1.png');
// background-position-x: center;
// }
// .linkLine_first::after {
// content: "";
// position: absolute;
// /* 为了触顶 */
// top: -16px;
// height: calc(100% + 16px);
// width: 1px;
// left: 7px;
// opacity: .5;
// background: url('../../assets/images/colline1.png');
// background-position-x: center;
// }
// // 上半截
// .linkLine_half_top::after {
// content: "";
// position: absolute;
// height: 23px;
// top: -14px;
// width: 1px;
// left: 7px;
// opacity: .5;
// background: url('../../assets/images/colline1.png');
// background-position-x: center;
// }
// .linkLine_last::after {
// content: "";
// position: absolute;
// height: 9px;
// width: 1px;
// left: 7px;
// top: 0px;
// opacity: .5;
// background: url('../../assets/images/colline1.png');
// background-position-x: center;
// }
.reTree_default_icon {
// opacity: .5;
background-size: contain;
}
.reTree_collapse_icon {
// opacity: .5;
background: url("../../assets/images/arrow-down-bold.svg") no-repeat center center;
background-size: contain;
}
.reTree_expand_icon {
// opacity: .5;
background: url("../../assets/images/arrow-left-bold.svg") no-repeat center center;
background-size: contain;
}
.lpbTree_collapse_icon {
// opacity: .5;
background-size: contain;
}
.lpbTree_expand_icon {
// opacity: .5;
background: url("../../assets/images/arrow-left-bold.svg") no-repeat center center;
background-size: contain;
}
.reTree_focus_icon {
// opacity: .5;
background: url("../../assets/images/reTree_focus_.svg") no-repeat center center;
background-size: contain;
}
.qsztImg {
width: 16px;
margin-right: 6px;
// border-radius: 50%; height: 20px; width: 20px; display: inline-block;
}
.curNode {
>.basic_banner {
background: #E9F5FF;
box-shadow: inset 2px 0 0 0 #0C71FB;
color: #0C71FB;
}
}
.qsztFont {
text-align: center;
display: inline-block;
width: 16px;
height: 16px;
font-size: 12px;
line-height: 16px;
border: 1px solid;
border-radius: 8px;
}
.mr4 {
margin-right: 4px;
}
</style>
<template>
<div class="content column-start-center reTree_box"
:style="{ fontSize: (size || 16) + 'px', lineHeight: (size || 16) + 'px', width: (islpb ? '200' : '286') + 'px' }">
<div class="column-start-center basic_layer" :class="islpb ? 'white_layer' : ''" v-for="(item, index) in formatData"
:key="index">
<div class="row-flex-start basic_banner" :class="{
active_color: item.expand && item.children.length > 0,
}" @click="itemClick(item)">
<div class="layer_text nowrap" @contextmenu.prevent="openMenu($event, item)"><i class="iconfont iconguoyou"></i>
{{ item.mc }}</div>
<div class="reTree_icon" :style="{
height: 10 + 'px',
width: 10 + 'px',
}" :class="{
reTree_default_icon: item.children.length === 0,
reTree_collapse_icon: !islpb && item.expand && item.children.length > 0,
reTree_expand_icon: !islpb && !item.expand && item.children.length > 0,
lpbTree_collapse_icon: islpb && item.expand && item.children.length > 0,
lpbTree_expand_icon: islpb && !item.expand && item.children.length > 0,
}"></div>
</div>
<lineItem v-if="item.expand && item.children.length > 0" v-on="$listeners" @ownerMethod="ownerMethod(arguments)"
@changeTop="changeTop" @changeZdData="changeZdData" @changeLeft="changeLeft" @changeVisible="changeVisible"
@changeLpbVisible="changeLpbVisible" @changeIsZD="changeIsZD" @changeCreateVisible="changeCreateVisible"
@changeDzVisible="changeDzVisible" @changeGzwVisible="changeGzwVisible" :list="item.children"
:visible="zrzVisible" :size="size" :islpb="islpb" :formatData="formatData"></lineItem>
</div>
<ul v-show="zrzVisible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
<li @click="postionToMap">定位</li>
<li @click="importGeo">导入图形</li>
<li>
导出图形
<ul class="contextmenu childUl">
<li @click="exportText">文本</li>
<li @click="exportCad">CAD</li>
<li @click="exportExcel">Excel</li>
<li @click="exportToShp">ESRI Shape</li>
</ul>
</li>
<li @click="drsx" :class="zdQszt == '0' ? '' : 'noEdit'">导入属性</li>
<li @click="dcsx">导出属性</li>
<li v-show="!isZD">导入楼盘</li>
<!-- <li>重叠分析</li> -->
<li v-show="isZD && (zdQszt == '1' || zdQszt == '2')" @click="openCreateDialog('dzw')">添加定着物</li>
<li v-show="isZD && (zdQszt != '1' && zdQszt != '2')" class="noEdit">添加定着物</li>
<li @click="deleteByBsm()">删除</li>
<li @click="deleteGeoByBsm()">删除图形</li>
</ul>
<ul v-show="dzVisible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
<li @click="openCreateDialog('zrz')">新建自然幢</li>
<li @click="deleteByBsm()">删除</li>
</ul>
<ul v-show="createVisible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
<li @click="openCreateDialog">新建宗地</li>
</ul>
<!-- 构筑物删除 -->
<ul v-show="gzwVisible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
<li @click="deleteByBsm">删除</li>
</ul>
<ul v-show="lpbvisible" :style="{ left: lpbleft + 'px', top: lpbtop + 'px' }" class="contextmenu">
<li v-show="zdData.type == 'zrz'" @click="openLpbDialog('ljz')">添加逻辑幢</li>
<li v-show="zdData.type == 'zrz' || zdData.type == 'ljz'" @click="openLpbDialog('zdy')">添加幢单元</li>
<li v-show="zdData.type == 'zrz' || zdData.type == 'ljz' || zdData.type == 'zdy'" @click="openLpbDialog('ch')">
添加层户</li>
<li v-show="zdData.type == 'ljz'" @click="deleteLjz">删除</li>
<li v-show="zdData.type == 'zdy'" @click="deleteZdy">删除</li>
</ul>
<!--@close="closeImportDialog"-->
<el-dialog :close-on-click-modal="false" title="导入图形" :modal="false" custom-class="importDialog"
:visible.sync="improtDialog" width="30%" @close="closeImportDialog">
<import-geo :property-info="zdData" :timeLine="new Date().getTime()" :geo-info="currentClickZdGeo"
@closeImportDialog="closeImportDialog"></import-geo>
</el-dialog>
<!-- 添加定着物弹框 -->
<el-dialog :close-on-click-modal="false" title="新建" :modal="false" :visible.sync="dialogVisible" width="48%">
<!-- <Create @closeDialog="closeDialog" :auth="true" :createZrz="createZrz" ></Create> -->
</el-dialog>
<!-- <sxdr :sxdr-visible="sxdrVisible" @close="sxdrClose" :dylx="zdData.type" :bsm="zdData.bsm"></sxdr> -->
</div>
</template>
<script>
import lineItem from "./lineItem.vue";
// import { deleteZdInfoByBsm, exportShp, exportExcel, delJzdByBsm, delJzxByBsm } from "@api/zd";
// import Create from "../../views/panel/create/index";
import ImportGeo from './tx/importGeo'
port geoUtils from "@/components/lineTree/tx/js/geoUtils";
rt featureUpdate from "@/libs/map/featureUpdate";
ort { deleteLjz, deleteZdy } from "@api/lpcx.js"
exportTemJson from '@/api/json/exportTemplate.json'
mport sxdr from '@/components/sxdr/sxdr'
port default {
nheritAttrs: false,
ps: {
{
e: Array,
ault: () => {
turn[];
: {
e: Number,
ault: 16,
b: {
e: Boolean,
ault: false,
omponents: { lineItem, Create, ImportGeo, sxdr },
ixins: [geoUtils, featureUpdate],
a() {
rn {
rVisible: false,
electedDetail: { },
timer: { },
formatData: this.$store.state.treeData,
isible: false,
top: 0,
left: 0,
sZD: true,
ata: { },
rentClickZdGeo: "",
mprotDialog: false,
ialogVisible: false,
制自然幢右键菜单
Visible: false,
盘表
visible: false,
top: 0,
left: 0,
/控制新建宗地菜单
reateVisible: false,
幢
isible: false,
属状态
szt: null,
: "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]",
ateZrz: false,
/构筑物
zwVisible: false
ch: {
(n, o) {
s.formatData = this.preDealData(n);
isible(value) {
(value) {
ment.body.addEventListener("click", this.closeMenu);
lse {
cument.body.removeEventListener("click", this.closeMenu);
Visible(value) {
(value) {
cument.body.addEventListener("click", this.closeMenu);
lse {
cument.body.removeEventListener("click", this.closeMenu);
wVisible(value) {
f(value) {
document.body.addEventListener("click", this.closeMenu);
lse {
cument.body.removeEventListener("click", this.closeMenu);
}
zrzVisible(value) {
(value) {
ment.body.addEventListener("click", this.closeMenu);
lse {
document.body.removeEventListener("click", this.closeMenu);
reateVisible(value) {
(value) {
document.body.addEventListener("click", this.closeMenu);
} else {
document.body.removeEventListener("click", this.closeMenu);
}
}
ed() {
nextTick(() => {
eDealData(this.pd);
ndTreeItemById(["6b5af49d803f97baf06afb897de257f5"]);
{
.log(this.zdData, 'zdData')
ow.open(`api/tx/excelGeo/export?bsm=${this.zdData.bsm}&type=${this.zdData.type}`)
`api/tx/excelGeo/export?bsm=${this.zdData.bsm}&type=${this.zdData.type}`
mIF = document.createElement("iframe");
src = url;
style.display = "none";
t.body.appendChild(elemIF)
{
his.zdQszt != '0') {
drVisible = true;
e() {
sxdrVisible = false;
ading() {
his.$emit("loading")
eleteLjz() {
console.log("删除逻辑幢")
console.log(this.zdData, "zdData")
deleteLjz(this.zdData.bsm).then(res => {
if (res.success) {
this.loading()
else {
dy() {
log("删除幢单元")
e.log(this.zdData, "zdData")
teZdy(this.zdData.bsm).then(res => {
f(res.success) {
this.loading()
}
,
变菜单数据
Visible(data) {
s.zrzVisible = data;
s.lpbvisible = false;
dzVisible = false;
wVisible = false;
ta(data) {
= data;
zt = data.qszt;
(data) {
p = data;
lpbtop = data;
angeLeft(data) {
this.left = data;
this.lpbleft = data;
},
changeIsZD(data) {
this.isZD = data;
},
changeLpbVisible(data) {
this.lpbvisible = data;
this.zrzVisible = false;
this.dzVisible = false;
this.gzwVisible = false;
},
changeCreateVisible(data) {
this.createVisible = true;
},
//多幢
changeDzVisible(data) {
this.dzVisible = data;
this.zrzVisible = false;
this.lpbvisible = false;
this.gzwVisible = false;
},
//构筑物
changeGzwVisible(data) {
this.gzwVisible = data;
this.zrzVisible = false;
this.lpbvisible = false;
this.dzVisible = false;
},
//添加定着物
openCreateDialog(type) {
if (type == 'zrz') {
this.createZrz = true;
}
console.log(this.zdData, 'this.zdData');
this.dialogVisible = true;
this.$store.state.zdbsm = this.zdData.zdbsm;
if (this.zdData.type == 'dz') {
this.$store.state.dzbsm = this.zdData.bsm;
} else {
this.$store.state.dzbsm = '';
}
},
//关闭添加定着物弹框
closeDialog() {
this.dialogVisible = false;
this.createZrz = false;
},
preDealData(list) {
//楼盘表目录树没有expand属性
// if(list == null){
// return list
// }else{
list.forEach((x) => {
if (x.expand == undefined) this.$set(x, "expand", true);
if (x.children && x.children.length > 0) {
this.preDealData(x.children);
}
});
return list;
// }
},
// 根据id展开树的具体项
expandTreeItemById(idList) {
let _this = this;
function loopTree (list) {
list.forEach((x) => {
if (idList.includes(x.zdbsm)) {
_this.$set(x, "expand", true);
} else {
_this.$set(x, "expand", false);
}
if (x.children && x.children.length > 0) loopTree(x.children);
});
return list;
}
this.formatData = loopTree(this.pd);
console.log(this.formatData, "this.formatData");
},
itemClick(item) {
// item.expand = item.expand == undefined? true:!item.expand;
this.formatData.forEach(i => {
if (i.bsm != item.bsm) {
i.expand = false
} else {
// i.expand = !item.expand
}
})
item.expand = !item.expand;
// this.$emit("itemClick", item);
},
//给所有权类型添加子节点
ownerMethod(arr) {
let item = arr[0];
let list = arr[1]
this.formatData.forEach(i => {
if (i.bsm == item.xzq) {
i.children.forEach(j => {
if (j.bsm == item.djq) {
j.children.forEach(k => {
if (k.bsm == item.djzq) {
k.children.forEach(n => {
if (n.dm == item.dm) {
this.$nextTick(() => {
n.children = list;
})
}
})
}
})
}
})
}
});
this.$store.state.treeData = this.formatData;
},
//自然幢右键点击事件
openMenu(e, item) {
this.lpbleft = e.pageX;
this.lpbtop = e.pageY;
this.zdData = item;
this.changeLpbVisible(true);
},
//关闭右键菜单
closeMenu() {
this.zrzVisible = false;
this.lpbvisible = false;
this.dzVisible = false;
this.gzwVisible = false;
},
//楼盘表右键菜单项打开父组件弹框
openLpbDialog(type) {
this.$parent.openLpbDialog(this.zdData, type);
},
detailDoubleClick(data) {
clearTimeout(this.timer);
this.selectedDetail = data;
this.$emit("detailDoubleClick", data);
},
//右键菜单的删除
deleteByBsm() {
let name = '';
switch (this.zdData.type) {
case 'zd':
name = '宗地'
break;
case 'dz':
name = '多幢'
break;
case 'zrz':
name = '自然幢'
break;
case 'gzw':
name = '构筑物'
break;
default:
break;
}
this.$confirm('是否确定删除该' + name + '?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = { "bsm": this.zdData.bsm, "type": this.zdData.type };
deleteZdInfoByBsm(params)
.then((res) => {
console.log(res);
if (res.success) {
this.$message({
type: 'success',
message: '删除成功!'
});
this.$router.push("/panel");
} else {
this.$message({
message: res.message,
type: "warning",
});
}
})
.catch((error) => { });
}).catch(() => {
});
var self = this;
var BSM = "";
var type = this.zdData.type;
if (type == "zd") {
BSM = this.zdData.zdbsm;
} else {
BSM = this.zdData.bsm;
}
//删除图形相关信息
var type = this.zdData.type;
this.queryGeoByBsm(BSM, type, function (features) {
if (features && features.length > 0) {
var layer = null;
if (type == 'zd') {
layer = self.getLayerByName("ZDJBXX");
} else {
layer = self.getLayerByName("ZRZ");
}
var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
featureUrl += "/" + layer.id;
self.delGraphic(featureUrl, features[0], null);
}
});
},
//删除图形
deleteGeoByBsm() {
var self = this;
var BSM = "";
var type = this.zdData.type;
if (type == "zd") {
BSM = this.zdData.zdbsm;
} else {
BSM = this.zdData.bsm;
}
//删除图形相关信息
var type = this.zdData.type;
this.queryGeoByBsm(BSM, type, function (features) {
if (features && features.length > 0 && features[0].geometry.rings.length > 0) {
var layer = null;
if (type == 'zd') {
layer = self.getLayerByName("ZDJBXX");
} else {
layer = self.getLayerByName("ZRZ");
}
var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
featureUrl += "/" + layer.id;
features[0].geometry = null;
self.updateGraphic(featureUrl, features, function (res) {
if (!res.updateFeatureResults[0].error) {
self.$message.warning("删除成功!!!")
//清除图层
self.clearHighlightLayer("testMap");
//self.addGeoByBsm(BSM,type,"testMap");
//删除界址点 界址线
if (type == 'zd') {
self.delJzdAndJzx(BSM);
}
}
});
} else {
self.$message.warning("暂无图形信息!!!")
}
});
},
//删除宗地界址点 界址线
delJzdAndJzx(bsm) {
delJzdByBsm({ zdbsm: bsm }).then(res => {
if (res.success) {
console.log("删除界址点成功!!!");
}
});
delJzxByBsm({ zdbsm: bsm }).then(res => {
if (res.success) {
console.log("删除界址线成功!!!");
}
})
},
/*
* 导入图形
* */
importGeo() {
var self = this;
var BSM = "";
if (this.zdData.qszt != '0') {
this.$message.warning("不是临时数据，不能导入图形!!!");
return;
}
var type = this.zdData.type;
if (type == "zd") {
BSM = this.zdData.zdbsm;
} else {
BSM = this.zdData.bsm;
}
//当确定导入图形是 跳转到图形界面
this.queryGeoByBsm(BSM, type, function (features) {
if (features && features.length > 0) {
if (features[0].geometry && features[0].geometry.rings.length > 0) {
self.$confirm('该条数据有地块信息，是否继续导入?', '提示', {
confirmButtonText: '继续',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
self.postionToMap();
self.improtDialog = true;
self.currentClickZdGeo = features[0];
}).catch(() => {
self.$message({
type: 'info',
message: '已取消'
});
});
} else {
self.postionToMap();
self.currentClickZdGeo = features[0];
self.improtDialog = true;
}
} else {
self.postionToMap();
self.currentClickZdGeo = null;
self.improtDialog = true;
}
});
},
//导出文本文件
exportText() {
var self = this;
var type = this.zdData.type;
var BSM = type == 'zd' ? this.zdData.zdbsm : this.zdData.bsm;
this.queryGeoByBsm(BSM, type, function (features) {
if (features && features.length > 0 && features[0].geometry.rings.length > 0) {
var data = features[0];
var jzdInfo = self.craetJZPoint(data);
var textCotent = "";
textCotent += exportTemJson.exprotTextAttr;
textCotent += "[地块坐标]\n";
var dkMc = "", dkYt = "";
if (type == 'zd') {
dkMc = data.attributes.ZL;
dkYt = data.attributes.YT;
} else {
dkMc = data.attributes.XMMC + data.attributes.JZWMC;
dkYt = "建设用地";
}
textCotent += ",,," + dkMc + ",面,," + dkYt + ",,@\n";
for (var i = 0; i < jzdInfo.length; i++) {
textCotent += jzdInfo[i].jzdh + "," + jzdInfo[i].sxh + "," +
jzdInfo[i].x + "," + jzdInfo[i].y + "\n"
}
self.downloadTxt(textCotent, "outPut.txt");
}
}, { wkt: this.wkt });
},
//导出shp文件
exportToShp() {
var self = this;
var type = this.zdData.type;
var BSM = type == 'zd' ? this.zdData.zdbsm : this.zdData.bsm;
this.queryGeoByBsm(BSM, type, function (features) {
if (features && features.length > 0 && features[0].geometry.rings.length > 0) {
var data = JSON.stringify(features[0]);
window.location.href = "/api/tx/shpUtils/writeShp?strObj=" + encodeURI(data)
/* exportShp({
"strObj":encodeURI(data)
}).then(res => {
debugger
});*/
} else {
self.$message.warning("暂无空间信息!!!!");
}
}, { wkt: this.wkt });
},
//导出excel
exportExcel() {
var self = this;
var type = this.zdData.type;
var BSM = type == 'zd' ? this.zdData.zdbsm : this.zdData.bsm;
this.queryGeoByBsm(BSM, type, function (features) {
if (features && features.length > 0 && features[0].geometry.rings.length > 0) {
var data = features[0];
var jzdInfo = self.craetJZPoint(data);
var submitData = [];
for (var i = 0; i < jzdInfo.length; i++) {
var obj = {
jzdHao: jzdInfo[i].jzdh,
x: jzdInfo[i].x,
y: jzdInfo[i].y,
diKuaiQuanHao: jzdInfo.sxh
}
submitData.push(obj);
}
exportExcel(submitData).then((res) => {
if (res.code == 200) {
var path = res.result;
window.location.href = "/api/tx/excelGeo/download?filePath=" + encodeURI(path);
}
});
} else {
self.$message.warning("还没有空间信息!!!!")
}
}, { wkt: this.wkt })
},
//导出CAD
exportCad() {
//TODO
},
downloadTxt(text, fileName) {
let element = document.createElement('a')
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
element.setAttribute('download', fileName)
element.style.display = 'none'
element.click()
},
//图形定位
postionToMap() {
var type = this.zdData.type;
var BSM = type == 'zd' ? this.zdData.zdbsm : this.zdData.bsm;
if (this.$route.path == "/viewMap") {
//定位到当前空间位置
// TODO 这个方法只是为了支撑功能
this.postionToThisGeo(BSM, type);
return;
}
var curretRouterInfo = {
path: this.$route.path,
query: this.$route.query
}
sessionStorage.setItem("curretRouterInfo", JSON.stringify(curretRouterInfo));
this.$router.push({
path: "/viewMap",
query: {
bsm: BSM,
type: type
}
});
},
//关闭图形弹框
closeImportDialog() {
this.improtDialog = false;
this.clearOverLayer();
}
},
};
</script>
<style lang="scss" scoped>
.content {
height: 100%;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.column-start-center {
display: flex;
display: -webkit-flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.row-flex-start {
display: flex;
display: -webkit-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.reTree_icon {
width: 17px;
height: 17px;
margin-right: 16px;
}
.basic_layer {
width: 100%;
position: relative;
color: #4a4a4a;
cursor: pointer;
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
.layer_text {
flex: 1;
}
}
.white_layer {
color: black !important;
}
.first_vertical_line {
content: "";
position: absolute;
width: 1px;
left: 6px;
top: 17px;
background: #c3c5c8;
}
.basic_banner {
position: relative;
width: 280px;
height: 40px;
}
.second_layer {
position: relative;
width: 100%;
cursor: pointer;
padding-left: 25px;
}
.second_layer::before {
content: "";
position: absolute;
height: 1px;
width: 16px;
left: 9px;
top: 9px;
background: #c3c5c8;
}
.linkLine_default::after {
content: "";
position: absolute;
height: 100%;
width: 1px;
left: 9px;
top: 0px;
background: #c3c5c8;
}
.linkLine_first::after {
content: "";
position: absolute;
/* 为了触顶 */
top: -16px;
height: calc(100% + 16px);
width: 1px;
left: 9px;
background: #c3c5c8;
}
// 上半截
.linkLine_half_top::after {
content: "";
position: absolute;
height: 23px;
top: -14px;
width: 1px;
left: 9px;
background: #c3c5c8;
}
.linkLine_last::after {
content: "";
position: absolute;
height: 9px;
width: 1px;
left: 9px;
top: 0px;
background: #c3c5c8;
}
.reTree_collapse_icon {
background: url("../../assets/images/arrow-down-bold.svg") no-repeat center center;
background-size: contain;
}
.reTree_default_icon {
background: url("../../assets/images/reTree_default_.svg") no-repeat center center;
background-size: contain;
}
.reTree_expand_icon {
background: url("../../assets/images/arrow-left-bold.svg") no-repeat center center;
background-size: contain;
}
.lpbTree_collapse_icon {
// opacity: .5;
background: url("../../assets/images/lpbTree_expand_.svg") no-repeat center center;
background-size: contain;
}
.lpbTree_expand_icon {
// opacity: .5;
background: url("../../assets/images/lpbTree_collapse_.svg") no-repeat center center;
background-size: contain;
}
.reTree_focus_icon {
background: url("../../assets/images/reTree_focus_.svg") no-repeat center center;
background-size: contain;
}
/* /deep/ .importDialog{
margin-top: 120px!important;
margin-left: 291px;
} */
</style>
<template>
<div>
<ul class="importDiv" v-if="!resultDialog && !txtResultDialog && !dealDialog">
<li>
<el-upload class="avatar-uploader" action="#" accept=".txt" :auto-upload="false" :show-file-list="false"
:on-change="txtFileChange">
<!-- <el-button size="small" type="primary">点击上传</el-button>-->
<i class="iconfont iconshangchuan"></i>
<div class="title">TXT文本格式</div>
<div class="templateDowload">
<a href="#" @click.stop="downloadFile('./fileTemplate/txttemplet.txt', 'txttemplet.txt')">TXT模板下载</a>
</div>
</el-upload>
</li>
<li>
<el-upload class="avatar-uploader" action="/api/tx/shpUtils/readShp" accept=".zip" :show-file-list="false"
:on-success="shpFileSuccess">
<!--<el-button size="small" type="primary">点击上传</el-button>-->
<i class="iconfont iconshangchuan"></i>
<div class="title">ESRI Shape文件格式</div>
</el-upload>
</li>
<li>
<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" accept=".dwg,.dxf"
:show-file-list="false" :on-success="cadFileSuccess">
<!-- <el-button size="small" type="primary">点击上传</el-button>-->
<i class="iconfont iconshangchuan"></i>
<div class="title">CAD文件</div>
</el-upload>
</li>
<li>
<el-upload class="avatar-uploader" action="/api/tx/excelGeo/readExcel" accept=".xls,.xlsx"
:show-file-list="false" :on-success="excelFileSuccess">
<!--<el-button size="small" type="primary">点击上传</el-button>-->
<i class="iconfont iconshangchuan"></i>
<div class="title">Excel文件格式</div>
<div class="templateDowload">
<a href="#"
@click.stop="downloadFile('./fileTemplate/exceltemplet.xlsx', 'exceltemplet.xlsx')">Excel模板下载</a>
</div>
</el-upload>
</li>
</ul>
<div v-if="resultDialog">
<el-form :model="zdForm" ref="zdCheckForm" label-width="100px" size="small" @submit.native.prevent
class="demo-ruleForm">
<el-form-item label="宗地" prop="zdBsm" :rules="[
{ required: true, message: '请选择宗地', trigger: 'change' },
]">
<el-select v-model="zdForm.zdBsm" filterable placeholder="请选择" @change="zdChange">
<el-option v-for="item in resultData" :key="item.objectid" :label="item.XMMC" :value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('zdCheckForm')">导入</el-button>
<el-button @click="cancel('zdCheckForm')">取消</el-button>
</el-form-item>
</el-form>
</div>
<div v-if="txtResultDialog">
<el-form :model="txtZd" ref="txtZdForm" label-width="100px" size="small" @submit.native.prevent
class="demo-ruleForm">
<el-form-item label="地块名称" prop="name" :rules="[
{ required: true, message: '请选择地块', trigger: 'change' },
]">
<el-select v-model="txtZd.name" filterable placeholder="请选择" @change="txtChange">
<el-option v-for="(item, index) in txtResult" :key="index" :label="item.attributes.name"
:value="item.attributes.name">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitTxtForm('txtZdForm')">导入</el-button>
<el-button @click="cancelTxtForm('txtZdForm')">取消</el-button>
</el-form-item>
</el-form>
</div>
<div v-if="dealDialog">
<el-form :model="dealForm" ref="dealForm" label-width="100px" size="small" @submit.native.prevent
class="demo-ruleForm">
<el-form-item label="处理方法" prop="method" :rules="[
{ required: true, message: '请选择', trigger: 'change' },
]">
<el-select v-model="dealForm.method" filterable placeholder="请选择">
<el-option v-for="(item, index) in dealMethods" :key="index" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitDealForm('dealForm')">确定</el-button>
<el-button @click="cancelDealForm('dealForm')">取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import geoUtils from "@components/lineTree/tx/js/geoUtils";
import featureUpdate from "@libs/map/featureUpdate";
// import { addjzd, addjzx } from "@/api/zd"
export default {
props: {
propertyInfo: {
type: Object,
default: null
},
geoInfo: {
type: Object,
default: null
},
timeLine: {
type: Number,
default: null
}
},
mixins: [geoUtils, featureUpdate],
data () {
return {
resultData: [],
resultDialog: false,
zdForm: {
zdBsm: ""
},
currentClickZd: null,
txtResult: [],
txtResultDialog: null,
txtZd: {
name: ""
},
overResults: [],//与导入宗地重叠的地块
currntDealGraphic: null,
dealMethods: [{
label: "不做处理",
value: "1"
}, {
label: "删除叠加部分",
value: "2"
}, {
label: "删除已重叠部分",
value: "3"
}, {
label: "删除原图形",
value: "4"
}],
dealDialog: false,
dealForm: {
method: ""
}
}
},
watch: {
timeLine (newValue, oldValue) {
this.resultDialog = false;
this.txtResultDialog = false;
this.dealDialog = false;
}
},
methods: {
/**
* @description: txtFileChange
* @param {*} file
* @param {*} fileList
* @author: renchao
*/
txtFileChange (file, fileList) {
var self = this;
var fileReader = new FileReader();
fileReader.readAsText(file.raw);
fileReader.onload = function (res) {
var content = this.result;
if (!content || content.length == 0) {
self.$message.warning("文件内容为空!!!");
return;
}
self.analysisTextFile(content);
}
},
/**
* @description: analysisTextFile
* @param {*} content
* @author: renchao
*/
analysisTextFile (content) {
var index = content.indexOf("[地块坐标]"),
geoInfos = content.substr(index),
geoList = geoInfos.split("\n");
if (geoList.length < 1) {
this.$message.warning("文本内容格式有误，请效验文本内容格式!!!");
return;
}
//this.$emit("closeImportDialog");
var features = [], attributes = {}, points = [], j = 1;
for (var i = 1; i < geoList.length; i++) {
var rowData = geoList[i];
if ((rowData.indexOf("J") != -1 && rowData.indexOf("J") == 0) || (rowData.indexOf("j") != -1 && rowData.indexOf("j") == 0)) {
//解析坐标点信息
var pointInfo = rowData.split(",");
var point = [parseFloat(pointInfo[2]), parseFloat(pointInfo[3])];
points.push(point);
} else {
if (points.length > 0) {
var graphic = {
attributes: JSON.parse(JSON.stringify(attributes)),
geometry: {
rings: [points]
}
}
features.push(graphic);
}
//新建一个信息 坐标名称 类型
attributes = {};
points = []
var info = rowData.split(",");
if (info[3] || info[3] == 'null') {
attributes.name = '地块' + j;
j++
} else {
attributes.name = info[3];
}
}
}
if (points.length > 0) {
var graphic = {
attributes: JSON.parse(JSON.stringify(attributes)),
geometry: {
rings: [[points.concat()]]
}
}
features.push(graphic);
}
//新建一个信息 坐标名称 类型
attributes = {};
points = []
this.txtResult = features;
this.txtZd.name = "";
this.txtResultDialog = true;
},
/**
* @description: shpFileSuccess
* @param {*} response
* @param {*} file
* @param {*} fileList
* @author: renchao
*/
shpFileSuccess (response, file, fileList) {
var self = this;
if (response.success) {
this.resultData = response.result;
this.resultDialog = true;
} else {
this.$message.warning(response.message);
}
},
/**
* @description: cadFileSuccess
* @param {*} response
* @param {*} file
* @param {*} fileList
* @author: renchao
*/
cadFileSuccess (response, file, fileList) {
},
/**
* @description: excelFileSuccess
* @param {*} response
* @param {*} file
* @param {*} fileList
* @author: renchao
*/
excelFileSuccess (response, file, fileList) {
var self = this;
if (response.success) {
var result = response.result;
var points = [];
for (var i = 0; i < result.length; i++) {
var point = [];
point[0] = parseFloat(result[i].x);
point[1] = parseFloat(result[i].y);
points.push(point);
}
var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
var geometry = {
rings: [points],
spatialReference: {
wkt: wkt
},
type: "polygon"
}
var graphic = {
attributes: null,
geometry: geometry
}
self.checkGeo(graphic);
} else {
this.$message.warning(response.message);
}
},
/**
* @description: 文本文档导入
* @param {*} formName
* @author: renchao
*/
submitTxtForm (formName) {
var self = this;
this.$refs[formName].validate((valid) => {
if (valid) {
var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
var graphics = self.txtResult.filter(item => {
return item.attributes.name == self.txtZd.name;
})
var graphic = graphics[0];
graphic.geometry.type = "polygon";
graphic.geometry.spatialReference = {
wkt: wkt
}
self.checkGeo(graphic);
} else {
console.log('error submit!!');
return false;
}
})
},
/**
* @description: txtChange
* @param {*} value
* @author: renchao
*/
txtChange (value) {
var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
var graphics = this.txtResult.filter(item => {
return item.attributes.name == value;
})
var graphic = graphics[0];
graphic.geometry.type = "polygon";
graphic.geometry.spatialReference = {
wkt: wkt
}
this.addOverLayer(graphic.geometry, []);
},
/**
* @description: 校验空间完整性
* @param {*} graphic
* @author: renchao
*/
checkGeo (graphic) {
var self = this;
//校验完整性 直接调用空间方法 提交空间表
self.geoJoint(graphic.geometry, function (isJoint, message) {
if (isJoint) {
self.$message.warning(message)
return;
} else {
var type = self.propertyInfo.type;
if (type == 'zd') {
//重叠分析
self.zdOverAnalys(self.propertyInfo.zdbsm, graphic, function (flag, results) {
if (flag) {
self.$message.warning("导入的宗地与其他宗地有重叠，请处理！！");
self.dealOverData(results, graphic);
} else {
self.saveZd(graphic);
}
});
} else {
self.zrzOverAnalys(self.propertyInfo.bsm, graphic, function (flag, mes) {
if (flag) {
self.$message.warning(mes);
return;
} else {
self.saveZRZ(graphic);
}
});
}
}
});
},
/**
* @description: 选择处理方式
* @param {*} formName
* @author: renchao
*/
submitDealForm (formName) {
var self = this;
this.$refs[formName].validate((valid) => {
if (valid) {
//选择处理方式
var value = self.dealForm.method;
self.currntDealGraphic.attributes = {};
switch (value) {
case '1': self.currntDealGraphic.attributes.BGZT = 1; self.saveZd(self.currntDealGraphic); break;
case "2": self.getDifference(self.currntDealGraphic, self.overResults, self.delOverGeo); break;
case "3": self.getResultsDif(self.overResults, self.currntDealGraphic, self.delOtherGeo, true); break;
case "4": self.getResultsDif(self.overResults, self.currntDealGraphic, self.delOtherGeo, false); break;
}
} else {
console.log('error submit!!');
return false;
}
})
},
/**
* @description: 裁剪自己在保存
* @param {*} geometry
* @author: renchao
*/
delOverGeo (geometry) {
if (!this.currntDealGraphic.attributes) {
this.currntDealGraphic.attributes = {};
}
this.currntDealGraphic.attributes.BGZT = 2;
if (geometry == null) {
this.$message.warning("完全重叠，已删除图形信息!!!")
this.currntDealGraphic.geometry = geometry;
}
this.saveZd(this.currntDealGraphic);
},
/**
* @description: 裁剪别的在保存
* @param {*} results
* @author: renchao
*/
delOtherGeo (results) {
//执行编辑操作
var layer = this.getLayerByName("ZDJBXX");
var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
featureUrl += "/" + layer.id;
this.updateGraphic(featureUrl, results);
this.saveZd(this.currntDealGraphic);
},
/**
* @description: 下载文档模板
* @param {*} url
* @param {*} fileName
* @author: renchao
*/
downloadFile (url, fileName) {
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
},
/**
* @description: 导入
* @param {*} fileName
* @author: renchao
*/
submitForm (formName) {
//校验完整性 直接调用空间方法 提交空间表
var self = this;
this.$refs[formName].validate((valid) => {
if (valid) {
var geometry = self.parseWktToArc(self.currentClickZd.wkt);
geometry.type = "polygon";
var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
geometry.spatialReference = {
wkt: wkt
}
var graphic = {
attributes: self.currentClickZd,
geometry: geometry
}
self.checkGeo(graphic);
} else {
console.log('error submit!!');
return false;
}
});
},
/**
* @description: dealOverData
* @param {*} results
* @param {*} graphic
* @author: renchao
*/
dealOverData (results, graphic) {
this.overResults = results;
this.currntDealGraphic = graphic;
this.resultDialog = false;
this.txtResultDialog = false;
this.dealDialog = true;
},
/**
* @description: saveZd
* @param {*} graphic
* @author: renchao
*/
saveZd (graphic) {
var self = this;
var points = null, lines = null,
layer = self.getLayerByName("ZDJBXX");
var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
featureUrl += "/" + layer.id;
if (self.geoInfo) {
//替换 生成图像 高亮
if (graphic.attributes && graphic.attributes.BGZT) {
self.geoInfo.attributes.BGZT = graphic.attributes.BGZT;
}
self.geoInfo.attributes.BSM = this.propertyInfo.zdbsm;
self.geoInfo.attributes.ZDDM = this.propertyInfo.zddm;
self.geoInfo.attributes.XMMC = this.propertyInfo.mc;
graphic.attributes = self.geoInfo.attributes;
self.updateGraphic(featureUrl, graphic, function (res) {
//保存成功之后生成界址点 界址线
//生成坐标点
//跳转至map界面updateResults
var updResult = res.updateFeatureResults[0];
if (updResult.objectId) {
var OBJECTID = updResult.objectId;
if (graphic.geometry) {
points = self.craetJZPoint(graphic);
self.savejzd(points)
//生成边框线
self.createJZLine(graphic, function (res) {
lines = res;
self.saveJzx(lines);
});
}
self.$message.success("保存成功!!!");
self.goMap();
}
});
} else {
//生成图像 保存
var attributes = {
BSM: this.propertyInfo.zdbsm,
ZDDM: this.propertyInfo.zddm,
XMMC: this.propertyInfo.mc
};
if (graphic.attributes && graphic.attributes.BGZT) {
attributes.BGZT = graphic.attributes.BGZT;
}
graphic.attributes = attributes;
self.addGraphic(featureUrl, graphic, function (res) {
var addRresult = res.addFeatureResults[0];
if (addRresult.objectId) {
var OBJECTID = addRresult.objectId;
if (graphic.geometry) {
points = self.craetJZPoint(graphic);
self.savejzd(points)
//生成边框线
self.createJZLine(graphic, function (res) {
lines = res;
self.saveJzx(lines);
});
}
self.$message.success("保存成功!!!");
self.goMap();
}
});
}
},
/**
* @description: savejzd
* @param {*} points
* @author: renchao
*/
savejzd (points) {
var savePoints = []
for (var i = 0; i < points.length; i++) {
var obj = {
glbsm: this.propertyInfo.zdbsm,
jzdh: points[i].jzdh,
sxh: points[i].sxh,
xzbz: points[i].x,
yzbz: points[i].y,
jblx: "",
jzdlx: ""
}
savePoints.push(obj);
}
//保存矢量数据表
// addjzd(savePoints).then(res => {
// if (res.succcess) {
// console.log("界址点保存成成功！！！");
// }
// });
//保存空间数据
},
/**
* @description: saveJzx
* @param {*} lines
* @author: renchao
*/
saveJzx (lines) {
var jzxLines = [];
for (var i = 0; i < lines.length; i++) {
var obj = {
glbsm: this.propertyInfo.zdbsm,
qsd: lines[i].startPoint,
zzd: lines[i].endPoint,
jzjj: lines[i].distance,
qdh: lines[i].qdh,
zdh: lines[i].zdh,
jzxlx: "",
jzxwz: "",
jxxz: "",
sm: ""
}
jzxLines.push(obj);
}
//保存矢量数据表
// addjzx(jzxLines).then(res => {
// if (res.success) {
// //触发查询界址线
// console.log("界址线保存成功!!!!!");
// }
// });
//保存空间数据表
},
/**
* @description: saveZRZ
* @param {*} graphic
* @author: renchao
*/
saveZRZ (graphic) {
var self = this;
var layer = null;
layer = self.getLayerByName("ZRZ");
var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
featureUrl += "/" + layer.id;
if (self.geoInfo) {
self.geoInfo.BSM = self.propertyInfo.bsm;
graphic.attributes = self.geoInfo.attributes;
//替换 生成图像 高亮
self.updateGraphic(featureUrl, graphic, function (res) {
var addRresult = res.updateFeatureResults[0];
if (addRresult.objectId) {
self.$message.success("保存成功!!!");
self.goMap();
}
});
} else {
var attributes = {
BSM: this.propertyInfo.bsm,
XMMC: this.propertyInfo.xmmc
}
graphic.attributes = attributes;
//生成图像 保存
self.addGraphic(featureUrl, graphic, function (res) {
var addRresult = res.addFeatureResults[0];
if (addRresult.objectId) {
self.$message.success("保存成功!!!");
self.goMap();
}
});
}
},
/**
* @description: 操作成功不需要跳转地图 (直接定位新导入的图形)
* @author: renchao
*/
goMap () {
var bsm = "", type = this.propertyInfo.type;
if (type == "zd") {
bsm = this.propertyInfo.zdbsm;
} else {
bsm = this.propertyInfo.bsm;
}
this.resultDialog = false;
this.txtResultDialog = false;
this.dealDialog = false;
this.$emit("closeImportDialog");
//TODO 定位当前新导入的图形
this.addGeoByBsm(bsm, type, "testMap");
},
/**
* @description: 取消
* @author: renchao
*/
cancel () {
this.zdForm.zdBsm = "";
this.currentClickZd = null;
this.resultDialog = false;
// 清空当前图层上显示的图形
this.clearOverLayer();
},
/**
* @description: 取消文本选择的弹出框
* @author: renchao
*/
cancelTxtForm () {
this.txtZd.name = "";
this.txtResultDialog = false;
// 清空当前图层上显示的图形
this.clearOverLayer();
},
/**
* @description: 取消导入处理的结果
* @author: renchao
*/
cancelDealForm () {
this.dealForm.method = "";
this.dealDialog = false;
this.overResults = [];
// 清空当前图层上显示的图形
this.clearOverLayer();
},
/**
* @description: 宗地选择发生改变
* @author: renchao
*/
zdChange (value) {
this.zdForm.zdBsm = value.XMMC;
this.currentClickZd = value;
var geometry = this.parseWktToArc(this.currentClickZd.wkt);
geometry.type = "polygon";
var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
geometry.spatialReference = {
wkt: wkt
}
this.addOverLayer(geometry, []);
}
}
}
</script>
<style scoped lang="scss">
.importDiv {
display: flex;
justify-content: center;
align-content: center;
li {
margin: 5px;
width: 50%;
.title {
line-height: 1;
margin-top: -57px;
font-size: 14px;
}
.templateDowload {
line-height: 1;
margin-top: 7px;
a {
color: #409eff;
}
}
}
}
/deep/ .avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 100%;
height: 178px;
line-height: 178px;
}
/deep/ .avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
/deep/ .iconfont {
font-size: 20px;
color: #8c939d;
width: 100%;
text-align: center;
}
</style>
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-05-17 10:24:24
*/
export default {
methods:{
/**
* @description: downloadTxt
* @param {*} text
* @param {*} fileName
* @author: renchao
*/
downloadTxt(text, fileName){
let element = document.createElement('a')
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
element.setAttribute('download', fileName)
element.style.display = 'none'
element.click()
},
/**
* @description: createTextContent
* @param {*} jzdInfo
* @author: renchao
*/
createTextContent(jzdInfo){
var textContent = "";
for(var i = 0;i < jzdInfo.length;i++){
textContent += jzdInfo[i].jzdh +","+jzdInfo[i].sxh+"," +
jzdInfo[i].x+","+jzdInfo[i].y+"\n"
}
return textContent;
},
}
}
/*
* @Description: 图形相关的操作 js
* @Autor: renchao
* @LastEditTime: 2023-05-17 10:24:24
*/
import layers from '@/api/json/layers.json'
import queryUtils from "@/utils/map/queryUtils";
import identifyUtils from '@/utils/map/IdentifyUtils'
import { loadModules } from "esri-loader"
import featureUpdate from "@/utils/map/featureUpdate";
import arcgisParser from 'terraformer-arcgis-parser'
import wktParse from 'terraformer-wkt-parser'
import { maps } from '@/utils/map/mapUtils'
import graphicSymbol from '@/api/json/graphicSymbol.json'
export default {
data () {
return {
}
},
methods: {
/**
* @description: getLayerByName
* @param {*} name
* @author: renchao
*/
getLayerByName (name) {
for (var i = 0; i < layers.length; i++) {
if (layers[i].layerName == name) {
return layers[i];
}
}
return null;
},
/**
* @description: queryGeoByBsm
* @param {*} name
* @param {*} type
* @param {*} callBackFunction
* @param {*} outSpatialReference
* @author: renchao
*/
queryGeoByBsm (bsm, type, callBackFunction, outSpatialReference) {
var layer = null;
if (type == 'zd') {
layer = this.getLayerByName("ZDJBXX");
} else if (type == 'zrz') {
layer = this.getLayerByName("ZRZ");
} else {
console.log("未定义类型！！");
return;
}
if (!layer) {
console.log("没有找到图层，不能查询");
return;
}
queryUtils.methods.queryByWhere(layer.layerUrl + "/" + layer.id, { "BSM": bsm }, null, true, null, outSpatialReference, function (res) {
var features = res.features;
if (callBackFunction && typeof callBackFunction == 'function') {
callBackFunction(features);
}
});
},
/**
* @description: 生成介质点
* @param {*} graphic
* @author: renchao
*/
craetJZPoint (graphic) {
var geomtry = graphic.geometry, rings = geomtry.rings[0];
var pointInfos = [];
this.getPointByRings(rings, pointInfos);
return pointInfos;
},
/**
* @description: getPointByRings
* @param {*} rings
* @param {*} pointInfos
* @author: renchao
*/
getPointByRings (rings, pointInfos) {
for (var i = 0; i < rings.length; i++) {
var children = rings[i];
if (children.length == 2 && typeof children[0] == 'number') {
var obj = {};
obj.jzdh = "j" + pointInfos.length;
obj.sxh = pointInfos.length;
obj.x = children[0];
obj.y = children[1];
pointInfos.push(obj);
} else {
this.getPointByRings(children, pointInfos);
}
}
},
/**
* @description: 生成介质线
* @param {*} graphic
* @param {*} callBackFunction
* @author: renchao
*/
createJZLine (graphic, callBackFunction) {
var self = this;
loadModules([
"esri/geometry/support/geodesicUtils",
"esri/geometry/Point",
"esri/geometry/Polyline"
]).then(([
geodesicUtils,
Point,
Polyline
]) => {
//取得各个坐标点 然后生成外围坐标线
var geometry = graphic.geometry,
rings = geometry.rings,
points = [];
if (rings.length > 0) {
for (var i = 0; i < rings.length; i++) {
var danPoints = [];
self.getPointByRings(rings[i], danPoints);
points.push(danPoints);
}
} else {
var danPoints = [];
self.getPointByRings(rings, danPoints);
points.push(danPoints);
}
var lines = [];
//meters
for (var i = 0; i < points.length; i++) {
for (var j = 0; j < points[i].length; j++) {
if (j < (points[i].length - 1)) {
const join = geodesicUtils.geodesicDistance(
new Point({ x: points[i][j].x, y: points[i][j].y }),
new Point({ x: points[i][j + 1].x, y: points[i][j + 1].y }),
"meters"
);
const { distance, azimuth } = join;
var obj = {
startPoint: points[i][j].x + "," + points[i][j].y,
endPoint: points[i][j + 1].x + "," + points[i][j + 1].y,
qdh: points[i][j].sxh,
zdh: points[i][j + 1].sxh,
distance: distance,
jzxlx: "",
jzxwz: "",
jzxxz: "",
remark: ""
}
lines.push(obj);
} else {
const join = geodesicUtils.geodesicDistance(
new Point({ x: points[i][j].x, y: points[i][j].y }),
new Point({ x: points[i][0].x, y: points[i][0].y }),
"meters"
);
const { distance, azimuth } = join;
var obj = {
startPoint: points[i][j].x + "," + points[i][j].y,
endPoint: points[i][0].x + "," + points[i][0].y,
qdh: points[i][j].sxh,
zdh: points[i][0].sxh,
distance: distance,
jzxlx: "",
jzxwz: "",
jzxxz: "",
remark: ""
}
lines.push(obj);
}
}
}
if (callBackFunction && typeof callBackFunction == "function") {
callBackFunction(lines);
}
}).catch(err => {
throw (err);
})
},
/**
* @description: wkt转换成arcgis
* @param {*} wkt
* @author: renchao
*/
parseWktToArc (wkt) {
var primitive = wktParse.parse(wkt);
/*if(primitive.type == "MultiPolygon"){
primitive.type = "Polygon"
}*/
return arcgisParser.convert(primitive)
},
/**
* @description: postionToThisGeo
* @param {*} bsm
* @param {*} type
* @author: renchao
*/
postionToThisGeo (bsm, type) {
var view = maps["testMap"];
var layer = view.map.findLayerById("highlightLayer");
if (layer) {
var graphics = layer.graphics;
if (graphics.length > 0 && graphics.items[0].attributes.BSM == bsm) {
// view.extent = graphics.items[0].geometry.extent;
view.center = graphics.items[0].geometry.extent.center;
view.zoom = 15;
}
} else {
this.$message.success("暂无图形信息！！！");
}
},
/**
* @description: 导入空间图形是 先判断数据是否跨界
* @param {*} geometry
* @param {*} callBacFunction
* @author: renchao
*/
geoJoint (geometry, callBacFunction) {
var self = this;
loadModules([
"esri/geometry/geometryEngine",
"esri/geometry/Polygon"
]).then(([
geometryEngine,
Polygon
]) => {
var djqLayer = null, djzqLayer = null, xjzqLayer = null;
djqLayer = self.getLayerByName("DJQ");
djzqLayer = self.getLayerByName("DJZQ");
xjzqLayer = self.getLayerByName("XJZQ");
var layerIds = [];
layerIds.push(djqLayer.id);
layerIds.push(djzqLayer.id);
layerIds.push(xjzqLayer.id);
var polygon = new Polygon(geometry);
identifyUtils.methods.identify(djqLayer.layerUrl, layerIds, polygon, function (res) {
var results = res.results;
var isJoint = false, layerName = "", message = "";
if (!results || results.length == 0) {
callBacFunction(true, "不在行政区内，请检查空间位置信息!!!");
}
for (var i = 0; i < results.length; i++) {
var feature = results[i].feature;
var flag = geometryEngine.intersects(polygon, feature.geometry);
var withinFlag = geometryEngine.within(polygon, feature.geometry);
if (!withinFlag && flag) {
isJoint = true;
layerName = results[i].layerName;
switch (layerName) {
case 'DJQ': message = "地块跨越地籍区，数据不合法!!!"; break;
case 'DJZQ': message = "地块跨越地籍子区，数据不合法!!!"; break;
case 'XJZQ': message = "地块跨越行政区，数据不合法!!!"; break;
}
break
}
}
if (callBacFunction && typeof callBacFunction == "function") {
callBacFunction(isJoint, message);
}
}, true)
}).catch(err => {
console.log(err);
throw (err);
})
},
/**
* @description: 保存或者编辑属性信息
* @param {*} bsm
* @param {*} type
* @param {*} attributes
* @param {*} callBackFunction
* @param {*} ydybsm
* @author: renchao
*/
updAttributes (bsm, type, attributes, callBackFunction, ydybsm) {
var layer = null;
if (type == 'zd') {
layer = this.getLayerByName("ZDJBXX");
} else {
layer = this.getLayerByName("ZRZ");
}
var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
featureUrl += "/" + layer.id;
this.queryGeoByBsm(ydybsm ? ydybsm : bsm, type, function (features) {
if (features && features.length > 0) {
attributes.OBJECTID = features[0].attributes.OBJECTID;
features[0].attributes = attributes;
/* var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
features[0].geometry.spatialReference = {
wkt:wkt
}*/
if (ydybsm) {
features[0].attributes.BSM = ydybsm;
}
featureUpdate.methods.updateGraphic(featureUrl, features[0], callBackFunction);
} else {
var graphic = {
attributes: attributes
}
featureUpdate.methods.addGraphic(featureUrl, graphic, callBackFunction);
}
});
},
/**
* @description: 叠加分析 同一个图层的叠加分析
* @param {*} bsm
* @param {*} graphic
* @param {*} callBacFunction
* @author: renchao
*/
zdOverAnalys (bsm, graphic, callBacFunction) {
var self = this;
loadModules([
"esri/geometry/Polygon"
]).then(([
Polygon
]) => {
var zdLayer = null;
zdLayer = self.getLayerByName("ZDJBXX");
var layerIds = [];
layerIds.push(zdLayer.id);
var polygon = new Polygon(graphic.geometry);
identifyUtils.methods.identify(zdLayer.layerUrl, layerIds, polygon, function (res) {
var results = res.results;
//判断数据是否与其他数据有重叠
var flag = false;
if (results && results.length > 0) {
flag = true;
//加载在图层上 原本的要导入的数据 和重叠数据
self.addOverLayer(polygon, results);
}
callBacFunction(flag, results);
}, true)
}).catch(err => {
console.log(err);
throw (err);
})
},
/**
* @description: addOverLayer
* @param {*} geometry
* @param {*} results
* @author: renchao
*/
addOverLayer (geometry, results) {
var view = maps["testMap"];
loadModules([
"esri/Graphic",
"esri/geometry/Polygon",
"esri/layers/GraphicsLayer",
"esri/geometry/geometryEngineAsync",
"esri/geometry/Extent"
]).then(([
Graphic,
Polygon,
GraphicsLayer,
geometryEngineAsync,
Extent
]) => {
var graphic = new Graphic({
geometry: geometry
})
var layer = view.map.findLayerById("overLayer");
if (layer) {
layer.removeAll();
} else {
layer = new GraphicsLayer({
id: "overLayer"
})
view.map.add(layer);
}
var impotSymbol = graphicSymbol.fillSymbol.importSymbol,
defaultSymbol = graphicSymbol.fillSymbol.defaultSymbol;
for (var i = 0; i < results.length; i++) {
var feature = results[i].feature;
feature.symbol = defaultSymbol;
layer.add(feature);
var geo = geometryEngineAsync.intersect(feature.geometry, geometry);
geo.then(function (res) {
var interGra = new Graphic({
geometry: res,
symbol: graphicSymbol.fillSymbol.highlightSymbol
})
layer.add(interGra);
})
}
graphic.symbol = impotSymbol
layer.add(graphic);
var extent = new Extent(JSON.parse(JSON.stringify(graphic.geometry.extent)))
extent.spatialReference = view.spatialReference;
// view.extent = extent;
view.center = extent.center;
view.zoom = 15;
}).catch(err => {
console.log(err);
})
},
/**
* @description: clearOverLayer
* @author: renchao
*/
clearOverLayer () {
var view = maps["testMap"];
var layer = view.map.findLayerById("overLayer");
if (layer) {
layer.removeAll();
}
},
/**
* @description: 自然幢叠加分析 不能跨宗地 图层本身的叠加分析
* @param {*} bsm
* @param {*} graphic
* @param {*} callBacFunction
* @author: renchao
*/
zrzOverAnalys (bsm, graphic, callBacFunction) {
var self = this;
loadModules([
"esri/geometry/Polygon",
"esri/geometry/geometryEngine"
]).then(([
Polygon,
geometryEngine
]) => {
var polygon = new Polygon(graphic.geometry);
var zdLayer = null,
zrzLayer = null;
zdLayer = self.getLayerByName("ZDJBXX");
zrzLayer = self.getLayerByName("ZRZ");
var layerIds = [];
layerIds.push(zdLayer.id);
layerIds.push(zrzLayer.id);
identifyUtils.methods.identify(zdLayer.layerUrl, layerIds, polygon, function (res) {
var results = res.results;
//判断数据是否与其他数据有重叠
var flag = false,
mesge = "";
if (results && results.length > 0) {
for (var i = 0; i < results.length; i++) {
var feature = results[i].feature,
layerName = results[i].layerName;
if (layerName == 'ZRZ') {
if (!feature.attributes['标识码'] || feature.attributes['标识码'] != bsm) {
var interFlag = geometryEngine.intersects(polygon, feature.geometry);
if (interFlag) {
flag = true;
mesge = "导入的自然幢与其他自然幢重叠，不能导入!!!";
break;
}
}
} else if (layerName == 'ZDJBXX') {
var interFlag = geometryEngine.intersects(polygon, feature.geometry);
var withinFlag = geometryEngine.within(polygon, feature.geometry);
if (!withinFlag && interFlag) {
flag = true;
mesge = "导入的自然幢与其跨宗地，不能导入!!!";
break;
}
}
}
}
callBacFunction(flag, mesge);
}, true)
}).catch(err => {
console.log(err);
})
},
/**
* @description: 去除重叠部分
* @param {*} inputGraphic
* @param {*} subGraphic
* @param {*} callBackFuncton
* @author: renchao
*/
getDifference (inputGraphic, subGraphic, callBackFuncton) {
loadModules([
"esri/geometry/Polygon",
"esri/geometry/geometryEngine",
"esri/Graphic"
]).then(([
Polygon,
geometryEngine,
Graphic
]) => {
var inputGeometry = new Polygon(inputGraphic.geometry);
var outGeometry = null;
for (var i = 0; i < subGraphic.length; i++) {
var feature = subGraphic[i].feature;
outGeometry = geometryEngine.difference(inputGeometry, feature.geometry);
}
if (callBackFuncton && typeof callBackFuncton == 'function') {
callBackFuncton(outGeometry);
}
}).catch(err => {
console.log(err);
})
},
/**
* @description: 业务处理 先用query方法 查询将所有属性查询 在做空间裁剪
* @param {*} subGraphics
* @param {*} currntGraphic
* @param {*} callBackFunction
* @param {*} flag
* @author: renchao
*/
getResultsDif (subGraphics, currntGraphic, callBackFunction, flag) {
var self = this;
loadModules([
"esri/geometry/geometryEngine",
"esri/geometry/Polygon"
]).then(([
geometryEngine,
Polygon
]) => {
var objectIds = [];
subGraphics.filter(item => {
objectIds.push(item.feature.attributes.OBJECTID);
})
var inputGeometry = new Polygon(currntGraphic.geometry);
var zdLayer = self.getLayerByName("ZDJBXX");
queryUtils.methods.queryByWhere(zdLayer.layerUrl + "/" + zdLayer.id, { OBJECTID: objectIds }, null, true, "", subGraphics[0].feature.geometry.spatialReference, function (result) {
var features = result.features;
if (flag) {
for (var i = 0; i < features.length; i++) {
features[i].geometry = geometryEngine.difference(features[i].geometry, inputGeometry);
features[i].attributes.BGZT = 3;
}
} else {
for (var i = 0; i < features.length; i++) {
features[i].geometry = null;
features[i].attributes.BGZT = 4;
}
}
if (callBackFunction && typeof callBackFunction == 'function') {
callBackFunction(features);
}
})
}).catch(err => {
console.log(err);
})
},
/**
* @description: addGeoByBsm
* @param {*} bsm
* @param {*} type
* @param {*} viewId
* @author: renchao
*/
addGeoByBsm (bsm, type, viewId) {
var self = this;
var layer = null;
if (type == 'zd') {
layer = this.getLayerByName("ZDJBXX");
} else if (type == 'zrz') {
layer = this.getLayerByName("ZRZ");
} else {
console.log("未定义类型！！");
return;
}
if (!layer) {
console.log("没有找到图层，不能查询");
return;
}
queryUtils.methods.queryByWhere(layer.layerUrl + "/" + layer.id, { "BSM": bsm }, null, true, null, null, function (res) {
var features = res.features;
if (features && features.length > 0) {
if (!features[0].geometry || features[0].geometry.rings.length == 0) {
self.$message.success("暂无图形信息！！");
return;
}
loadModules([
"esri/layers/GraphicsLayer"
]).then(([
GraphicsLayer
]) => {
var view = maps[viewId];
var layer = view.map.findLayerById("highlightLayer");
if (layer) {
layer.removeAll();
} else {
layer = new GraphicsLayer({
id: "highlightLayer"
})
view.map.add(layer, 5);
}
var symbol = graphicSymbol.fillSymbol.highlightSymbol;
var graphic = features[0];
graphic.symbol = symbol;
layer.add(graphic);
// view.extent = graphic.geometry.extent;
view.center = graphic.geometry.extent.center;
view.zoom = 15;
}).catch(err => {
thow(err);
})
} else {
self.$message.success("暂无图形信息！！");
return;
}
});
},
/**
* @description: 清空当前图层
* @param {*} viewId
* @author: renchao
*/
clearHighlightLayer (viewId) {
var view = maps[viewId];
var layer = view.map.findLayerById("highlightLayer");
if (layer) {
layer.removeAll();
}
}
}
}
......@@ -36,9 +36,18 @@ export default {
})
},
methods: {
/**
* @description: closeViewer
* @author: renchao
*/
closeViewer () {
this.$emit('close-viewer')
},
/**
* @description: hideCusBtn
* @param {*} e
* @author: renchao
*/
hideCusBtn (e) {
let className = e.target.className
if (className === 'el-icon-download') {
......@@ -48,6 +57,11 @@ export default {
this.downloadImage(imgUrl)
}
},
/**
* @description: downloadImage
* @param {*} imgUrl
* @author: renchao
*/
downloadImage (imgUrl) {
let tmpArr = imgUrl.split('/')
let fileName = tmpArr[tmpArr.length - 1]
......@@ -83,4 +97,4 @@ export default {
/deep/ .el-image-viewer__close {
color: #ffffff;
}
</style>
\ No newline at end of file
</style>
......
......@@ -77,7 +77,11 @@
this.autoCurrentLabel()
},
methods: {
//表格显示隐藏回调
/**
* @description: 表格显示隐藏回调
* @param {*} visible
* @author: renchao
*/
visibleChange (visible) {
if (visible) {
this.formData = {}
......@@ -86,7 +90,10 @@
this.autoCurrentLabel()
}
},
//获取表格数据
/**
* @description: 获取表格数据
* @author: renchao
*/
async getData () {
//表格默认赋值
if (this.multiple) {
......@@ -104,11 +111,17 @@
}
// this.$refs.table.setScrollTop(0)
},
//插糟表单提交
/**
* @description: 插糟表单提交
* @author: renchao
*/
formSubmit () {
this.getData()
},
//自动模拟options赋值
/**
* @description: 自动模拟options赋值
* @author: renchao
*/
autoCurrentLabel () {
this.$nextTick(() => {
if (this.multiple) {
......@@ -122,7 +135,12 @@
}
})
},
//表格勾选事件
/**
* @description: 表格勾选事件
* @param {*} rows
* @param {*} row
* @author: renchao
*/
select (rows, row) {
var isSelect = rows.length && rows.indexOf(row) !== -1
if (isSelect) {
......@@ -134,7 +152,11 @@
this.$emit('update:modelValue', this.defaultValue);
this.$emit('change', this.defaultValue);
},
//表格全选事件
/**
* @description: 表格全选事件
* @param {*} rows
* @author: renchao
*/
selectAll (rows) {
var isAllSelect = rows.length > 0
if (isAllSelect) {
......@@ -156,6 +178,11 @@
this.$emit('update:modelValue', this.defaultValue);
this.$emit('change', this.defaultValue);
},
/**
* @description: click
* @param {*} row
* @author: renchao
*/
click (row) {
if (this.multiple) {
//处理多选点击行
......@@ -168,25 +195,42 @@
this.$emit('change', this.defaultValue);
}
},
//tags删除后回调
/**
* @description: tags删除后回调
* @param {*} tag
* @author: renchao
*/
removeTag (tag) {
var row = this.findRowByKey(tag[this.defaultProps.value])
this.$refs.table.toggleRowSelection(row, false);
this.$emit('update:modelValue', this.defaultValue);
},
//清空后的回调
/**
* @description: 清空后的回调
* @author: renchao
*/
clear () {
this.$emit('update:modelValue', this.defaultValue);
},
// 关键值查询表格数据行
/**
* @description: 关键值查询表格数据行
* @param {*} value
* @author: renchao
*/
findRowByKey (value) {
return this.tableData.find(item => item[this.defaultProps.value] === value)
},
// 触发select隐藏
/**
* @description: 触发select隐藏
* @author: renchao
*/
blur () {
this.$refs.select.blur();
},
// 触发select显示
/**
* @description: 触发select显示
* @author: renchao
*/
focus () {
this.$refs.select.focus();
}
......
......@@ -16,8 +16,7 @@
:inline="flag"
:show-message="false"
inline-message
label-width="145px"
>
label-width="145px">
<div class="slxx_con" v-if="isShow" :class="flag ? 'formMarginBot0' : ''">
<div class="slxx_title title-block">
补录信息
......@@ -44,7 +43,7 @@
房地产权（独幢、层、套、间房屋）
<div class="triangle"></div>
</div>
<el-row :gutter="10" class="ssqlxx">
<el-row :gutter="10" class="ssqlxx">
<el-col :span="24" v-if="ssqlxxshow">
<el-form-item label="上手权利信息：">
<select-table
......@@ -52,18 +51,15 @@
:table-width="550"
:tableData="ssQlxxList"
:props="props"
@change="ssQlxxchange"
>
@change="ssQlxxchange">
<el-table-column
prop="qllxmc"
width="130"
label="权利类型"
></el-table-column>
label="权利类型"></el-table-column>
<el-table-column
prop="bdcqzh"
width="160"
label="不动产权证书"
></el-table-column>
label="不动产权证书"></el-table-column>
<el-table-column prop="qlrmc" label="权利人"></el-table-column>
<el-table-column prop="mjmc" label="面积"></el-table-column>
<el-table-column prop="ytmc" label="用途"></el-table-column>
......@@ -102,8 +98,7 @@
v-for="item in djlxlist"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
:value="item.dcode">
</el-option>
</el-select>
</el-form-item>
......@@ -137,8 +132,7 @@
placeholder=""
:normalizer="normalizer"
:show-count="true"
:options="dictData['A9']"
/>
:options="dictData['A9']" />
</el-form-item>
</el-col>
<el-col :span="8">
......@@ -146,15 +140,13 @@
<div style="display: flex">
<el-input
v-model="ruleForm.fdcq2.qjjg"
style="width: 500%"
></el-input>
style="width: 500%"></el-input>
<el-select v-model="ruleForm.fdcq2.jedw">
<el-option
v-for="item in dictData['A57']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
:value="item.dcode">
</el-option>
</el-select>
</div>
......@@ -167,8 +159,7 @@
v-for="item in qsztlist"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
:value="item.dcode">
</el-option>
</el-select>
</el-form-item>
......@@ -180,8 +171,7 @@
v-for="item in dictData['A17']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
:value="item.dcode">
</el-option>
</el-select>
</el-form-item>
......@@ -203,8 +193,7 @@
v-for="item in dictData['A19']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
:value="item.dcode">
</el-option>
</el-select>
</el-form-item>
......@@ -213,15 +202,13 @@
<el-form-item
label="房屋结构："
prop="fdcq2.fwjg"
:rules="rules.fwjgrules"
>
:rules="rules.fwjgrules">
<el-select v-model="ruleForm.fdcq2.fwjg">
<el-option
v-for="item in dictData['A46']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
:value="item.dcode">
</el-option>
</el-select>
</el-form-item>
......@@ -261,8 +248,7 @@
<el-form-item
label="不动产权证号："
prop="qlxx.bdcqzh"
:rules="rules.bdcqzhrules"
>
:rules="rules.bdcqzhrules">
<el-input v-model="ruleForm.qlxx.bdcqzh"></el-input>
</el-form-item>
</el-col>
......@@ -279,8 +265,7 @@
<el-form-item
label="登记机构："
prop="qlxx.djjg"
:rules="rules.djjgrules"
>
:rules="rules.djjgrules">
<el-input v-model="ruleForm.qlxx.djjg"></el-input>
</el-form-item>
</el-col>
......@@ -288,8 +273,7 @@
<el-form-item
label="登簿人："
prop="qlxx.dbr"
:rules="rules.dbrrules"
>
:rules="rules.dbrrules">
<el-input v-model="ruleForm.qlxx.dbr"></el-input>
</el-form-item>
</el-col>
......@@ -297,15 +281,13 @@
<el-form-item
label="登记时间："
prop="qlxx.djsj"
:rules="rules.djsjrules"
>
:rules="rules.djsjrules">
<el-date-picker
v-model="ruleForm.qlxx.djsj"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd"
>
format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-col>
......@@ -331,8 +313,7 @@
<tdytTable
:tableData="ruleForm.tdytqxList"
@upDateTdytxxList="upDateTdytxxList"
:ableOperation="ableOperation"
/>
:ableOperation="ableOperation" />
<div class="slxx_title title-block">
权利人信息
<div class="triangle"></div>
......@@ -340,10 +321,9 @@
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="共有方式：">
<el-radio-group
:disabled="!ableOperation"
v-model="ruleForm.qlxx.gyfs"
>
<el-radio-group
:disabled="!ableOperation"
v-model="ruleForm.qlxx.gyfs">
<el-radio label="0">单独所有</el-radio>
<el-radio label="1">共同共有</el-radio>
<el-radio label="2">按份所有</el-radio>
......@@ -357,8 +337,7 @@
@upDateQlrxxList="upDateQlrxxList"
:ableOperation="ableOperation"
:key="key"
:gyfs="ruleForm.qlxx.gyfs"
/>
:gyfs="ruleForm.qlxx.gyfs" />
</div>
<el-row class="btn" v-if="ableOperation">
<el-form-item>
......@@ -369,261 +348,261 @@
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { init,getSsQlxx, save } from "@/api/djbRepair.js";
import qlrCommonTable from "@/views/djbworkflow/components/qlrCommonTable";
import selectTable from "@/components/selectTable/index.vue";
import tdytTable from "@/views/workflow/components/tdytTable";
// import the component
// import Treeselect from '@riophae/vue-treeselect'
// // import the styles
// import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
components: { qlrCommonTable, tdytTable,selectTable},
computed: {
...mapGetters(["dictData", "flag"]),
// 根据流程判断表单是否为只读
editDisabled() {
if (!this.ableOperation) {
//只读状态
return true;
}
return false;
},
},
data() {
return {
ssqlxxshow:true,
props: {
label: "bdcqzh",
value: "bdcdyid",
},
// 键名转换，方法默认是label和children进行树状渲染
normalizer(node) {
//方法
if (node.children == null || node.children == "null") {
delete node.children;
import { mapGetters } from "vuex";
import { init, getSsQlxx, save } from "@/api/djbRepair.js";
import qlrCommonTable from "@/views/djbworkflow/components/qlrCommonTable";
import selectTable from "@/components/selectTable/index.vue";
import tdytTable from "@/views/workflow/components/tdytTable";
// import the component
// import Treeselect from '@riophae/vue-treeselect'
// // import the styles
// import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
components: { qlrCommonTable, tdytTable, selectTable },
computed: {
...mapGetters(["dictData", "flag"]),
// 根据流程判断表单是否为只读
editDisabled () {
if (!this.ableOperation) {
//只读状态
return true;
}
return {
id: node.dcode,
label: node.dname,
};
return false;
},
//表单是否可操作
propsParam: this.$attrs,
// 登记类型
djlxlist: [
{
dcode: "100",
dname: "首次登记",
},
{
dcode: "200",
dname: "转移登记",
},
{
dcode: "300",
dname: "变更登记",
},
data () {
return {
ssqlxxshow: true,
props: {
label: "bdcqzh",
value: "bdcdyid",
},
{
dcode: "500",
dname: "更正登记",
// 键名转换，方法默认是label和children进行树状渲染
normalizer (node) {
//方法
if (node.children == null || node.children == "null") {
delete node.children;
}
return {
id: node.dcode,
label: node.dname,
};
},
{
dcode: "901",
dname: "补证",
},
{
dcode: "902",
dname: "换证",
},
],
// 权属状态
qsztlist: [
{
dcode: "1",
dname: "现势",
},
{
dcode: "2",
dname: "历史",
},
],
key: 0,
tdxz: null,
isShow: false,
disabled: true,
czrOptions: [],
ssQlxxList: [],
ruleForm: {},
ableOperation: false,
//传递参数\
rules: {
bdcqzhrules: [
{ required: true, message: "不动产权证号：", trigger: "blur" },
//表单是否可操作
propsParam: this.$attrs,
// 登记类型
djlxlist: [
{
dcode: "100",
dname: "首次登记",
},
{
dcode: "200",
dname: "转移登记",
},
{
dcode: "300",
dname: "变更登记",
},
{
dcode: "500",
dname: "更正登记",
},
{
dcode: "901",
dname: "补证",
},
{
dcode: "902",
dname: "换证",
},
],
// qxdmrules: [{ required: true, message: "区县代码", trigger: "blur" }],
djjgrules: [{ required: true, message: "登记机构", trigger: "blur" }],
dbrrules: [{ required: true, message: "登簿人", trigger: "blur" }],
djsjrules: [{ required: true, message: "登记时间", trigger: "blur" }],
fwjgrules: [{ required: true, message: "房屋结构", trigger: "change" }],
djlxrules: [{ required: true, message: "登记类型", trigger: "change" }],
},
};
},
created() {},
mounted() {
this.loadData();
this.ableOperation = this.$parent.ableOperation;
},
methods: {
ssQlxxchange(val) {
this.ruleForm.ssQlxx = val;
this.ruleForm.qlxx.ssywh = val.ssywh;
// 权属状态
qsztlist: [
{
dcode: "1",
dname: "现势",
},
{
dcode: "2",
dname: "历史",
},
],
key: 0,
tdxz: null,
isShow: false,
disabled: true,
czrOptions: [],
ssQlxxList: [],
ruleForm: {},
ableOperation: false,
//传递参数\
rules: {
bdcqzhrules: [
{ required: true, message: "不动产权证号：", trigger: "blur" },
],
// qxdmrules: [{ required: true, message: "区县代码", trigger: "blur" }],
djjgrules: [{ required: true, message: "登记机构", trigger: "blur" }],
dbrrules: [{ required: true, message: "登簿人", trigger: "blur" }],
djsjrules: [{ required: true, message: "登记时间", trigger: "blur" }],
fwjgrules: [{ required: true, message: "房屋结构", trigger: "change" }],
djlxrules: [{ required: true, message: "登记类型", trigger: "change" }],
},
};
},
djlxchange(val) {
console.log("val",val);
if (val == null || val == 100) {
this.ssqlxxshow = false;
} else {
this.ssqlxxshow = true;
}
created () { },
mounted () {
this.loadData();
this.ableOperation = this.$parent.ableOperation;
},
methods: {
ssQlxxchange (val) {
this.ruleForm.ssQlxx = val;
this.ruleForm.qlxx.ssywh = val.ssywh;
},
djlxchange (val) {
console.log("val", val);
if (val == null || val == 100) {
this.ssqlxxshow = false;
} else {
this.ssqlxxshow = true;
}
},
loadData() {
this.$startLoading();
this.propsParam.isEdit = this.$parent.isEdit;
init(this.propsParam).then((res) => {
if (res.code == 200) {
this.ruleForm = res.result;
let djlx = this.ruleForm.qlxx.djlx;
if (djlx == null || djlx == 100) {
this.ssqlxxshow = false;
}
this.$endLoading();
if (this.ruleForm.tdytqxList.length > 0) {
this.tdxz = this.ruleForm.tdytqxList[0].qlxzbm;
loadData () {
this.$startLoading();
this.propsParam.isEdit = this.$parent.isEdit;
init(this.propsParam).then((res) => {
if (res.code == 200) {
this.ruleForm = res.result;
let djlx = this.ruleForm.qlxx.djlx;
if (djlx == null || djlx == 100) {
this.ssqlxxshow = false;
}
this.$endLoading();
if (this.ruleForm.tdytqxList.length > 0) {
this.tdxz = this.ruleForm.tdytqxList[0].qlxzbm;
} else {
this.tdxz = null;
} else {
this.tdxz = null;
}
this.isShow = true;
}
this.isShow = true;
}
});
});
//获取主体信息
getSsQlxx({
bdcdyid: this.propsParam.bdcdyid,
qllx: this.propsParam.qllx,
}).then((res) => {
if (res.code == 200) {
this.ssQlxxList = res.result;
}
});
},
// 更新土地用途信息
upDateTdytxxList(val) {
this.ruleForm.tdytqxList && (this.ruleForm.tdytqxList = _.cloneDeep(val));
this.key++;
},
// 更新权利人信息
upDateQlrxxList(val) {
this.ruleForm.qlrData && (this.ruleForm.qlrData = _.cloneDeep(val));
this.czrOptions = this.ruleForm.qlrData;
this.key++;
},
// 更新义务人信息
upDateYwrxxList(val) {
this.ruleForm.ywrData && (this.ruleForm.ywrData = _.cloneDeep(val));
this.key++;
},
onSubmit() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
if (this.ruleForm.qlrData.length == 0) {
this.$message({
showClose: true,
message: "请确认权利人信息",
type: "error",
});
return false;
}
if (this.ruleForm.tdytqxList.length == 0 && !this.tdxz) {
this.$message({
showClose: true,
message: "请补充土地用途信息",
type: "error",
});
return false;
}
if (!this.tdxz) {
this.$message({
showClose: true,
message: "请补充土地性质",
type: "error",
});
return false;
getSsQlxx({
bdcdyid: this.propsParam.bdcdyid,
qllx: this.propsParam.qllx,
}).then((res) => {
if (res.code == 200) {
this.ssQlxxList = res.result;
}
this.ruleForm.tdytqxList = this.ruleForm.tdytqxList.map((item) => {
return {
...item,
qlxzbm: this.tdxz,
};
});
if (this.ruleForm.qlxx.gyfs == "0") {
if (this.ruleForm.qlrData.length > 1) {
});
},
// 更新土地用途信息
upDateTdytxxList (val) {
this.ruleForm.tdytqxList && (this.ruleForm.tdytqxList = _.cloneDeep(val));
this.key++;
},
// 更新权利人信息
upDateQlrxxList (val) {
this.ruleForm.qlrData && (this.ruleForm.qlrData = _.cloneDeep(val));
this.czrOptions = this.ruleForm.qlrData;
this.key++;
},
// 更新义务人信息
upDateYwrxxList (val) {
this.ruleForm.ywrData && (this.ruleForm.ywrData = _.cloneDeep(val));
this.key++;
},
onSubmit () {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
if (this.ruleForm.qlrData.length == 0) {
this.$message({
showClose: true,
message: "共有方式：单独所有，权利人只能是一个人",
message: "请确认权利人信息",
type: "error",
});
return false;
}
this.ruleForm.qlrData[0].sfczr = "1";
}
// if (this.ruleForm.qlxx.gyfs == "1") {
// //是否分别持证
// if (this.ruleForm.qlxx.sqfbcz == "1") {
// //是
// this.ruleForm.qlrData.forEach((item, index) => {
// item.sfczr = "1";
// });
// } else {
// this.ruleForm.qlrData.forEach((item, index) => {
// if (item.zjh == this.ruleForm.czr) {
// item.sfczr = "1";
// } else {
// item.sfczr = "0";
// }
// });
// }
// }
save(this.ruleForm).then((res) => {
if (res.code === 200) {
if (this.ruleForm.tdytqxList.length == 0 && !this.tdxz) {
this.$message({
showClose: true,
message: "保存成功！",
type: "success",
message: "请补充土地用途信息",
type: "error",
});
this.$store.dispatch("user/refreshPage", true);
} else {
return false;
}
if (!this.tdxz) {
this.$message({
showClose: true,
message: res.message,
message: "请补充土地性质",
type: "error",
});
return false;
}
});
} else {
return false;
}
});
this.ruleForm.tdytqxList = this.ruleForm.tdytqxList.map((item) => {
return {
...item,
qlxzbm: this.tdxz,
};
});
if (this.ruleForm.qlxx.gyfs == "0") {
if (this.ruleForm.qlrData.length > 1) {
this.$message({
showClose: true,
message: "共有方式：单独所有，权利人只能是一个人",
type: "error",
});
return false;
}
this.ruleForm.qlrData[0].sfczr = "1";
}
// if (this.ruleForm.qlxx.gyfs == "1") {
// //是否分别持证
// if (this.ruleForm.qlxx.sqfbcz == "1") {
// //是
// this.ruleForm.qlrData.forEach((item, index) => {
// item.sfczr = "1";
// });
// } else {
// this.ruleForm.qlrData.forEach((item, index) => {
// if (item.zjh == this.ruleForm.czr) {
// item.sfczr = "1";
// } else {
// item.sfczr = "0";
// }
// });
// }
// }
save(this.ruleForm).then((res) => {
if (res.code === 200) {
this.$message({
showClose: true,
message: "保存成功！",
type: "success",
});
this.$store.dispatch("user/refreshPage", true);
} else {
this.$message({
showClose: true,
message: res.message,
type: "error",
});
}
});
} else {
return false;
}
});
},
},
},
};
};
</script>
<style scoped lang="scss">
@import "~@/styles/public.scss";
@import "~@/styles/slxx/slxx.scss";
@import "~@/styles/public.scss";
@import "~@/styles/slxx/slxx.scss";
</style>
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-19 16:04:43
-->
<template>
<dialogBox title="新增法律法规" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="50%"
@closeDialog="closeDialog" v-model="value">
......@@ -25,72 +30,71 @@
</template>
<script>
import { addSysNotice } from "@/api/sysNotice.js"
import { upload } from "@/api/file.js"
export default {
props: {
value: { type: Boolean, default: false },
},
data () {
return {
ruleForm: {
noticeTitle: '',
noticeContent: '',
noticeFileUrl: '',
noticeType: '2'
import { addSysNotice } from "@/api/sysNotice.js"
import { upload } from "@/api/file.js"
export default {
props: {
value: { type: Boolean, default: false },
},
data () {
return {
ruleForm: {
noticeTitle: '',
noticeContent: '',
noticeFileUrl: '',
noticeType: '2'
},
rules: {
noticeTitle: [
{ required: true, message: '请输入法律法规标题', trigger: 'blur' }
]
},
}
},
methods: {
submitForm () {
let that = this;
that.$refs.ruleForm.validate(valid => {
if (valid) {
addSysNotice(this.ruleForm).then(res => {
if (res.code == 200) {
this.$message.success('保存成功')
this.$emit("input", false);
this.resetRuleForm();
this.$parent.queryClick();
} else {
this.$message.error(res.message)
}
})
} else {
// console.log('error submit!!');
return false;
}
});
},
//关闭窗口
closeDialog () {
this.$emit("input", false);
this.resetRuleForm();
},
rules: {
noticeTitle: [
{ required: true, message: '请输入法律法规标题', trigger: 'blur' }
]
//
resetRuleForm () {
this.$refs['ruleForm'].resetFields();
this.ruleForm.noticeType = '2'
},
beforeUpload (file) {
return true;
},
async handleChange (file) {
var formdata = new FormData();
formdata.append("file", file.raw);
upload(formdata).then(res => {
this.ruleForm.noticeFileUrl = res.message
})
},
}
},
methods: {
submitForm () {
let that = this;
that.$refs.ruleForm.validate(valid => {
if (valid) {
addSysNotice(this.ruleForm).then(res => {
if (res.code == 200) {
this.$message.success('保存成功')
this.$emit("input", false);
this.resetRuleForm();
this.$parent.queryClick();
} else {
this.$message.error(res.message)
}
})
} else {
// console.log('error submit!!');
return false;
}
});
},
//关闭窗口
closeDialog () {
this.$emit("input", false);
this.resetRuleForm();
},
//
resetRuleForm () {
this.$refs['ruleForm'].resetFields();
this.ruleForm.noticeType = '2'
},
beforeUpload (file) {
return true;
},
async handleChange (file) {
var formdata = new FormData();
formdata.append("file", file.raw);
upload(formdata).then(res => {
this.ruleForm.noticeFileUrl = res.message
})
},
}
}
</script>
<style scoped lang="scss">
</style>
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-19 16:04:47
-->
<template>
<div class="from-clues">
<!-- 表单部分 -->
......@@ -11,7 +16,7 @@
</el-col>
<el-col :span="19" class="btnColRight">
<el-form-item>
<el-button type="primary" native-type="submit" @click="handleSearch">查询1</el-button>
<el-button type="primary" native-type="submit" @click="handleSearch">查询1</el-button>
<el-button type="primary" @click="openDialog()">新增</el-button>
</el-form-item>
</el-col>
......@@ -29,79 +34,79 @@
</div>
</template>
<script>
import table from "@/utils/mixin/table";
import { datas, sendThis } from "./flfgdata";
import { getSysPolicyList, deleteSysNotice } from "@/api/sysNotice.js"
import addDialog from "./components/addDialog.vue";
export default {
name: "flfg",
components: { addDialog },
mixins: [table],
mounted () {
sendThis(this);
this.queryClick()
},
data () {
return {
isDialog: false,
viewDialog: false,
ruleForm: {
noticeTitle: ''
},
tableData: {
total: 0,
columns: datas.columns(),
data: [],
},
isDiglog: false
}
},
methods: {
// 列表渲染接口
queryClick () {
this.$startLoading()
getSysPolicyList({ ...this.ruleForm, ...this.pageData }, { 'target': '#flfgLoading' }).then(res => {
if (res.code === 200) {
this.$endLoading()
let { total, records } = res.result
this.tableData.total = total;
this.tableData.data = records
}
})
import table from "@/utils/mixin/table";
import { datas, sendThis } from "./flfgdata";
import { getSysPolicyList, deleteSysNotice } from "@/api/sysNotice.js"
import addDialog from "./components/addDialog.vue";
export default {
name: "flfg",
components: { addDialog },
mixins: [table],
mounted () {
sendThis(this);
this.queryClick()
},
//打开新增弹窗
openDialog () {
this.isDialog = true;
data () {
return {
isDialog: false,
viewDialog: false,
ruleForm: {
noticeTitle: ''
},
tableData: {
total: 0,
columns: datas.columns(),
data: [],
},
isDiglog: false
}
},
downloadFile (item) {
const href = item.noticeFileUrl
window.open(href, '_blank');
},
//删除
delNotice (item) {
this.$confirm('是否确定删除', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteSysNotice({ "bsmNotice": item.bsmNotice }).then(res => {
if (res.code == 200) {
this.$message.success('删除成功')
this.queryClick();
} else {
this.$message.error(res.message)
methods: {
// 列表渲染接口
queryClick () {
this.$startLoading()
getSysPolicyList({ ...this.ruleForm, ...this.pageData }, { 'target': '#flfgLoading' }).then(res => {
if (res.code === 200) {
this.$endLoading()
let { total, records } = res.result
this.tableData.total = total;
this.tableData.data = records
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
},
//打开新增弹窗
openDialog () {
this.isDialog = true;
},
downloadFile (item) {
const href = item.noticeFileUrl
window.open(href, '_blank');
},
//删除
delNotice (item) {
this.$confirm('是否确定删除', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteSysNotice({ "bsmNotice": item.bsmNotice }).then(res => {
if (res.code == 200) {
this.$message.success('删除成功')
this.queryClick();
} else {
this.$message.error(res.message)
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
});
},
},
},
};
};
</script>
<style scoped lang="scss">
@import "~@/styles/public.scss";
@import "~@/styles/public.scss";
</style>
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-19 16:04:58
-->
<template>
<div>
<div class="qtjfjmb-edit-title">
......@@ -117,140 +122,140 @@
</template>
<script>
import { updateSysSqywmbsz, getSysSqywmbszDetailById } from '@/api/sysSqywmbsz'
export default {
props: {
formData: {
type: Object,
default: () => { }
}
},
mounted () {
if (this.formData.bsmMb) {
this.$startLoading()
getSysSqywmbszDetailById(this.formData.bsmMb).then(res => {
this.$endLoading()
let { result } = res
this.ruleForm = result ? result : {}
})
}
},
data () {
return {
n: 0,
ruleForm: {
qllx: '',
qllxmc: '',
bdcqzlx: '',
dymbbs: '',
qlqtzk: '',
firstreg: '',
},
options: [
{
value: '1',
label: '不动产权证书'
import { updateSysSqywmbsz, getSysSqywmbszDetailById } from '@/api/sysSqywmbsz'
export default {
props: {
formData: {
type: Object,
default: () => { }
}
},
mounted () {
if (this.formData.bsmMb) {
this.$startLoading()
getSysSqywmbszDetailById(this.formData.bsmMb).then(res => {
this.$endLoading()
let { result } = res
this.ruleForm = result ? result : {}
})
}
},
data () {
return {
n: 0,
ruleForm: {
qllx: '',
qllxmc: '',
bdcqzlx: '',
dymbbs: '',
qlqtzk: '',
firstreg: '',
},
{
value: '2',
label: '不动产登记证明'
}
],
options1: [],
rules: {
qllx: [
{ required: true, message: '请输入权利类型编码', trigger: 'blur' }
options: [
{
value: '1',
label: '不动产权证书'
},
{
value: '2',
label: '不动产登记证明'
}
],
qllxmc: [
{ required: true, message: '请输入权利类型名称', trigger: 'blur' }
],
bdcqzlx: [
{ required: true, message: '请选择不动产权类型', trigger: 'change' }
],
dymbbs: [
{ required: true, message: '请输入打印模板', trigger: 'blur' }
],
qlqtztmb: [
{ required: true, message: '请输入权利其他状况模板', trigger: 'blur' }
],
},
titleList: [
{
name: '首次登记'
options1: [],
rules: {
qllx: [
{ required: true, message: '请输入权利类型编码', trigger: 'blur' }
],
qllxmc: [
{ required: true, message: '请输入权利类型名称', trigger: 'blur' }
],
bdcqzlx: [
{ required: true, message: '请选择不动产权类型', trigger: 'change' }
],
dymbbs: [
{ required: true, message: '请输入打印模板', trigger: 'blur' }
],
qlqtztmb: [
{ required: true, message: '请输入权利其他状况模板', trigger: 'blur' }
],
},
{
name: '转移登记'
},
{
name: '变更登记'
},
{
name: '注销登记'
},
{
name: '更正登记'
},
{
name: '补证登记'
},
{
name: '换证登记'
}
]
}
},
methods: {
handleSelect (index) {
this.n = index
titleList: [
{
name: '首次登记'
},
{
name: '转移登记'
},
{
name: '变更登记'
},
{
name: '注销登记'
},
{
name: '更正登记'
},
{
name: '补证登记'
},
{
name: '换证登记'
}
]
}
},
submitForm () {
let that = this
updateSysSqywmbsz(this.ruleForm).then(res => {
if (res.code === 200) {
this.$popupCacel()
that.$message({
message: '修改成功',
type: 'success'
})
}
})
methods: {
handleSelect (index) {
this.n = index
},
submitForm () {
let that = this
updateSysSqywmbsz(this.ruleForm).then(res => {
if (res.code === 200) {
this.$popupCacel()
that.$message({
message: '修改成功',
type: 'success'
})
}
})
}
}
}
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/dialogBoxheader.scss";
@import "~@/styles/mixin.scss";
@import "~@/styles/dialogBoxheader.scss";
.qtjfjmb-edit-title {
padding-bottom: 10px;
border-bottom: 1px solid $borderColor;
margin-bottom: 10px;
}
.qtjfjmb-edit-title {
padding-bottom: 10px;
border-bottom: 1px solid $borderColor;
margin-bottom: 10px;
}
ul {
@include flex;
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
ul {
@include flex;
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
.active {
background: $light-blue;
color: #fff;
}
.active {
background: $light-blue;
color: #fff;
}
li {
flex: 1;
line-height: 36px;
@include flex-center;
border: 1px solid $borderColor;
margin-left: -1px;
cursor: pointer;
transition: all 0.3s;
li {
flex: 1;
line-height: 36px;
@include flex-center;
border: 1px solid $borderColor;
margin-left: -1px;
cursor: pointer;
transition: all 0.3s;
&:hover {
@extend .active;
&:hover {
@extend .active;
}
}
}
}
</style>
......
<!--
* @Description: 功能：流程图
* @Description: 流程图
* @Autor: renchao
* @LastEditTime: 2023-05-17 10:40:57
* @LastEditTime: 2023-07-19 16:04:34
-->
<template>
<div class='flowChart'>
......
<!--
* @Description: 功能：审批意见
* @Autor: renchao
* @LastEditTime: 2023-05-17 10:41:24
* @LastEditTime: 2023-07-20 09:52:48
-->
<template>
<div class='spyj loadingtext'>
......@@ -83,7 +83,7 @@
},
},
mounted () {
this.ableOperation = this.$parent.ableOperation;
this.ableOperation = this.$parent.currentSelectTab.ableOperation
this.list();
},
methods: {
......@@ -94,7 +94,6 @@
var formdata = new FormData();
formdata.append("bsmBusiness", this.propsParam.bsmBusiness);
formdata.append("bestepid", this.$route.query.bestepid);
// formdata.append("ableOperation", this.ableOperation)
getSpyjList(formdata).then((res) => {
this.$endLoading()
if (res.code === 200 && res.result) {
......
<!--
* @Description: 受理信息
* @Autor: renchao
* @LastEditTime: 2023-07-19 14:43:59
* @LastEditTime: 2023-07-20 09:30:06
-->
<template>
<div class="slxx">
......
<!--
* @Description: 受理信息
* @Autor: renchao
* @LastEditTime: 2023-07-14 11:18:17
* @LastEditTime: 2023-07-20 09:30:11
-->
<template>
<div class="slxx">
......
<!--
* @Description: 受理信息
* @Autor: renchao
* @LastEditTime: 2023-05-25 08:41:40
* @LastEditTime: 2023-07-20 09:30:21
-->
<template>
<div class="slxx">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-position="flag ? 'top' : ''" :inline="flag"
label-width="120px">
label-width="120px">
<div class="slxx_con" :class="flag ? 'formMarginBot0' : ''">
<div class="slxx_title title-block">
受理信息
......@@ -102,7 +102,7 @@
<el-col :span="14">
<el-form-item label="共有方式：">
<el-radio-group :disabled="!ableOperation" @change="showCZInfo"
v-model="ruleForm.sldyList[0].gyfs">
v-model="ruleForm.sldyList[0].gyfs">
<el-radio label="0">单独所有</el-radio>
<el-radio label="1">共同共有</el-radio>
<el-radio label="2">按份所有</el-radio>
......@@ -111,7 +111,6 @@
</el-form-item>
</el-col>
<el-col :span="5" v-show=" ruleForm.slsq.gyfs == '2'">
<el-form-item label="是否分别持证：">
<el-radio-group v-model="ruleForm.sldyList[0].sqfbcz">
......@@ -130,7 +129,7 @@
</el-col>
</el-row>
<qlrCommonTable @upDateQlrxxList="upDateQlrxxList" :tableData="ruleForm.qlrList"
:gyfs="ruleForm.slsq.gyfs" />
:gyfs="ruleForm.slsq.gyfs" />
<div class="slxx_title title-block">
登记原因
<div class="triangle"></div>
......@@ -139,7 +138,7 @@
<el-col>
<el-form-item v-if="ruleForm.slsq" label="登记原因：" prop="djyy">
<el-input class="textArea" type="textarea" :disabled="!ableOperation"
v-model="ruleForm.fdcq2List[0].djyy">
v-model="ruleForm.fdcq2List[0].djyy">
</el-input>
</el-form-item>
</el-col>
......@@ -154,192 +153,192 @@
</div>
</template>
<script>
import qlrCommonTable from "@/views/workflow/components/qlrCommonTable";
import {BatchInit, Init, saveBatchData, saveData} from "@/api/workflow/fwsyqFlow.js";
import { mapGetters } from "vuex";
export default {
created(callbackfn, thisArg) {
this.ableOperation = this.$parent.currentSelectTab.ableOperation
this.propsParam = this.$attrs;
var formdata = new FormData();
formdata.append("bsmSldy", this.propsParam.bsmSldy);
formdata.append("djlx", this.propsParam.djlx);
formdata.append("bsmSlsq", this.bsmSlsq);
formdata.append("isEdit", this.ableOperation);
BatchInit(formdata).then((res) => {
if (res.code === 200 && res.result) {
this.ruleForm = res.result;
this.splicingFdcq2Info();
}
});
},
components: { qlrCommonTable },
computed: {
...mapGetters(["dictData", "flag"]),
},
data () {
return {
disabled: true,
tdytOption: [],
czrOptions: [],
ruleForm: {
cfdjList:[]//查封登记
,diyaqList:[]//抵押权
,fdcq2List:[]//房屋信息集合
,qlrList:[]//权利人
,ywrList:[]//义务人
,qlxxList:[]//权利信息集合
,sldyList:[]//受理不动产单元集合
,slsq: {}//受理申请流程明细
,flow: {}//受理申请流程明细
,sqrList:[]//申请人
,ssQlxxList:[]//上手权利信息
,user:{}//用户
,zdjbxx: {}//宗地基本信息
},
//传递参数
propsParam: this.$attrs,
//表单是否可操作
ableOperation: true,
rules: {},
bsmSlsq: this.$route.query.bsmSlsq,//受理申请标识码
splicingFdcq2:{//前端根据后台数组组装展示内容
fwxz:{}//房屋性质
,fwjg:{}//房屋结构
,jzmj:{} //建筑面积
,zts:{}//房屋总套数
}
}
},
methods: {
//组装房地产权通用信息
splicingFdcq2Info(){
let fdcq2List = this.ruleForm.fdcq2List;
let fwxzArr = [];
let fwjgArr = [];
let jzmj = 0;
fdcq2List.forEach(fdcq2 => {
fwxzArr.push(fdcq2.fwxzmc);
fwjgArr.push(fdcq2.fwjgmc);
jzmj += parseFloat(fdcq2.jzmj);
})
//将数据转为字符串
//房屋性质
let fwxz = Array.from(new Set(fwxzArr)).join(",");
//房屋结构
let fwjg = Array.from(new Set(fwjgArr)).join(",");
this.splicingFdcq2.fwxz = fwxz;
this.splicingFdcq2.fwjg = fwjg;
this.splicingFdcq2.jzmj = jzmj==null ? 0 : jzmj;
this.splicingFdcq2.zts = fdcq2List.length;
},
import qlrCommonTable from "@/views/workflow/components/qlrCommonTable";
import { BatchInit, Init, saveBatchData, saveData } from "@/api/workflow/fwsyqFlow.js";
import { mapGetters } from "vuex";
export default {
created (callbackfn, thisArg) {
this.ableOperation = this.$parent.currentSelectTab.ableOperation
this.propsParam = this.$attrs;
var formdata = new FormData();
formdata.append("bsmSldy", this.propsParam.bsmSldy);
formdata.append("djlx", this.propsParam.djlx);
formdata.append("bsmSlsq", this.bsmSlsq);
formdata.append("isEdit", this.ableOperation);
BatchInit(formdata).then((res) => {
if (res.code === 200 && res.result) {
this.ruleForm = res.result;
this.splicingFdcq2Info();
}
});
// 更新权利人信息
upDateQlrxxList (val) {
this.ruleForm.qlrList = _.cloneDeep(val);
},
showCZInfo () {
console.log(this.ruleForm.slsq.gyfs);
},
// 更新义务人信息
upDateYwrxxList (val) {
this.ruleForm.ywrList = _.cloneDeep(val);
components: { qlrCommonTable },
computed: {
...mapGetters(["dictData", "flag"]),
},
onSubmit () {
saveBatchData(this.ruleForm).then((res) => {
if (res.code === 200) {
this.$message({
showClose: true,
message: "保存成功！",
type: "success",
});
this.$store.dispatch('user/refreshPage', true);
} else {
this.$message({
showClose: true,
message: res.message,
type: "error"
})
data () {
return {
disabled: true,
tdytOption: [],
czrOptions: [],
ruleForm: {
cfdjList: []//查封登记
, diyaqList: []//抵押权
, fdcq2List: []//房屋信息集合
, qlrList: []//权利人
, ywrList: []//义务人
, qlxxList: []//权利信息集合
, sldyList: []//受理不动产单元集合
, slsq: {}//受理申请流程明细
, flow: {}//受理申请流程明细
, sqrList: []//申请人
, ssQlxxList: []//上手权利信息
, user: {}//用户
, zdjbxx: {}//宗地基本信息
},
//传递参数
propsParam: this.$attrs,
//表单是否可操作
ableOperation: true,
rules: {},
bsmSlsq: this.$route.query.bsmSlsq,//受理申请标识码
splicingFdcq2: {//前端根据后台数组组装展示内容
fwxz: {}//房屋性质
, fwjg: {}//房屋结构
, jzmj: {} //建筑面积
, zts: {}//房屋总套数
}
})
}
},
methods: {
//组装房地产权通用信息
splicingFdcq2Info () {
let fdcq2List = this.ruleForm.fdcq2List;
let fwxzArr = [];
let fwjgArr = [];
let jzmj = 0;
fdcq2List.forEach(fdcq2 => {
fwxzArr.push(fdcq2.fwxzmc);
fwjgArr.push(fdcq2.fwjgmc);
jzmj += parseFloat(fdcq2.jzmj);
})
//将数据转为字符串
//房屋性质
let fwxz = Array.from(new Set(fwxzArr)).join(",");
//房屋结构
let fwjg = Array.from(new Set(fwjgArr)).join(",");
this.splicingFdcq2.fwxz = fwxz;
this.splicingFdcq2.fwjg = fwjg;
this.splicingFdcq2.jzmj = jzmj == null ? 0 : jzmj;
this.splicingFdcq2.zts = fdcq2List.length;
},
// 更新权利人信息
upDateQlrxxList (val) {
this.ruleForm.qlrList = _.cloneDeep(val);
},
showCZInfo () {
console.log(this.ruleForm.slsq.gyfs);
},
// 更新义务人信息
upDateYwrxxList (val) {
this.ruleForm.ywrList = _.cloneDeep(val);
},
onSubmit () {
saveBatchData(this.ruleForm).then((res) => {
if (res.code === 200) {
this.$message({
showClose: true,
message: "保存成功！",
type: "success",
});
this.$store.dispatch('user/refreshPage', true);
} else {
this.$message({
showClose: true,
message: res.message,
type: "error"
})
}
})
}
}
}
}
</script>
<style scoped lang='scss'>
@import "~@/styles/public.scss";
@import "~@/styles/public.scss";
/deep/.el-form {
display: flex;
flex-direction: column;
height: calc(100vh - 130px);
}
/deep/.el-form {
display: flex;
flex-direction: column;
height: calc(100vh - 130px);
}
/deep/.el-form-item__label {
padding: 0;
}
/deep/.el-form-item__label {
padding: 0;
}
/deep/.el-radio {
margin-right: 10px;
}
/deep/.el-radio {
margin-right: 10px;
}
/deep/.el-select {
width: 100%;
}
/deep/.el-select {
width: 100%;
}
/deep/.el-form-item {
margin-bottom: 8px;
}
/deep/.el-form-item {
margin-bottom: 8px;
}
.marginBot0 {
margin-bottom: 0 !important;
}
.marginBot0 {
margin-bottom: 0 !important;
}
.slxx {
box-sizing: border-box;
}
.slxx {
box-sizing: border-box;
}
.slxx_con {
flex: 1;
height: 100%;
background-color: #ffffff;
overflow-y: auto;
padding-right: 3px;
overflow-x: hidden;
}
.slxx_con {
flex: 1;
height: 100%;
background-color: #ffffff;
overflow-y: auto;
padding-right: 3px;
overflow-x: hidden;
}
.submit_btn {
height: 50px;
}
.submit_btn {
height: 50px;
}
.slxx_title {
border-bottom: 1px solid $borderColor;
padding-left: 10px;
padding-bottom: 5px;
margin-bottom: 10px;
margin-top: 5px;
font-size: 16px;
font-weight: 500;
color: #4a4a4a;
}
.slxx_title {
border-bottom: 1px solid $borderColor;
padding-left: 10px;
padding-bottom: 5px;
margin-bottom: 10px;
margin-top: 5px;
font-size: 16px;
font-weight: 500;
color: #4a4a4a;
}
.btn {
text-align: center;
padding-top: 10px;
height: 36px;
background-color: #ffffff;
padding: 5px 0;
}
.btn {
text-align: center;
padding-top: 10px;
height: 36px;
background-color: #ffffff;
padding: 5px 0;
}
.textArea {
/deep/.el-textarea__inner {
min-height: 90px !important;
.textArea {
/deep/.el-textarea__inner {
min-height: 90px !important;
}
}
}
/deep/.el-form-item__label {
padding-bottom: 0px;
}
/deep/.el-form-item__label {
padding-bottom: 0px;
}
</style>
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-11 10:08:11
* @LastEditTime: 2023-07-20 09:32:18
-->
<template>
<!-- 受理信息 -->
......
......@@ -7,7 +7,7 @@
<!-- 受理信息 -->
<div class="slxx">
<el-form :model="ruleForm" :rules="rules" :class="{readonly: editDisabled }"
class="loadingtext" ref="ruleForm" :label-position="flag ? 'top' : ''"
class="loadingtext" ref="ruleForm" :label-position="flag ? 'top' : ''"
:inline="flag" label-width="120px">
<div class="slxx_con" v-if="isShow" :class="flag ? 'formMarginBot0' : ''">
<div class="slxx_title title-block">
......@@ -128,7 +128,7 @@
<div class="triangle"></div>
</div>
<tdytTable
:ableOperation="ableOperation"
:ableOperation="ableOperation"
:tableData="ruleForm.tdytqxList"
@upDateTdytxxList="upDateTdytxxList" />
<div class="slxx_title title-block">
......@@ -224,14 +224,14 @@
components: { qlrCommonTable, tdytTable },
computed: {
...mapGetters(["dictData", "flag"]),
// 根据流程判断表单是否为只读
editDisabled() {
if (!this.ableOperation) {
//只读状态
return true;
}
return false;
},
// 根据流程判断表单是否为只读
editDisabled () {
if (!this.ableOperation) {
//只读状态
return true;
}
return false;
},
},
data () {
return {
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-14 11:06:27
* @LastEditTime: 2023-07-20 09:30:51
-->
<template>
<!-- 受理信息 -->
......@@ -13,8 +13,7 @@
ref="ruleForm"
:label-position="flag ? 'top' : ''"
:inline="flag"
label-width="120px"
>
label-width="120px">
<div class="slxx_con" v-if="isShow" :class="flag ? 'formMarginBot0' : ''">
<div class="slxx_title title-block">
受理信息
......@@ -90,8 +89,7 @@
<el-form-item label="面积单位：">
<el-input
v-model="ruleForm.tdsyq.mjdw"
:disabled="!ableOperation"
></el-input>
:disabled="!ableOperation"></el-input>
</el-form-item>
</el-col>
</el-row>
......@@ -102,19 +100,16 @@
<el-input
v-model="ruleForm.tdsyq.nydmj"
:disabled="!ableOperation"
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"
></el-input>
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"></el-input>
<el-select
v-model="mjdw"
:disabled="!ableOperation"
style="width: 20%"
>
style="width: 20%">
<el-option
v-for="item in dictData['A7']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
:value="item.dcode">
</el-option>
</el-select>
</div>
......@@ -126,19 +121,16 @@
<el-input
v-model="ruleForm.tdsyq.gdmj"
:disabled="!ableOperation"
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"
></el-input>
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"></el-input>
<el-select
v-model="mjdw"
:disabled="!ableOperation"
style="width: 20%"
>
style="width: 20%">
<el-option
v-for="item in dictData['A7']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
:value="item.dcode">
</el-option>
</el-select>
</div>
......@@ -150,19 +142,16 @@
<el-input
v-model="ruleForm.tdsyq.ldmj"
:disabled="!ableOperation"
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"
></el-input>
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"></el-input>
<el-select
v-model="mjdw"
:disabled="!ableOperation"
style="width: 20%"
>
style="width: 20%">
<el-option
v-for="item in dictData['A7']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
:value="item.dcode">
</el-option>
</el-select>
</div>
......@@ -176,19 +165,16 @@
<el-input
v-model="ruleForm.tdsyq.cdmj"
:disabled="!ableOperation"
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"
></el-input>
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"></el-input>
<el-select
v-model="mjdw"
:disabled="!ableOperation"
style="width: 20%"
>
style="width: 20%">
<el-option
v-for="item in dictData['A7']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
:value="item.dcode">
</el-option>
</el-select>
</div>
......@@ -200,19 +186,16 @@
<el-input
v-model="ruleForm.tdsyq.qtnydmj"
:disabled="!ableOperation"
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"
></el-input>
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"></el-input>
<el-select
v-model="mjdw"
:disabled="!ableOperation"
style="width: 20%"
>
style="width: 20%">
<el-option
v-for="item in dictData['A7']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
:value="item.dcode">
</el-option>
</el-select>
</div>
......@@ -224,19 +207,16 @@
<el-input
v-model="ruleForm.tdsyq.jsydmj"
:disabled="!ableOperation"
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"
></el-input>
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"></el-input>
<el-select
v-model="mjdw"
:disabled="!ableOperation"
style="width: 20%"
>
style="width: 20%">
<el-option
v-for="item in dictData['A7']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
:value="item.dcode">
</el-option>
</el-select>
</div>
......@@ -250,19 +230,16 @@
<el-input
v-model="ruleForm.tdsyq.wlydmj"
:disabled="!ableOperation"
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"
></el-input>
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"></el-input>
<el-select
v-model="mjdw"
:disabled="!ableOperation"
style="width: 20%"
>
style="width: 20%">
<el-option
v-for="item in dictData['A7']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
:value="item.dcode">
</el-option>
</el-select>
</div>
......@@ -276,8 +253,7 @@
<tdytTable
:tableData="ruleForm.tdytqxList"
:ableOperation="ableOperation"
@upDateTdytxxList="upDateTdytxxList"
/>
@upDateTdytxxList="upDateTdytxxList" />
<div class="slxx_title title-block">
权利人信息
<div class="triangle"></div>
......@@ -287,8 +263,7 @@
<el-form-item label="共有方式：">
<el-radio-group
:disabled="!ableOperation"
v-model="ruleForm.sldy.gyfs"
>
v-model="ruleForm.sldy.gyfs">
<el-radio label="0">单独所有</el-radio>
<el-radio label="1">共同共有</el-radio>
<el-radio label="2">按份所有</el-radio>
......@@ -300,8 +275,7 @@
<el-form-item label="是否分别持证：">
<el-radio-group
v-model="ruleForm.sldy.sqfbcz"
:disabled="!ableOperation"
>
:disabled="!ableOperation">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
......@@ -309,20 +283,17 @@
</el-col>
<el-col
:span="6"
v-show="ruleForm.sldy.sqfbcz == '0' && ruleForm.sldy.gyfs == '1'"
>
v-show="ruleForm.sldy.sqfbcz == '0' && ruleForm.sldy.gyfs == '1'">
<el-form-item label="持证人：">
<el-select
v-model="ruleForm.czr"
placeholder="持证人"
:disabled="!ableOperation"
>
:disabled="!ableOperation">
<el-option
v-for="item in czrOptions"
:key="item.zjh"
:label="item.sqrmc"
:value="item.zjh"
>
:value="item.zjh">
</el-option>
</el-select>
</el-form-item>
......@@ -333,8 +304,7 @@
:disabled="!ableOperation"
@upDateQlrxxList="upDateQlrxxList"
:key="key"
:gyfs="ruleForm.sldy.gyfs"
/>
:gyfs="ruleForm.sldy.gyfs" />
<div v-if="ruleForm.ywrList && ruleForm.ywrList.length > 0">
<div class="slxx_title title-block">
......@@ -346,8 +316,7 @@
:disabled="!ableOperation"
:tableData="ruleForm.ywrList"
:key="key"
@upDateQlrxxList="upDateYwrxxList"
/>
@upDateQlrxxList="upDateYwrxxList" />
</div>
<div class="slxx_title title-block">
......@@ -361,8 +330,7 @@
class="textArea"
type="textarea"
:disabled="!ableOperation"
v-model="ruleForm.tdsyq.djyy"
>
v-model="ruleForm.tdsyq.djyy">
</el-input>
</el-form-item>
</el-col>
......@@ -377,135 +345,135 @@
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { Init, saveData } from "@/api/workflow/tdsyqFlow.js";
import tdytTable from "@/views/workflow/components/tdytTable";
import qlrCommonTable from "@/views/workflow/components/qlrCommonTable";
export default {
components: { qlrCommonTable, tdytTable },
mounted() {
this.ableOperation = this.$parent.currentSelectTab.ableOperation;
this.propsParam = this.$attrs;
var formdata = new FormData();
let that = this;
this.$startLoading();
formdata.append("bsmSldy", this.propsParam.bsmSldy);
formdata.append("djlx", this.propsParam.djlx);
formdata.append("isEdit", this.ableOperation);
Init(formdata).then((res) => {
this.$nextTick(() => {
that.ruleForm = res.result;
that.$endLoading();
that.isShow = true;
this.czrOptions = this.ruleForm.qlrList;
import { mapGetters } from "vuex";
import { Init, saveData } from "@/api/workflow/tdsyqFlow.js";
import tdytTable from "@/views/workflow/components/tdytTable";
import qlrCommonTable from "@/views/workflow/components/qlrCommonTable";
export default {
components: { qlrCommonTable, tdytTable },
mounted () {
this.ableOperation = this.$parent.currentSelectTab.ableOperation;
this.propsParam = this.$attrs;
var formdata = new FormData();
let that = this;
this.$startLoading();
formdata.append("bsmSldy", this.propsParam.bsmSldy);
formdata.append("djlx", this.propsParam.djlx);
formdata.append("isEdit", this.ableOperation);
Init(formdata).then((res) => {
this.$nextTick(() => {
that.ruleForm = res.result;
that.$endLoading();
that.isShow = true;
this.czrOptions = this.ruleForm.qlrList;
});
});
});
},
computed: {
...mapGetters(["dictData", "flag"]),
},
data() {
return {
mjdw: "1",
value2: {
id: "520000198407304275",
user: "史平",
},
props: {
label: "user",
value: "id",
keyword: "keyword",
},
//表单是否可操作
ableOperation: true,
key: 0,
isShow: false,
disabled: true,
czrOptions: [],
ruleForm: {},
//传递参数
propsParam: {},
rules: {},
};
},
methods: {
// 更新土地用途信息
upDateTdytxxList(val) {
this.ruleForm.tdytqxList && (this.ruleForm.tdytqxList = _.cloneDeep(val));
this.key++;
},
// 更新权利人信息
upDateQlrxxList(val) {
this.ruleForm.qlrList && (this.ruleForm.qlrList = _.cloneDeep(val));
this.czrOptions = this.ruleForm.qlrList;
this.key++;
},
// 更新义务人信息
upDateYwrxxList(val) {
this.ruleForm.ywrList && (this.ruleForm.ywrList = _.cloneDeep(val));
this.key++;
computed: {
...mapGetters(["dictData", "flag"]),
},
onSubmit() {
if (this.ruleForm.qlrList.length == 0) {
this.$message({
showClose: true,
message: "请确认权利人信息",
type: "error",
});
return false;
}
data () {
return {
mjdw: "1",
value2: {
id: "520000198407304275",
user: "史平",
},
props: {
label: "user",
value: "id",
keyword: "keyword",
},
if (this.ruleForm.sldy.gyfs == "0") {
if (this.ruleForm.qlrList.length > 1) {
//表单是否可操作
ableOperation: true,
key: 0,
isShow: false,
disabled: true,
czrOptions: [],
ruleForm: {},
//传递参数
propsParam: {},
rules: {},
};
},
methods: {
// 更新土地用途信息
upDateTdytxxList (val) {
this.ruleForm.tdytqxList && (this.ruleForm.tdytqxList = _.cloneDeep(val));
this.key++;
},
// 更新权利人信息
upDateQlrxxList (val) {
this.ruleForm.qlrList && (this.ruleForm.qlrList = _.cloneDeep(val));
this.czrOptions = this.ruleForm.qlrList;
this.key++;
},
// 更新义务人信息
upDateYwrxxList (val) {
this.ruleForm.ywrList && (this.ruleForm.ywrList = _.cloneDeep(val));
this.key++;
},
onSubmit () {
if (this.ruleForm.qlrList.length == 0) {
this.$message({
showClose: true,
message: "共有方式：单独所有，权利人只能是一个人",
message: "请确认权利人信息",
type: "error",
});
return false;
}
this.ruleForm.qlrList[0].sfczr = "1";
}
if (this.ruleForm.sldy.gyfs == "1") {
//是否分别持证
if (this.ruleForm.sldy.sqfbcz == "1") {
//是
this.ruleForm.qlrList.forEach((item, index) => {
item.sfczr = "1";
});
} else {
this.ruleForm.qlrList.forEach((item, index) => {
if (item.zjh == this.ruleForm.czr) {
item.sfczr = "1";
} else {
item.sfczr = "0";
}
});
if (this.ruleForm.sldy.gyfs == "0") {
if (this.ruleForm.qlrList.length > 1) {
this.$message({
showClose: true,
message: "共有方式：单独所有，权利人只能是一个人",
type: "error",
});
return false;
}
this.ruleForm.qlrList[0].sfczr = "1";
}
}
saveData(this.ruleForm).then((res) => {
if (res.code === 200) {
this.$message({
showClose: true,
message: "保存成功！",
type: "success",
});
this.$store.dispatch("user/refreshPage", true);
} else {
this.$message({
showClose: true,
message: res.message,
type: "error",
});
if (this.ruleForm.sldy.gyfs == "1") {
//是否分别持证
if (this.ruleForm.sldy.sqfbcz == "1") {
//是
this.ruleForm.qlrList.forEach((item, index) => {
item.sfczr = "1";
});
} else {
this.ruleForm.qlrList.forEach((item, index) => {
if (item.zjh == this.ruleForm.czr) {
item.sfczr = "1";
} else {
item.sfczr = "0";
}
});
}
}
});
saveData(this.ruleForm).then((res) => {
if (res.code === 200) {
this.$message({
showClose: true,
message: "保存成功！",
type: "success",
});
this.$store.dispatch("user/refreshPage", true);
} else {
this.$message({
showClose: true,
message: res.message,
type: "error",
});
}
});
},
},
},
};
};
</script>
<style scoped lang="scss">
@import "~@/styles/public.scss";
@import "~@/styles/slxx/slxx.scss";
@import "~@/styles/public.scss";
@import "~@/styles/slxx/slxx.scss";
</style>
......
......@@ -174,7 +174,7 @@
抵押人信息
<div class="triangle"></div>
</div>
<qlrCommonTable :tableData="ruleForm.ywrList" @upDateQlrxxList="upDateYwrxxList" :disabled="!ableOperation"/>
<qlrCommonTable :tableData="ruleForm.ywrList" @upDateQlrxxList="upDateYwrxxList" :disabled="!ableOperation" />
<div class="slxx_title title-block">
登记原因
......@@ -194,7 +194,6 @@
</el-form-item>
</el-col>
</el-row>
</div>
<el-row class="btn" v-if="ableOperation">
<el-form-item>
......
......@@ -218,7 +218,7 @@
抵押人信息
<div class="triangle"></div>
</div>
<qlrCommonTable :tableData="ruleForm.ywrList" @upDateQlrxxList="upDateYwrxxList" :disabled="!ableOperation"/>
<qlrCommonTable :tableData="ruleForm.ywrList" @upDateQlrxxList="upDateYwrxxList" :disabled="!ableOperation" />
<div class="slxx_title title-block">
登记原因
......@@ -238,7 +238,6 @@
</el-form-item>
</el-col>
</el-row>
</div>
<el-row class="btn" v-if="ableOperation">
<el-form-item>
......
......@@ -3,9 +3,7 @@ const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
const port = process.env.port || process.env.npm_config_port || 8888 // dev port
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
/**
......