680 lines
22 KiB
Vue
680 lines
22 KiB
Vue
<template>
|
||
<div style="display: flex" v-bind="$attrs">
|
||
<!-- {{ $attrs.value }} -->
|
||
<!-- {{simpleDayOptions}} -->
|
||
<!-- <div v-if="columsType == 'complexTable'" style="color: red; display: block; width: 100%">
|
||
注：服务频次对应每天、每周、每月、每年，均需要设置起止时间
|
||
</div>
|
||
<br /> -->
|
||
<div v-if="columsType == 'complexTable'">
|
||
<div v-if="columsType == 'complexTable'" style="color: red; display: block; width: 100%">
|
||
注：服务频次对应每天、每周、每月、每年，均需要设置起止时间
|
||
<br />
|
||
<br />
|
||
</div>
|
||
<a-table :columns="colums" :data-source="$attrs.value" bordered :pagination="false">
|
||
<template
|
||
v-for="(item, index) in colums"
|
||
:key="index"
|
||
#[item.dataIndex]="text, record, index"
|
||
>
|
||
<!-- {{ text }} -->
|
||
|
||
<a-input
|
||
v-if="
|
||
item.otherConditions
|
||
? item.otherConditions && item.inputType == 'input'
|
||
: item.inputType == 'input'
|
||
"
|
||
style="margin: -5px 0"
|
||
:value="text.text"
|
||
@change="(e) => handleChangeIndex(e, text.index, item.dataIndex, item)"
|
||
/>
|
||
<div v-else-if="item.inputType == 'select'">
|
||
<div v-if="text.record[item.otherConditions] === 3 && item.dataIndex == 'day'">
|
||
<div style="display: inline-block">
|
||
<a-select
|
||
style="margin: -5px 0"
|
||
:value="text.text"
|
||
@change="(e) => handleChangeIndex(e, text.index, item.dataIndex)"
|
||
>
|
||
<a-select-option
|
||
v-for="(i, index) in simpleDayOptions"
|
||
:key="index"
|
||
:value="i.value"
|
||
>
|
||
{{ i.label }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
<div style="display: inline-block"> 日</div>
|
||
</div>
|
||
<div v-else-if="text.record[item.otherConditions] === 4 && item.dataIndex == 'month'">
|
||
<div style="display: inline-block">
|
||
<a-select
|
||
style="margin: -5px 0; display: inline-block"
|
||
:value="text.text"
|
||
@change="(e) => handleChangeIndex(e, text.index, item.dataIndex)"
|
||
>
|
||
<a-select-option
|
||
v-for="(i, index) in item.componentProps.options"
|
||
:key="index"
|
||
:value="i.value"
|
||
>
|
||
{{ i.label }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
|
||
<div style="display: inline-block">月</div>
|
||
</div>
|
||
<div v-else-if="text.record[item.otherConditions] === 4 && item.dataIndex == 'day'">
|
||
<div style="display: inline-block">
|
||
<a-select
|
||
style="margin: -5px 0"
|
||
:value="text.text"
|
||
@change="(e) => handleChangeIndex(e, text.index, item.dataIndex)"
|
||
>
|
||
<a-select-option
|
||
v-for="(i, index) in item.componentProps.options"
|
||
:key="index"
|
||
:value="i.value"
|
||
>
|
||
{{ i.label }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
<div style="display: inline-block">日</div>
|
||
</div>
|
||
<div v-else-if="text.record[item.otherConditions] === 2 && item.dataIndex == 'week'">
|
||
<a-select
|
||
style="margin: -5px 0"
|
||
:value="text.text"
|
||
@change="(e) => handleChangeIndex(e, text.index, item.dataIndex)"
|
||
>
|
||
<a-select-option
|
||
v-for="(i, index) in item.componentProps.options"
|
||
:key="index"
|
||
:value="i.value"
|
||
>
|
||
{{ i.label }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <a-select
|
||
v-else-if="
|
||
text.record[item.otherConditions] == item.otherValue && item.inputType == 'select'
|
||
"
|
||
style="margin: -5px 0"
|
||
:value="text.text"
|
||
@change="(e) => handleChangeIndex(e.target.value, index, 'name')"
|
||
>
|
||
<a-select-option v-for="(i, index) in item.componentProps.options" :key="index">
|
||
{{ i.label }}
|
||
</a-select-option>
|
||
</a-select> -->
|
||
|
||
<a-time-picker
|
||
v-else-if="
|
||
item.otherConditions
|
||
? item.otherConditions && item.inputType == 'date'
|
||
: item.inputType == 'date'
|
||
"
|
||
style="width: 100px"
|
||
size="small"
|
||
:defaultValue="text.text ? moment(text.text, 'HH:mm:ss') : ''"
|
||
@change="(val, dateStrings) => changeTime(val, dateStrings, text.index, 'startTime')"
|
||
format="HH:mm:ss"
|
||
/>
|
||
<template
|
||
v-else-if="
|
||
item.otherConditions
|
||
? item.otherConditions && item.inputType == 'modal'
|
||
: item.inputType == 'modal'
|
||
"
|
||
>请选择</template
|
||
>
|
||
<template
|
||
v-else-if="
|
||
otherConditions
|
||
? otherConditions && item.inputType == 'input'
|
||
: item.inputType == 'operation'
|
||
"
|
||
>删除</template
|
||
>
|
||
<template v-else>{{ text.text }}</template>
|
||
</template>
|
||
</a-table>
|
||
</div>
|
||
<div v-else-if="columsType == 'normalTable'">
|
||
<!-- {{ $attrs.value }}--900099 -->
|
||
|
||
<a-table :columns="colums" :data-source="$attrs.value" bordered :pagination="false">
|
||
<template
|
||
v-for="(item, index) in colums"
|
||
:key="index"
|
||
#[item.dataIndex]="text, record, index"
|
||
>
|
||
<!-- {{ item }} -->
|
||
<a-input
|
||
v-if="item.inputType == 'input'"
|
||
style="margin: -5px 0"
|
||
:value="text.text"
|
||
@change="(e) => handleChangeIndex(e, text.index, item.dataIndex, item)"
|
||
/>
|
||
<div v-else-if="item.inputType == 'select'">
|
||
<a-select
|
||
style="margin: -5px 0; display: inline-block"
|
||
:value="text.text"
|
||
@change="(e) => handleChangeIndex(e, text.index, item.dataIndex)"
|
||
>
|
||
<a-select-option
|
||
v-for="(i, index) in item.componentProps.options"
|
||
:key="index"
|
||
:value="i.value"
|
||
>
|
||
{{ i.label }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
<div v-else-if="item.inputType == 'selectElse'">
|
||
<!-- {{ item.componentProps }} -->
|
||
<a-select
|
||
style="margin: -5px 0; display: inline-block"
|
||
:value="text.text"
|
||
@change="(e) => handleChangeIndex(e, text.index, item.dataIndex, item)"
|
||
>
|
||
<a-select-option
|
||
v-for="(i, index) in item.componentProps.options"
|
||
:key="index"
|
||
:value="i.value"
|
||
>
|
||
{{ i.label }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
<div v-else-if="item.inputType == 'selectApi'">
|
||
<NsSelectApi
|
||
v-bind="item.componentProps"
|
||
:value="text.text"
|
||
@change="(e) => handleChangeIndex(e, text.index, item.dataIndex)"
|
||
/>
|
||
</div>
|
||
<div v-else-if="item.inputType == 'upload'">
|
||
<NvUpload v-bind="item.componentProps" :value="text.text" />
|
||
</div>
|
||
<div v-else-if="item.inputType == 'date'">
|
||
<a-time-picker
|
||
style="width: 100px"
|
||
size="small"
|
||
:value="text.text ? moment(text.text, 'HH:mm:ss') : ''"
|
||
:defaultValue="text.text ? moment(text.text, 'HH:mm:ss') : ''"
|
||
@change="
|
||
(val, dateStrings) => changeTime(val, dateStrings, text.index, item.dataIndex)
|
||
"
|
||
format="HH:mm:ss"
|
||
/></div>
|
||
<template v-else-if="item.inputType == 'modal'">
|
||
<!-- 请选择 -->
|
||
<NsModalTable
|
||
v-bind="{
|
||
...item.componentProps,
|
||
record: text.record,
|
||
valueP: text.text,
|
||
dataIndex: item.dataIndex,
|
||
}"
|
||
@changeTable="changeTable"
|
||
:value="text.text"
|
||
/>
|
||
</template>
|
||
<template v-else-if="item.inputType == 'operation'">
|
||
<span v-for="(it, indexs) in item.componentProps.actionOptions" :key="indexs">
|
||
<span
|
||
:style="{ color: it.color }"
|
||
style="margin-left: 5px"
|
||
@click="optionA(it.value, text.record, text.index)"
|
||
>{{ it.name }}</span
|
||
>
|
||
</span>
|
||
</template>
|
||
<template v-else>{{ text.text }}</template>
|
||
</template>
|
||
<template #footer="currentPageData">
|
||
<!-- {{ currentPageData }} -->
|
||
<span style="font-size: 22px; margin-left: 50%" @click="add(currentPageData)">+</span>
|
||
</template>
|
||
</a-table>
|
||
</div>
|
||
<div v-else>
|
||
<a-row>
|
||
<a-col :span="12">
|
||
<div>未选择</div>
|
||
<br />
|
||
<a-row>
|
||
<a-col :span="12">护理类别：</a-col>
|
||
<a-col :span="12"
|
||
><ns-select :options="optionSlect" @change="handleChangeViewList"
|
||
/></a-col>
|
||
</a-row>
|
||
<br />
|
||
<div>
|
||
<a-table
|
||
:columns="viewColums"
|
||
:data-source="careItems"
|
||
:row-selection="rowSelection"
|
||
:pagination="false"
|
||
bordered
|
||
/>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<div>已选择</div>
|
||
<!-- <br /> -->
|
||
<div style="height: 8px"></div>
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<a-table :columns="colums" :data-source="$attrs.value" :pagination="false" bordered>
|
||
<template
|
||
v-for="(item, index) in colums"
|
||
:key="index"
|
||
#[item.dataIndex]="text, record, index"
|
||
>
|
||
<!-- {{ text }} -->
|
||
|
||
<a-input
|
||
v-if="item.inputType == 'input'"
|
||
style="margin: -5px 0"
|
||
:value="text.text"
|
||
@change="(e) => handleChangeIndex(e, text.index, item.dataIndex, item)"
|
||
/>
|
||
|
||
<a-select
|
||
v-else-if="item.inputType == 'select'"
|
||
style="margin: -5px 0"
|
||
:value="text.text"
|
||
@change="(e) => handleChangeIndex(e, text.index, item.dataIndex, item)"
|
||
>
|
||
<a-select-option v-for="(i, index) in item.componentProps.options" :key="index">
|
||
{{ i.label }}
|
||
</a-select-option>
|
||
</a-select>
|
||
<template v-else-if="item.inputType == 'modal'">请选择</template>
|
||
<template v-else-if="item.inputType == 'operation'"
|
||
><span @click="handleDelete(text.index)" style="cursor: pointer">
|
||
删除
|
||
</span></template
|
||
>
|
||
<template v-else>{{ text.text }}</template>
|
||
</template>
|
||
</a-table>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script lang="ts">
|
||
import moment from 'moment';
|
||
import { defineComponent, ref, watch } from 'vue';
|
||
import { NsMessage } from '../../message';
|
||
import { http } from '/nerv-lib/util/http';
|
||
import NsModalTable from './modal-table.vue';
|
||
import NvUpload from './uplods.vue';
|
||
export default defineComponent({
|
||
name: 'NsEtable',
|
||
components: {
|
||
NsModalTable,
|
||
NvUpload,
|
||
},
|
||
props: {
|
||
colums: {
|
||
type: Array,
|
||
},
|
||
viewColums: {
|
||
type: Array,
|
||
},
|
||
tableData: {
|
||
type: Array,
|
||
},
|
||
attribute: {
|
||
type: String,
|
||
},
|
||
onchange: {
|
||
type: Function,
|
||
},
|
||
columsType: {
|
||
type: String,
|
||
},
|
||
getChildrenOptions: {
|
||
type: Function,
|
||
},
|
||
addlist: {
|
||
type: Object,
|
||
},
|
||
},
|
||
emits: ['change', 'updata:longLat', 'validate', 'getChildrenOptions'],
|
||
setup(props, context) {
|
||
let data = [];
|
||
let propsData = ref();
|
||
let ids = ref(9);
|
||
const dependency = ref();
|
||
const selectElseOption = ref([]);
|
||
const rowSelection = {
|
||
type: 'checkbox',
|
||
onChange: (selectedRowKeys: [], selectedRows: []) => {
|
||
let dpData = context.attrs.value ? JSON.parse(JSON.stringify(context.attrs)) : [];
|
||
const newData = [...dpData.value];
|
||
selectedRows.forEach((item) => {
|
||
newData.push({
|
||
nursingItemUuid: item['uuid'],
|
||
nursingItemName: item['itemName'],
|
||
frequency: 1,
|
||
times: 1,
|
||
});
|
||
});
|
||
context.emit('change', newData);
|
||
},
|
||
};
|
||
const optionSlect = [
|
||
{
|
||
label: '全部',
|
||
value: 'all',
|
||
},
|
||
{
|
||
label: '生活护理',
|
||
value: 1,
|
||
},
|
||
{
|
||
label: '医疗护理',
|
||
value: 2,
|
||
},
|
||
{
|
||
label: '康复护理',
|
||
value: 3,
|
||
},
|
||
];
|
||
propsData = context.attrs.value ? JSON.parse(JSON.stringify(context.attrs.value)) : [];
|
||
console.log(propsData, '98777');
|
||
let simpleDayOptions = ref([]);
|
||
for (let i = 0; i < 28; i++) {
|
||
let item = {
|
||
label: '' + (i + 1),
|
||
value: i + 1,
|
||
};
|
||
simpleDayOptions.value.push(item);
|
||
}
|
||
|
||
let careItems = ref([]);
|
||
const handleChangeViewList = (value) => {
|
||
let api = '/api/pension/pension/objs/NursingItem';
|
||
|
||
http
|
||
.get(api, {
|
||
itemType: value == 'all' ? '' : value,
|
||
enable: true,
|
||
pageSize: 10,
|
||
})
|
||
.then((res) => {
|
||
if (res && res.success) {
|
||
careItems.value = res.data.data;
|
||
// NsMessage.success('操作成功');
|
||
}
|
||
})
|
||
.catch(() => {
|
||
NsMessage.error('列表获取失败');
|
||
});
|
||
};
|
||
handleChangeViewList('all');
|
||
|
||
const add = (e) => {
|
||
console.log(props.addlist, 'opopop');
|
||
// let data = {
|
||
// regionUuid: null,
|
||
// inspectionTime: null,
|
||
// personList: null,
|
||
// relation: null,
|
||
// // uuid:
|
||
// };
|
||
let list = JSON.parse(JSON.stringify(props.addlist));
|
||
let data = { ...list };
|
||
let edList = context.attrs.value ? JSON.parse(JSON.stringify(context.attrs.value)) : [];
|
||
ids.value += 1;
|
||
edList.push({ ...data, uuid: ids.value + 'uuid' });
|
||
context.emit('change', edList);
|
||
// console.log(e, JSON.parse(JSON.stringify(context.attrs.value)), 'add');
|
||
};
|
||
|
||
const changeTable = (item) => {
|
||
let currentList = JSON.parse(JSON.stringify(context.attrs.value));
|
||
currentList &&
|
||
currentList instanceof Array &&
|
||
currentList.length > 0 &&
|
||
currentList.forEach((its) => {
|
||
if (its.uuid == item.uuid) {
|
||
its = Object.assign(its, item);
|
||
}
|
||
});
|
||
|
||
context.emit('change', currentList);
|
||
};
|
||
|
||
// 表格列操作方法
|
||
const optionA = (name, actionInfo, ind) => {
|
||
let edList = context.attrs.value ? JSON.parse(JSON.stringify(context.attrs.value)) : [];
|
||
|
||
if (name == 'delete') {
|
||
edList.splice(ind, 1);
|
||
// console.log(edList, 'edlist');
|
||
} else if (name == 'copy') {
|
||
// console.log('00000');
|
||
ids.value += 1;
|
||
edList.push({ ...actionInfo, uuid: ids.value + 'uuid' });
|
||
}
|
||
context.emit('change', edList);
|
||
};
|
||
|
||
const getElseOptins = (name, value, fieldName, index) => {
|
||
console.log(name, value, fieldName, index, 'zhougg');
|
||
let acinfo = props && props.colums && props.colums[index];
|
||
console.log(acinfo, 'acinfo');
|
||
let api = acinfo.componentProps.api;
|
||
let params = {
|
||
...acinfo.componentProps.params,
|
||
[name]: value,
|
||
};
|
||
console.log(params, 'acparams');
|
||
|
||
// let api = '/api/pension/pension/objs/NursingItem';
|
||
http
|
||
.get(api, { ...params })
|
||
.then((res) => {
|
||
if (res && res.success) {
|
||
console.log(acinfo.componentProps.selectElseOption, 'acinfo.componentProps');
|
||
res.data &&
|
||
res.data.forEach((item) => {
|
||
if (item.dictValue == value) {
|
||
let arr = [];
|
||
item.subList &&
|
||
item.subList.forEach((it) => {
|
||
arr.push({
|
||
label: it.dictName,
|
||
value: it.dictValue,
|
||
});
|
||
});
|
||
selectElseOption.value = arr;
|
||
console.log(item.subList, 'sublist');
|
||
}
|
||
});
|
||
// careItems.value = res.data.data;
|
||
// NsMessage.success('操作成功');
|
||
}
|
||
})
|
||
.catch(() => {
|
||
NsMessage.error('列表获取失败');
|
||
});
|
||
};
|
||
// dependency
|
||
watch(dependency, (newValue, oldValue) => {
|
||
console.log('old', oldValue);
|
||
console.log('new', newValue);
|
||
});
|
||
|
||
return {
|
||
data,
|
||
simpleDayOptions,
|
||
rowSelection,
|
||
optionSlect,
|
||
handleChangeViewList,
|
||
careItems,
|
||
add,
|
||
changeTable,
|
||
optionA,
|
||
getElseOptins,
|
||
selectElseOption,
|
||
};
|
||
},
|
||
data() {
|
||
return {
|
||
editingKey: '',
|
||
propsList: [],
|
||
Month2Day: {
|
||
1: 31,
|
||
2: 28,
|
||
3: 31,
|
||
4: 30,
|
||
5: 31,
|
||
6: 30,
|
||
7: 31,
|
||
8: 31,
|
||
9: 30,
|
||
10: 31,
|
||
11: 30,
|
||
12: 31,
|
||
},
|
||
};
|
||
},
|
||
created() {
|
||
this.propsList = this.$attrs.value ? JSON.parse(JSON.stringify(this.$attrs.value)) : [];
|
||
},
|
||
methods: {
|
||
moment,
|
||
changeTime(val, dateStrings, key, type) {
|
||
let datapro = this.$attrs.value ? JSON.parse(JSON.stringify(this.$attrs.value)) : [];
|
||
const newData = [...datapro];
|
||
const target = newData.filter((item, index) => key === index)[0];
|
||
if (type == 'startTime' && target['endTime']) {
|
||
if (this.timeCompare(dateStrings, target['endTime'])) {
|
||
NsMessage.error('开始时间不能大于结束时间');
|
||
}
|
||
} else if (type == 'endTime') {
|
||
if (this.timeCompare(target['startTime'], dateStrings)) {
|
||
NsMessage.error('开始时间不能大于结束时间');
|
||
}
|
||
}
|
||
if (target) {
|
||
target[type] = dateStrings;
|
||
this.$emit('change', newData);
|
||
// this.$emit('validate', false);
|
||
// this.propsList = newData;
|
||
}
|
||
},
|
||
|
||
timeCompare(start, end) {
|
||
let flag = true;
|
||
if (!start || !end) return true;
|
||
let startH = +start.split(':')[0];
|
||
let startM = +start.split(':')[1];
|
||
let endH = +end.split(':')[0];
|
||
let endM = +end.split(':')[1];
|
||
// 开始小时大于结束小时
|
||
if (startH > endH) {
|
||
flag = false;
|
||
} else if (startH == endH) {
|
||
// 小时相等时，开始分钟大于结束分钟
|
||
if (startM >= endM) {
|
||
flag = false;
|
||
}
|
||
}
|
||
return flag;
|
||
},
|
||
handleChangeIndex(value, key, type, item) {
|
||
console.log(value, key, type, 'zhouhaha');
|
||
let propsInfo = this.$attrs.value ? JSON.parse(JSON.stringify(this.$attrs.value)) : [];
|
||
const newData = [...propsInfo];
|
||
console.log(newData, 'newData');
|
||
console.log([...this.propsList], 'newData');
|
||
console.log(this.propsList, 'newData');
|
||
const target = newData.filter((item, index) => key === index)[0];
|
||
if (type == 'month') {
|
||
this.colums &&
|
||
this.colums.forEach((item: any) => {
|
||
if (item.dataIndex == 'day') {
|
||
item.componentProps.options = this.setOptions(this.Month2Day[value], 'dayOptions');
|
||
}
|
||
});
|
||
}
|
||
console.log(target, 'target');
|
||
if (target) {
|
||
target[type] = value;
|
||
console.log(newData, 'newData');
|
||
this.$emit('change', newData);
|
||
// this.propsList = newData;
|
||
}
|
||
this.colums &&
|
||
this.colums.forEach((item, index) => {
|
||
console.log(item, item.dependency, '564');
|
||
if (item.dependency == type) {
|
||
// console.log('lopppp');
|
||
this.$emit('getChildrenOptions', item.dependency, value, item.dataIndex);
|
||
this.getElseOptins(item.dependency, value, item.dataIndex, index);
|
||
}
|
||
});
|
||
},
|
||
handleDelete(e) {
|
||
let data = this.$attrs.value ? JSON.parse(JSON.stringify(this.$attrs.value)) : [];
|
||
|
||
let newData = data.filter((item, index) => e !== index);
|
||
// console.log(newData);
|
||
this.$emit('change', newData);
|
||
},
|
||
setOptions(number: number, type: string) {
|
||
let arr = [];
|
||
for (let i = 0; i < number; i++) {
|
||
let item = {
|
||
label: '' + (i + 1),
|
||
value: i + 1,
|
||
};
|
||
arr.push(item);
|
||
}
|
||
return arr;
|
||
},
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="less" scoped>
|
||
input::-webkit-outer-spin-button,
|
||
input::-webkit-inner-spin-button {
|
||
-webkit-appearance: none;
|
||
}
|
||
#map-container {
|
||
width: 600px;
|
||
height: 400px;
|
||
}
|
||
.leftBox,
|
||
.rightBox {
|
||
flex: 1;
|
||
}
|
||
.inputArea {
|
||
display: flex;
|
||
line-height: 30px;
|
||
}
|
||
.inputSearch {
|
||
.inputAdress {
|
||
width: 300px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
</style>
|