rcs5.0 commit
This commit is contained in:
wangxinfei
@@ -0,0 +1,479 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="审批"
|
||||
:visible.sync="checkDialog"
|
||||
width="90%"
|
||||
@close="close"
|
||||
>
|
||||
<div class="check-dialog">
|
||||
<div :class="leftHide ? '' : 'left-step'">
|
||||
<i
|
||||
:class="leftHide ? 'el-icon-caret-right' : 'el-icon-caret-left'"
|
||||
size="32"
|
||||
class="collapse"
|
||||
@click="leftClick"
|
||||
/>
|
||||
<el-steps
|
||||
v-show="!leftHide"
|
||||
direction="vertical"
|
||||
:active="processList.length"
|
||||
class="step-list"
|
||||
>
|
||||
<el-step
|
||||
v-for="(item, index) in processList"
|
||||
:key="index"
|
||||
>
|
||||
<div slot="title">
|
||||
<p
|
||||
v-if="item.action"
|
||||
style="color: #333"
|
||||
>
|
||||
{{ item.EndTime
|
||||
}}<span style="margin-left: 20px">{{ item.action }}</span>
|
||||
</p>
|
||||
<p
|
||||
v-else
|
||||
style="text-align: center; color: #333"
|
||||
>处理中</p>
|
||||
<div :class="item.action ? 'step-content' : 'step-handle'">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
</div>
|
||||
</el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
<div :class="leftHide ? 'right-auto' : 'right-table'">
|
||||
<PublicTable
|
||||
v-if="!routeType"
|
||||
ref="table"
|
||||
class="table"
|
||||
row-key="formName"
|
||||
:loading="loading"
|
||||
:has-index="false"
|
||||
:has-operation="false"
|
||||
:table-data="table.data"
|
||||
:table-column="table.columns"
|
||||
:operation-fixed="false"
|
||||
:is-need-pagination="false"
|
||||
:is-need-customcolumn="false"
|
||||
/>
|
||||
<div v-else>交易审批</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
>
|
||||
<flip-countdown
|
||||
v-if="showCountdown"
|
||||
:key="countdownKey"
|
||||
:deadline="deadline"
|
||||
:show-days="false"
|
||||
:show-hours="false"
|
||||
:labels="{}"
|
||||
:countdown-size="'20px'"
|
||||
style="float:left;width:auto"
|
||||
@timeElapsed="close"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
:size="$buttonSize"
|
||||
@click="handleViewProcess"
|
||||
>查看流程</el-button>
|
||||
<el-button
|
||||
v-for="item in operationList"
|
||||
:key="item.id"
|
||||
type="primary"
|
||||
:size="$buttonSize"
|
||||
@click="invokeMethod(item.codeName)"
|
||||
>{{ item.codeLocalName }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<ProcessDialog
|
||||
:show-process.sync="showProcess"
|
||||
:select-row="selectRow"
|
||||
/>
|
||||
<el-dialog
|
||||
:title="dialogTitle"
|
||||
:visible.sync="backDialog"
|
||||
width="60%"
|
||||
:modal-append-to-body="false"
|
||||
>
|
||||
<publicForm
|
||||
ref="publicForm"
|
||||
:form-arr="formArr"
|
||||
:form-data="formData"
|
||||
@outOperation="outOperation"
|
||||
/>
|
||||
<span
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
:size="$buttonSize"
|
||||
@click="save"
|
||||
>保存</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:size="$buttonSize"
|
||||
@click="dialogClose"
|
||||
>取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProcessDialog from './processDialog.vue';
|
||||
import PublicTable from '@/components/table/index.vue';
|
||||
import publicForm from '@/components/form/index.vue';
|
||||
import FlipCountdown from 'vue2-flip-countdown';
|
||||
import moment from 'moment';
|
||||
import { dateFormat } from '../../../../utils';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ProcessDialog,
|
||||
PublicTable,
|
||||
publicForm,
|
||||
FlipCountdown,
|
||||
},
|
||||
props: {
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
selectRow: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
activeIndex: {
|
||||
type: [String, Number],
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
countDownKey: 0,
|
||||
// deadline: moment()
|
||||
// .add(5, 'm')
|
||||
// .format('YYYY-MM-DD HH:mm:ss'),
|
||||
deadline: null,
|
||||
showCountdown: false,
|
||||
dialogTitle: '',
|
||||
backDialog: false,
|
||||
leftHide: false,
|
||||
checkDialog: false,
|
||||
showProcess: false,
|
||||
processList: [],
|
||||
operationList: [],
|
||||
table: {
|
||||
data: [],
|
||||
columns: [
|
||||
{
|
||||
prop: 'formName',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
// label: this.$t('field.formName'),
|
||||
label: '变更要素',
|
||||
},
|
||||
{
|
||||
prop: 'before',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
// label: this.$t('field.after'),
|
||||
label: '审核前',
|
||||
},
|
||||
{
|
||||
prop: 'after',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
// label: this.$t('field.before'),
|
||||
label: '审核后',
|
||||
},
|
||||
],
|
||||
},
|
||||
formArr: [
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'opType',
|
||||
span: 24,
|
||||
attrs: {
|
||||
label: '常用语:',
|
||||
},
|
||||
options: [],
|
||||
rules: { required: true, message: '请选择' },
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
prop: 'msg',
|
||||
span: 24,
|
||||
attrs: {
|
||||
label: '审批回复:',
|
||||
placeholder: '请填写',
|
||||
minRows: 3,
|
||||
// maxRows: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
// 默认值
|
||||
formData: {
|
||||
opType: '',
|
||||
msg: '',
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
routeType() { // 是否是交易审批 参数审批
|
||||
return this.$route.meta.extraData.extraParams.type === 'dcs/dcs';
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isShow: {
|
||||
handler(nv) {
|
||||
this.$nextTick(async() => {
|
||||
if (nv) {
|
||||
await this.init();
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
outOperation(val, index, prop, num) {
|
||||
console.log(val, index, prop, num, 'lklkl');
|
||||
if (val) {
|
||||
if (prop === 'opType') {
|
||||
this.formData.msg = this.formArr[0].options.filter(
|
||||
(v) => v.value == val,
|
||||
)[0].label;
|
||||
}
|
||||
}
|
||||
},
|
||||
leftClick() {
|
||||
this.leftHide = !this.leftHide;
|
||||
},
|
||||
async init() {
|
||||
await this.getUserFlowOperationList();
|
||||
this.getFlowLog();
|
||||
this.getFlowCompareList();
|
||||
},
|
||||
invokeMethod(methodName) {
|
||||
if (typeof this[methodName] === 'function') {
|
||||
this[methodName]();
|
||||
} else {
|
||||
console.warn(`方法 ${methodName} 不存在`);
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.checkDialog = false;
|
||||
this.table.data = [];
|
||||
this.$emit('update:isShow', false);
|
||||
this.showCountdown = false;
|
||||
},
|
||||
handleViewProcess() {
|
||||
// 查看流程
|
||||
console.log('查看流程', this.selectRow);
|
||||
this.showProcess = true;
|
||||
},
|
||||
Agree() {
|
||||
// 同意
|
||||
this.dialogTitle = '同意';
|
||||
this.getBackTypeList();
|
||||
},
|
||||
Back() {
|
||||
// 退回发起
|
||||
this.dialogTitle = '退回发起';
|
||||
this.getBackTypeList();
|
||||
},
|
||||
getBackTypeList() {
|
||||
this.backDialog = true;
|
||||
this.$apis.getBackList({ codifierGrpCodes: 'QuickReply' }).then((res) => {
|
||||
this.formArr[0].options = res.data.result.QuickReply;
|
||||
});
|
||||
},
|
||||
async save() {
|
||||
if (this.$refs.publicForm.submitForm()) {
|
||||
console.log(this.formData, 'success');
|
||||
const temp = await this.$confirmAction(
|
||||
'确认提交该笔审批吗?',
|
||||
'warning',
|
||||
'审批',
|
||||
);
|
||||
if (temp) {
|
||||
this.$apis
|
||||
.backSubmit({ ...this.selectRow, ...this.formData })
|
||||
.then((res) => {
|
||||
this.$message.success(res.message);
|
||||
this.$parent.getTopSta();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log('error');
|
||||
}
|
||||
},
|
||||
dialogClose() {
|
||||
this.backDialog = false;
|
||||
this.$refs.publicForm.resetForm();
|
||||
},
|
||||
Reject() {
|
||||
// 退回上一步
|
||||
this.dialogTitle = '退回上一步';
|
||||
this.getBackTypeList();
|
||||
},
|
||||
NoPass() {
|
||||
// 拒绝
|
||||
this.dialogTitle = '拒绝';
|
||||
this.getBackTypeList();
|
||||
},
|
||||
CancelRequest() {
|
||||
// 取消申请
|
||||
this.dialogTitle = '取消申请';
|
||||
this.getBackTypeList();
|
||||
},
|
||||
StartModified() {
|
||||
// 发起修改
|
||||
this.dialogTitle = '发起修改';
|
||||
this.getBackTypeList();
|
||||
},
|
||||
Pass() { // 直接通过
|
||||
this.dialogTitle = '直接通过';
|
||||
this.getBackTypeList();
|
||||
},
|
||||
initCountdown() {
|
||||
this.showCountdown = false;
|
||||
this.deadline = moment().add(5, 'm').add(1, 's').format('YYYY-MM-DD HH:mm:ss');
|
||||
this.$nextTick(() => {
|
||||
this.showCountdown = true;
|
||||
});
|
||||
},
|
||||
async getUserFlowOperationList() {
|
||||
// 获取流程操作按钮
|
||||
const { taskId, dealNo } = this.selectRow;
|
||||
const obj = { 1: 'WAITING', 2: 'FINISH', 3: 'REFUSE', 4: 'MINE' };
|
||||
await this.$apis
|
||||
.getUserFlowOperations({
|
||||
queryParam: {
|
||||
taskId,
|
||||
dealNo,
|
||||
type: obj[this.activeIndex],
|
||||
isLogPage: false,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
this.operationList = res.data.result;
|
||||
// to-do 后续根据条件判断是否展示倒计时
|
||||
this.initCountdown();
|
||||
setTimeout(() => { // 延迟展示倒计时
|
||||
this.checkDialog = true;
|
||||
}, 1000);
|
||||
if (res.data.result.length === 0) {
|
||||
this.operationList = [
|
||||
{
|
||||
codeLocalName: '同意',
|
||||
codeName: 'Agree',
|
||||
},
|
||||
{
|
||||
codeLocalName: '退回发起',
|
||||
codeName: 'Back',
|
||||
},
|
||||
{
|
||||
codeLocalName: '退回上一步',
|
||||
codeName: 'Reject',
|
||||
},
|
||||
{
|
||||
codeLocalName: '拒绝',
|
||||
codeName: 'NoPass',
|
||||
},
|
||||
];
|
||||
}
|
||||
});
|
||||
},
|
||||
getFlowLog() {
|
||||
this.$apis
|
||||
.getFlowLogBySerialNoRepeat({
|
||||
actNo: this.selectRow.dealNo,
|
||||
})
|
||||
.then((res) => {
|
||||
this.processList = res.data.result.datals.map((v) => {
|
||||
return {
|
||||
...v,
|
||||
content:
|
||||
v.AssigneeId instanceof Array
|
||||
? v.AssigneeId.join(',')
|
||||
: v.AssigneeId,
|
||||
EndTime: v.EndTime ? dateFormat('YYYY-MM-DD HH:mm:ss', new Date(v.EndTime)) : '',
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
getFlowCompareList() {
|
||||
this.$apis
|
||||
.getFlowCompareData({ dealNo: this.selectRow.dealNo })
|
||||
.then((res) => {
|
||||
this.table.data = res.data.result.map((item) => {
|
||||
this.processItem.call(this, item);
|
||||
return item;
|
||||
});
|
||||
});
|
||||
},
|
||||
processItem(item) {
|
||||
// 检查并转换 formName
|
||||
const prefixes = ['field.', 'button.', 'form.', 'duration.'];
|
||||
if (item.formName && prefixes.some(prefix => item.formName.startsWith(prefix))) {
|
||||
item.formName = this.$t(item.formName);
|
||||
}
|
||||
// 如果有 children，递归处理
|
||||
if (Array.isArray(item.children)) {
|
||||
item.children.forEach((child) => this.processItem.call(this, child));
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.check-dialog {
|
||||
display: flex;
|
||||
.collapse {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
font-size: 24px;
|
||||
}
|
||||
.left-step {
|
||||
width: 300px;
|
||||
margin-right:5px;
|
||||
.step-list {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.step-content {
|
||||
background: #aaa;
|
||||
border: 1px solid #aaa;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.step-handle {
|
||||
background: #2f3949;
|
||||
border: 1px solid #2f3949;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
.right-table {
|
||||
width: calc(100% - 305px);
|
||||
max-height: 600px;
|
||||
}
|
||||
.table-box {
|
||||
height: 100%;
|
||||
}
|
||||
.right-auto {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="流程"
|
||||
:visible.sync="visibleDialog"
|
||||
width="80%"
|
||||
@close="close"
|
||||
>
|
||||
<div>这是流程弹窗</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
showProcess: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
selectRow: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visibleDialog: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
showProcess: {
|
||||
handler(nv) {
|
||||
this.visibleDialog = nv;
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
close() {
|
||||
console.log('关闭了');
|
||||
this.visibleDialog = false;
|
||||
this.$emit('update:showProcess', false);
|
||||
},
|
||||
getProcessData() {
|
||||
// 获取流程信息
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,389 @@
|
||||
<template>
|
||||
<div class="RCSbox approveIndex common-page">
|
||||
<FormSearch
|
||||
:form-arr="formArr"
|
||||
:form-data="formData"
|
||||
@outOperation="outOperation"
|
||||
@searchSubmit="searchSubmit"
|
||||
@reset="resetForm"
|
||||
/>
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
class="approve-tabs"
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in approveList"
|
||||
:key="item.label"
|
||||
:label="item.label"
|
||||
:name="item.value"
|
||||
>
|
||||
<span slot="label">
|
||||
<!-- <el-badge
|
||||
:value="item.count"
|
||||
:max="99"
|
||||
> -->
|
||||
<span>{{ item.label }}</span>
|
||||
<span>({{ item.count }})</span>
|
||||
<!-- </el-badge> -->
|
||||
</span>
|
||||
<PublicTable
|
||||
ref="table"
|
||||
class="table"
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:has-index="false"
|
||||
:need-select="true"
|
||||
:table-data="tableData"
|
||||
:table-info="tableInfo"
|
||||
:table-column="columns"
|
||||
:events="events"
|
||||
operation-width="150px"
|
||||
:btn-button="operations"
|
||||
:table-top-button="tableTopButton"
|
||||
:operation-fixed="true"
|
||||
:is-need-pagination="true"
|
||||
:current-page="searchParams.pageNum"
|
||||
:page-size="searchParams.pageSize"
|
||||
:total="total"
|
||||
:is-need-customcolumn="true"
|
||||
:is-need-export="true"
|
||||
:is-need-import="true"
|
||||
@sizeChange="handleSizeChange"
|
||||
@currentChange="handleCurrentChange"
|
||||
@customColumnChange="handleCustomColumnChange"
|
||||
@handleTableTopColumnIconClick="handleTableTopColumnIconClick"
|
||||
@handleSelectionChange="handleSelectionChange"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<ApproveDialog
|
||||
:is-show.sync="isShow"
|
||||
:select-row="clickRow"
|
||||
:active-index="activeName"
|
||||
/>
|
||||
<ProcessDialog
|
||||
:show-process.sync="showProcess"
|
||||
:select-row="clickRow"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ApproveDialog from './components/approveDialog.vue';
|
||||
import ProcessDialog from './components/processDialog.vue';
|
||||
import FormSearch from '@/components/formSearch/index.vue';
|
||||
import PublicTable from '@/components/table/index.vue';
|
||||
export default {
|
||||
components: {
|
||||
FormSearch,
|
||||
PublicTable,
|
||||
ApproveDialog,
|
||||
ProcessDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
showProcess: false,
|
||||
selection: [],
|
||||
clickRow: {},
|
||||
approveList: [
|
||||
{ label: '待处理', value: 1, count: '', key: 'waitNumber' },
|
||||
{ label: '已处理', value: 2, count: '', key: 'finishNumber' },
|
||||
{ label: '已拒绝', value: 3, count: '', key: 'refuseNumber' },
|
||||
{ label: '我发起', value: 4, count: '', key: 'mineNumber' },
|
||||
],
|
||||
activeName: 1,
|
||||
formArr: [
|
||||
{
|
||||
type: 'pickerDate',
|
||||
prop: 'dealDate',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '更新日期',
|
||||
type: 'daterange',
|
||||
'value-format': 'yyyy-MM-dd',
|
||||
'range-separator': '至',
|
||||
'start-placeholder': '开始日期',
|
||||
'end-placeholder': '结束日期',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'dealStatus',
|
||||
span: 4,
|
||||
attrs: {
|
||||
label: '审批状态',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'branchUser',
|
||||
span: 4,
|
||||
attrs: {
|
||||
label: '发起人',
|
||||
},
|
||||
},
|
||||
],
|
||||
// 默认值
|
||||
formData: {},
|
||||
loading: false,
|
||||
// table数据源
|
||||
tableData: [
|
||||
{
|
||||
dealStatusStr: '待审核',
|
||||
taskId: '961733',
|
||||
dealNo: '174168351287689',
|
||||
updateTimestamp: '2025-03-14 16:42:13',
|
||||
startdesc: '修改基础数据-债券',
|
||||
branchUserName: 'yhl',
|
||||
rcsSerialNo: 'sdsBond-ccc',
|
||||
type: 'WAITING',
|
||||
},
|
||||
{
|
||||
dealStatusStr: '审核通过',
|
||||
taskId: '',
|
||||
dealNo: '174131577541768',
|
||||
updateTimestamp: '2025-03-13 15:55:14',
|
||||
startdesc: '新增基础数据-账薄',
|
||||
branchUserName: 'yhl',
|
||||
rcsSerialNo: '11112222',
|
||||
type: 'WAITING',
|
||||
},
|
||||
],
|
||||
tableInfo: {
|
||||
// tableHeight: document.documentElement.clientHeight - 336,
|
||||
},
|
||||
// 表格项绑定的属性
|
||||
columns: [
|
||||
{
|
||||
prop: 'dealNo',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: this.$t('field.dealNo'),
|
||||
},
|
||||
{
|
||||
prop: 'dealStatusStr',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: this.$t('field.dealStatus'),
|
||||
},
|
||||
{
|
||||
prop: 'startdesc',
|
||||
minWidth: '200px',
|
||||
align: 'center',
|
||||
label: this.$t('field.startdesc'),
|
||||
},
|
||||
{
|
||||
prop: 'branchUserName',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: this.$t('field.branchUserName'),
|
||||
},
|
||||
{
|
||||
prop: 'rcsSerialNo',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: this.$t('field.businessNo'),
|
||||
},
|
||||
{
|
||||
prop: 'updateTimestamp',
|
||||
minWidth: '160px',
|
||||
align: 'center',
|
||||
label: this.$t('field.updateTimestamp'),
|
||||
},
|
||||
],
|
||||
// 表格行单机双击事件
|
||||
events: {
|
||||
'row-dblclick': async(row) => {
|
||||
// 双击表格 行 触发的函数
|
||||
console.log('row-dblclick', row);
|
||||
this.clickRow = Object.assign({}, row);
|
||||
this.isShow = true;
|
||||
},
|
||||
// 'row-click': (row) => {
|
||||
// // 单机表格 行 触发的函数
|
||||
// console.log('row-click', row);
|
||||
// },
|
||||
},
|
||||
// 操作栏自定义按钮
|
||||
operations: [
|
||||
{
|
||||
text: this.$t('button.viewProcess'),
|
||||
type: 'text',
|
||||
class: 'el-text-color',
|
||||
callback: (row) => {
|
||||
event.stopPropagation();
|
||||
this.handleViewProcess(row);
|
||||
},
|
||||
},
|
||||
],
|
||||
tableTopButton: [
|
||||
{
|
||||
text: this.$t('button.approvalBatch'),
|
||||
type: 'default',
|
||||
class: 'el-text-color',
|
||||
disabled: true,
|
||||
callback: (value) => {
|
||||
this.handleBatchCheck(value);
|
||||
},
|
||||
},
|
||||
],
|
||||
// 搜索查询的参数
|
||||
searchParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
this.getTopSta();
|
||||
this.getOptions();
|
||||
// this.queryPage();
|
||||
console.log(this.$route.meta.extraData.extraParams.type, 'tt');
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab.name, 'item');
|
||||
this.activeName = tab.name;
|
||||
this.searchParams.dealStatus = tab.name;
|
||||
this.queryPage();
|
||||
},
|
||||
searchSubmit(val) {
|
||||
console.log('search结果', val);
|
||||
this.searchParams = { ...this.searchParams, ...val };
|
||||
this.queryPage();
|
||||
},
|
||||
resetForm() {
|
||||
this.formData = {};
|
||||
},
|
||||
outOperation(val, index, prop, num) {
|
||||
console.log(val, index, prop, num);
|
||||
},
|
||||
// 页面展示条数改变事件-pageSize
|
||||
handleSizeChange(pageSize) {
|
||||
this.searchParams.pageSize = pageSize;
|
||||
this.queryPage();
|
||||
},
|
||||
// 页面切换事件-pageNum
|
||||
handleCurrentChange(pageNum) {
|
||||
this.searchParams.pageNum = pageNum;
|
||||
this.queryPage();
|
||||
},
|
||||
handleViewProcess(row) {
|
||||
// 查看流程
|
||||
console.log('查看流程', row);
|
||||
this.showProcess = true;
|
||||
this.clickRow = Object.assign({}, row);
|
||||
},
|
||||
// 数据列确定修改事件
|
||||
handleCustomColumnChange(val) {
|
||||
// console.log('数据列确定修改事件',val);
|
||||
// this.tableData = mockData2;
|
||||
},
|
||||
// 多选事件
|
||||
handleSelectionChange(val) {
|
||||
console.log('多选事件 ', val);
|
||||
this.selection = val;
|
||||
},
|
||||
// 自定义按钮 点击事件
|
||||
async handleBatchCheck(val) {
|
||||
// 批量审批
|
||||
console.log('自定义按钮', val);
|
||||
if (!this.selection.length > 0) {
|
||||
const temp = await this.$confirmAction(
|
||||
'至少选择一条审批流程?',
|
||||
'warning',
|
||||
'批量审批',
|
||||
);
|
||||
return temp;
|
||||
}
|
||||
this.$apis
|
||||
.batchCheck({ strategy: 'agree', approveList: this.selection })
|
||||
.then((res) => {
|
||||
console.log(res, '确定回调---');
|
||||
this.$message.success('请求成功');
|
||||
});
|
||||
},
|
||||
async queryPage() {
|
||||
console.log(this, 'this.extraParams');
|
||||
const pageType = { 1: 'WAITING', 2: 'FINISH', 3: 'REFUSE', 4: 'MINE' };
|
||||
const params = {
|
||||
...this.searchParams,
|
||||
dataType: this.$route.meta.extraData.extraParams.type,
|
||||
queryPageType: pageType[this.activeName],
|
||||
};
|
||||
if (params.dealDate && params.dealDate.length > 0) {
|
||||
params.dealDateStart = this.searchParams.dealDate[0];
|
||||
params.dealDateEnd = this.searchParams.dealDate[1];
|
||||
}
|
||||
delete params.dealDate;
|
||||
const obj = {
|
||||
1: this.$apis.getParamsList,
|
||||
2: this.$apis.getFinishList,
|
||||
3: this.$apis.getRefuseList,
|
||||
4: this.$apis.getInitiateList,
|
||||
};
|
||||
this.loading = true;
|
||||
const res = await obj[this.activeName](params);
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.tableData = res.data.result.datals;
|
||||
this.total = res.data.result.total;
|
||||
}
|
||||
},
|
||||
getTopSta() {
|
||||
this.$apis.getParamsStaList({ queryParam: { dataType: this.$route.meta.extraData.extraParams.type }}).then((res) => {
|
||||
this.approveList.forEach((v, i) => {
|
||||
v.count = res.data.result[v.key];
|
||||
});
|
||||
});
|
||||
},
|
||||
getOptions() {
|
||||
this.$apis
|
||||
.getApproveData({ codifierGrpCodes: 'ApproveStatus' })
|
||||
.then((res) => {
|
||||
this.formArr[1].options = res.data.result.ApproveStatus;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.approveIndex {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// overflow:hidden;
|
||||
.table-box{
|
||||
height:100% !important
|
||||
}
|
||||
}
|
||||
.approve-tabs{
|
||||
height:100%;
|
||||
background:var(--bg-color-2);
|
||||
border-radius:4px;
|
||||
}
|
||||
:deep(.el-tabs__content){
|
||||
display: flex;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
:deep(.el-badge__content.is-fixed) {
|
||||
top: 10px !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
:deep(.el-badge){
|
||||
color: var(--color-90);
|
||||
}
|
||||
|
||||
// :deep(.el-tabs__item:hover){
|
||||
// background-color:rgba(255, 255, 255, 0.05) !important
|
||||
// }
|
||||
// :deep(.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active){
|
||||
// background-color:rgb(64,80,101)
|
||||
// }
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<Views url="getDesignPage.action?funcId=1916336275570130946" />
|
||||
<!-- <CustomTable
|
||||
ref="table"
|
||||
:key="tableKey"
|
||||
v-loading="loading"
|
||||
:configs="tableConfig"
|
||||
:data="tableData"
|
||||
:border="true"
|
||||
/> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CustomTable } from '@erayt/titanOne-component-vue';
|
||||
export default {
|
||||
components: {
|
||||
CustomTable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
tableConfig: [
|
||||
{
|
||||
label: this.$t('field.fatherTransactionSerialNumber'),
|
||||
name: 'parentId',
|
||||
headerAlign: 'center',
|
||||
align: 'left',
|
||||
width: 120,
|
||||
},
|
||||
],
|
||||
loading: false,
|
||||
currentPage: 1,
|
||||
pageSize: 50,
|
||||
total: null,
|
||||
tableKey: 1,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div>
|
||||
这是sdp弹窗{{ loadOptions.extraParams.customData.dealId }}
|
||||
<div
|
||||
class="footer-btns"
|
||||
>
|
||||
<el-button
|
||||
:size="$buttonSize"
|
||||
@click="cancel"
|
||||
>取 消</el-button>
|
||||
<el-button
|
||||
:size="$buttonSize"
|
||||
type="primary"
|
||||
@click="confirm"
|
||||
>确 定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ScopeIdMixin from '../../../mixins/ScopeIdMixin';
|
||||
export default {
|
||||
mixins: [ScopeIdMixin],
|
||||
data() {
|
||||
return {
|
||||
// loadOptions: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// const loadOptions = this.loadOptions;
|
||||
console.log('参数', this.loadOptions.extraParams);
|
||||
},
|
||||
methods: {
|
||||
confirm() {
|
||||
// to-do
|
||||
Eui.closeVueWin(this.loadOptions.extraParams.dialogId);
|
||||
Eui.sdp.refreshActivitedTableByIds(this.loadOptions.extraParams.activitedTableId);
|
||||
},
|
||||
cancel() {
|
||||
Eui.closeVueWin(this.loadOptions.extraParams.dialogId);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footer-btns{
|
||||
display:flex;
|
||||
justify-content: end;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,397 @@
|
||||
<template>
|
||||
<div class="bond-details-modal">
|
||||
<div class="modal-header">
|
||||
<h2>债券详情</h2>
|
||||
<button
|
||||
class="close-btn"
|
||||
@click="closeModal"
|
||||
>
|
||||
<span class="close-icon">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-content">
|
||||
<div class="bond-title">
|
||||
<div class="bond-icon">
|
||||
<span>券</span>
|
||||
</div>
|
||||
<div class="bond-code">231705.BC</div>
|
||||
</div>
|
||||
|
||||
<div class="bond-basic-info">
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<div class="info-label">ISIN编码</div>
|
||||
<div class="info-value">231705.BC</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">债券名称</div>
|
||||
<div class="info-value">231705.BC</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<div
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
:class="['tab', { active: activeTab === index }]"
|
||||
@click="activeTab = index"
|
||||
>
|
||||
{{ tab }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="activeTab === 0"
|
||||
class="tab-content"
|
||||
>
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-indicator" />
|
||||
<div class="section-title">基本信息</div>
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="grid-item">
|
||||
<div class="grid-label">发行面值</div>
|
||||
<div class="grid-value">100,000,000.00</div>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<div class="grid-label">货币</div>
|
||||
<div class="grid-value">CNY</div>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<div class="grid-label">起息日</div>
|
||||
<div class="grid-value">2024-08-05</div>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<div class="grid-label">利息类型</div>
|
||||
<div class="grid-value">FIXED</div>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<div class="grid-label">到期日</div>
|
||||
<div class="grid-value">2024-08-05</div>
|
||||
<div class="tag">标签内容（可选）</div>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<div class="grid-label">付息频率</div>
|
||||
<div class="grid-value">3M</div>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<div class="grid-label">票面利率</div>
|
||||
<div class="grid-value">4.2500</div>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<div class="grid-label">含权</div>
|
||||
<div class="grid-value">否</div>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<div class="grid-label">计息基础</div>
|
||||
<div class="grid-value">ACT_360(SIMPLE)</div>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<div class="grid-label">调整惯例</div>
|
||||
<div class="grid-value">None</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-indicator" />
|
||||
<div class="section-title">发行信息</div>
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="grid-item">
|
||||
<div class="grid-label">发行日期</div>
|
||||
<div class="grid-value">2024-08-05</div>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<div class="grid-label">发行价</div>
|
||||
<div class="grid-value">100.000000</div>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<div class="grid-label">发行量(亿)</div>
|
||||
<div class="grid-value">100.00</div>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<div class="grid-label">退市日期</div>
|
||||
<div class="grid-value">银行间</div>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<div class="grid-label">区域</div>
|
||||
<div class="grid-value">中国</div>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<div class="grid-label">发行类型</div>
|
||||
<div class="grid-value">一级</div>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<div class="grid-label">发行人</div>
|
||||
<div class="grid-value">黄阳银行股份有限公司</div>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<div class="grid-label">担保级别</div>
|
||||
<div class="grid-value">其他</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-indicator" />
|
||||
<div class="section-title">评级类型</div>
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="grid-item">
|
||||
<div class="grid-label">评级类型</div>
|
||||
<div class="grid-value">zy评级</div>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<div class="grid-label">评级机构</div>
|
||||
<div class="grid-value">zy评级</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-cancel">取消</button>
|
||||
<button class="btn btn-confirm">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BondDetails',
|
||||
data() {
|
||||
return {
|
||||
activeTab: 0,
|
||||
tabs: ['债券信息', '现金流', '计息表'],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
closeModal() {
|
||||
this.$emit('close');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bond-details-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #222839;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #2a2f3e;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), transparent);
|
||||
background-size: 100% 200px;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bond-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.bond-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #3a5ccc;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.bond-code {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bond-basic-info {
|
||||
padding: 0 20px 16px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: #8c8c8c;
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #2a2f3e;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 12px 20px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tab.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #3a5ccc;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-indicator {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background-color: #3a5ccc;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.grid-label {
|
||||
color: #8c8c8c;
|
||||
font-size: 14px;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.grid-value {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: #2a3a5c;
|
||||
color: #8c9cbc;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid #2a2f3e;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background-color: #222839;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 20px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background-color: transparent;
|
||||
border: 1px solid #3a3f4e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
background-color: #3a5ccc;
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="dcs_details">
|
||||
<TopModule :value="blocks?.topBlock" />
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<el-tab-pane
|
||||
:label="$t('field.baseInfo')"
|
||||
name="first"
|
||||
>
|
||||
<FieldsModule :value="blocks?.fieldBlock" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
:label="$t('form.riskInfo')"
|
||||
name="second"
|
||||
/>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import request from '@/http/request.js';
|
||||
import TopModule from './module/TopModule.vue';
|
||||
import FieldsModule from './module/FieldsModule.vue';
|
||||
import FXSPOT from './settingTemplate/FXSPOT.json';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import { parseDeep } from './utils';
|
||||
export default {
|
||||
name: 'DcsDetails',
|
||||
components: {
|
||||
TopModule,
|
||||
FieldsModule,
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
'globalData': this.globalData,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: Number || String,
|
||||
default: '',
|
||||
},
|
||||
dealId: {
|
||||
type: Number || String,
|
||||
default: '',
|
||||
},
|
||||
product: {
|
||||
type: Number || String,
|
||||
default: '',
|
||||
},
|
||||
instrument: {
|
||||
type: Number || String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
template: FXSPOT, // TODO 默认外汇即期配置
|
||||
blocks: null,
|
||||
globalData: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log('DcsDetails created');
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
},
|
||||
async initData() {
|
||||
if (!this.dealId || !this.product || !this.instrument) {
|
||||
console.error('Failed load Details!');
|
||||
return;
|
||||
}
|
||||
let globalData = {};
|
||||
const results = await Promise.all([this.queryList(this.dealId), this.queryInputParam(this.product)]);
|
||||
globalData = Object.assign(results[0], results[1]);
|
||||
this.globalData = globalData;
|
||||
|
||||
const template = cloneDeep(this.template);
|
||||
const hash = new WeakMap([]);
|
||||
this.blocks = await parseDeep(globalData, template, hash);
|
||||
console.log('this.blocks', this.blocks);
|
||||
},
|
||||
async queryList(dealId) {
|
||||
// TOOD 旧接口查询交易信息
|
||||
const result = await request({
|
||||
url: 'dcs/dcs/dealQuery/queryList.action',
|
||||
method: 'post',
|
||||
data: { 'queryParam.dealId': dealId },
|
||||
});
|
||||
return result.data.result[0];
|
||||
},
|
||||
async queryInputParam(product) {
|
||||
// TOOD 旧接口查询模板和交易基本信息
|
||||
const result = await request({
|
||||
url: 'dcs/dcs/queryInputParam.action',
|
||||
method: 'post',
|
||||
data: { 'product': product },
|
||||
});
|
||||
return result.data.result;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,273 @@
|
||||
export const fieldModuleData = [
|
||||
{
|
||||
'type': 'module',
|
||||
'label': '',
|
||||
'prefix': '',
|
||||
'value': '交易信息',
|
||||
'suffix': '',
|
||||
'children': [
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '债券代码',
|
||||
'prefix': '（前缀）前缀',
|
||||
'value': '231705.BC',
|
||||
'suffix': '后缀（后缀）',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '简称',
|
||||
'prefix': '',
|
||||
'value': '231705.BC',
|
||||
'suffix': '',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '交易方向',
|
||||
'prefix': '',
|
||||
'value': '买入',
|
||||
'suffix': '',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '交易成交时间',
|
||||
'prefix': '',
|
||||
'value': '2025-4-10 14:23:34',
|
||||
'suffix': '',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '结算日',
|
||||
'prefix': '',
|
||||
'value': '2025-04-01',
|
||||
'suffix': '',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '券面总额',
|
||||
'prefix': '',
|
||||
'value': '2,000,000.00',
|
||||
'suffix': '万元',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '净价',
|
||||
'prefix': '',
|
||||
'value': '3.0000',
|
||||
'suffix': '元',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '净价总额',
|
||||
'prefix': '',
|
||||
'value': '60,000.00',
|
||||
'suffix': '元',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '全价',
|
||||
'prefix': '',
|
||||
'value': '2.0000',
|
||||
'suffix': '元',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '全价总额',
|
||||
'prefix': '',
|
||||
'value': '60,000.00',
|
||||
'suffix': '元',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '应计利息',
|
||||
'prefix': '',
|
||||
'value': '0.12',
|
||||
'suffix': '元',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '应计利息总额',
|
||||
'prefix': '',
|
||||
'value': '1,000,000.00',
|
||||
'suffix': '元',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '收益率',
|
||||
'prefix': '',
|
||||
'value': '12.00',
|
||||
'suffix': '%',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '',
|
||||
'prefix': '',
|
||||
'value': '',
|
||||
'suffix': '',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '清算方式',
|
||||
'prefix': '',
|
||||
'value': '-',
|
||||
'suffix': '',
|
||||
'children': [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
'type': 'module',
|
||||
'label': '',
|
||||
'prefix': '',
|
||||
'value': '交易账户',
|
||||
'suffix': '',
|
||||
'children': [
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '账户',
|
||||
'prefix': '',
|
||||
'value': 'CNYSHBOND',
|
||||
'suffix': '',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '账户名称',
|
||||
'prefix': '',
|
||||
'value': '本币债券SH',
|
||||
'suffix': '',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '交易对手',
|
||||
'prefix': '',
|
||||
'value': '0007F9UZE',
|
||||
'suffix': '',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '对手名称',
|
||||
'prefix': '',
|
||||
'value': '山东高唐农村商业银行股份有限公司',
|
||||
'suffix': '',
|
||||
'children': [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
'type': 'module',
|
||||
'label': '',
|
||||
'prefix': '',
|
||||
'value': '交易账户',
|
||||
'suffix': '',
|
||||
'children': [
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '账户',
|
||||
'prefix': '',
|
||||
'value': 'CNYSHBOND',
|
||||
'suffix': '',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '账户名称',
|
||||
'prefix': '',
|
||||
'value': '本币债券SH',
|
||||
'suffix': '',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '交易对手',
|
||||
'prefix': '',
|
||||
'value': '0007F9UZE',
|
||||
'suffix': '',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '对手名称',
|
||||
'prefix': '',
|
||||
'value': '山东高唐农村商业银行股份有限公司',
|
||||
'suffix': '',
|
||||
'children': [],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const topModuleData = [
|
||||
{
|
||||
'type': 'module',
|
||||
'label': '',
|
||||
'prefix': '',
|
||||
'value': '',
|
||||
'suffix': '',
|
||||
'children': [
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '用户',
|
||||
'prefix': '',
|
||||
'value': 'wxx',
|
||||
'suffix': '',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '录入日期',
|
||||
'prefix': '（前缀）前缀',
|
||||
'value': '2024-05-18 08:45:00',
|
||||
'suffix': '后缀（后缀）',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '交易流水号',
|
||||
'prefix': '',
|
||||
'value': '20106003284',
|
||||
'suffix': '',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '簿记架构',
|
||||
'prefix': '',
|
||||
'value': '总行/自动化测试货币掉期账簿/本币债券',
|
||||
'suffix': '',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '来源',
|
||||
'prefix': '',
|
||||
'value': 'RCS',
|
||||
'suffix': '',
|
||||
'children': [],
|
||||
},
|
||||
{
|
||||
'type': 'field',
|
||||
'label': '来源流水号',
|
||||
'prefix': '',
|
||||
'value': 'BOND123940503',
|
||||
'suffix': '',
|
||||
'children': [],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="fields_module">
|
||||
<TemplateComponent
|
||||
v-for="(child, index) in value"
|
||||
:key="'fields-module-child' + index"
|
||||
:value="child"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TemplateComponent from '../template/TemplateComponent.vue';
|
||||
export default {
|
||||
name: 'TopModule',
|
||||
components: {
|
||||
TemplateComponent,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.fields_module {
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="top_module">
|
||||
<TemplateComponent
|
||||
v-for="(child, index) in value"
|
||||
:key="'top-module-child' + index"
|
||||
:value="child"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TemplateComponent from '../template/TemplateComponent.vue';
|
||||
export default {
|
||||
name: 'TopModule',
|
||||
components: {
|
||||
TemplateComponent,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.top_module {
|
||||
height: 112px;
|
||||
background: url('../../../assets/details_top_module.png') no-repeat center/cover border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
+194
@@ -0,0 +1,194 @@
|
||||
{
|
||||
"topBlock": [
|
||||
{
|
||||
"type": "module",
|
||||
"label": "",
|
||||
"prefix": "",
|
||||
"value": "",
|
||||
"suffix": "",
|
||||
"children": [
|
||||
{
|
||||
"type": "field",
|
||||
"label": "用户",
|
||||
"prefix": "",
|
||||
"value": "{{takerId}}",
|
||||
"suffix": "",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "field",
|
||||
"label": "录入日期",
|
||||
"prefix": "",
|
||||
"value": "{{captureTime}}",
|
||||
"suffix": "",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "field",
|
||||
"label": "交易流水号",
|
||||
"prefix": "",
|
||||
"value": "{{dealId}}",
|
||||
"suffix": "",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "field",
|
||||
"label": "簿记架构",
|
||||
"prefix": "",
|
||||
"value": "{{folder}}",
|
||||
"suffix": "",
|
||||
"children": [],
|
||||
|
||||
"request": {
|
||||
"need": "true",
|
||||
"type": "field",
|
||||
"url": "/dcs/dcs/getHierarchy.action",
|
||||
"param": {},
|
||||
"data": {
|
||||
"folderCode": "{{folder}}"
|
||||
},
|
||||
"returnField": "result"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "field",
|
||||
"label": "来源",
|
||||
"prefix": "",
|
||||
"value": "{{sourceName}}",
|
||||
"suffix": "",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "field",
|
||||
"label": "来源流水号",
|
||||
"prefix": "",
|
||||
"value": "{{globalId}}",
|
||||
"suffix": "",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"fieldBlock": [
|
||||
{
|
||||
"type": "module",
|
||||
"label": "",
|
||||
"prefix": "",
|
||||
"value": "交易信息",
|
||||
"suffix": "",
|
||||
"children": [
|
||||
{
|
||||
"type": "field",
|
||||
"label": "货币对",
|
||||
"prefix": "",
|
||||
"value": "{{underlying}}",
|
||||
"suffix": "",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "field",
|
||||
"label": "即期汇率",
|
||||
"prefix": "",
|
||||
"value": "{{spotRate}}",
|
||||
"suffix": "",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "field",
|
||||
"label": "金额",
|
||||
"prefix": "{{ccy1}}",
|
||||
"value": "{{amount1}}",
|
||||
"suffix": "",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "field",
|
||||
"label": "金额",
|
||||
"prefix": "{{ccy2}}",
|
||||
"value": "{{amount2}}",
|
||||
"suffix": "",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "field",
|
||||
"label": "交易日期",
|
||||
"prefix": "",
|
||||
"value": "{{tradeDate}}",
|
||||
"suffix": "{{tradeTime}}",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "field",
|
||||
"label": "起息日",
|
||||
"prefix": "",
|
||||
"value": "{{maturityDate}}",
|
||||
"suffix": "",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "module",
|
||||
"label": "",
|
||||
"prefix": "",
|
||||
"value": "交易账户",
|
||||
"suffix": "",
|
||||
"children": [
|
||||
{
|
||||
"type": "field",
|
||||
"label": "账户",
|
||||
"prefix": "",
|
||||
"value": "{{folder}}",
|
||||
"suffix": "",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "field",
|
||||
"label": "账户名称",
|
||||
"prefix": "",
|
||||
"value": "{{folder}}",
|
||||
"suffix": "",
|
||||
"children": [],
|
||||
|
||||
"request": {
|
||||
"need": "true",
|
||||
"type": "field",
|
||||
"url": "dcs/dcs/queryFolderById.action",
|
||||
"param": {},
|
||||
"data": {
|
||||
"code": "{{folder}}"
|
||||
},
|
||||
"returnField": "result.localName"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "field",
|
||||
"label": "交易对手",
|
||||
"prefix": "",
|
||||
"value": "{{cpty}}",
|
||||
"suffix": "",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "field",
|
||||
"label": "对手名称",
|
||||
"prefix": "",
|
||||
"value": "{{cpty}}",
|
||||
"suffix": "",
|
||||
"children": [],
|
||||
|
||||
"request": {
|
||||
"need": "true",
|
||||
"type": "field",
|
||||
"url": "dcs/dcs/queryCptyName.action",
|
||||
"param": {},
|
||||
"data": {
|
||||
"code": "{{cpty}}"
|
||||
},
|
||||
"returnField": "result"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
+122
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="field_template">
|
||||
<div
|
||||
v-if="value.label"
|
||||
class="label"
|
||||
>{{ value.label }}</div>
|
||||
<div
|
||||
class="right"
|
||||
>
|
||||
<span
|
||||
v-if="value.prefix"
|
||||
class="prefix"
|
||||
>{{ value.prefix }}</span>
|
||||
<span
|
||||
v-if="!isRequestValueShow && value.value"
|
||||
class="value"
|
||||
>{{ value.value }}</span>
|
||||
<span
|
||||
v-if="isRequestValueShow"
|
||||
class="value"
|
||||
>{{ requestValue }}</span>
|
||||
<span
|
||||
v-if="value.suffix"
|
||||
class="suffix"
|
||||
>{{ value.suffix }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import request from '@/http/request.js';
|
||||
import { findDeepValue } from '../utils';
|
||||
export default {
|
||||
name: 'FieldTemplate',
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isRequestValueShow: false,
|
||||
requestValue: '-',
|
||||
parseReturn: {
|
||||
'enum': async function(data, code) {
|
||||
// TODO 默认接口和格式，待完善
|
||||
// /dcs/dcs/queryComboxData.action
|
||||
// {
|
||||
// "id": "5005",
|
||||
// "value": "SH000000H",
|
||||
// "text": "上海AMC"
|
||||
// }
|
||||
|
||||
},
|
||||
'field': async function(data, field) {
|
||||
return findDeepValue(data, field);
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
const { request } = this.value;
|
||||
console.log('request', request);
|
||||
if (request && request?.need) {
|
||||
console.log('request init', request);
|
||||
this.isRequestValueShow = true;
|
||||
this.requestValue = await this.query(request);
|
||||
}
|
||||
},
|
||||
async query({ type, url, param, data, returnField }) {
|
||||
const result = await request({
|
||||
url: url,
|
||||
method: 'post',
|
||||
data: data,
|
||||
param: param,
|
||||
});
|
||||
if (result.success) {
|
||||
const returnValue = await this.parseReturn[type](result.data, returnField);
|
||||
return returnValue;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.field_template {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
line-height: 20px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
font-size: 12px;
|
||||
cursor: text;
|
||||
.label {
|
||||
width: 80px;
|
||||
text-align: left;
|
||||
color: var(--application-color-5);
|
||||
}
|
||||
.right {
|
||||
flex-grow: 1;
|
||||
text-align: left;
|
||||
.prefix {
|
||||
color: var(--application-color-6);
|
||||
padding-right: 4px;
|
||||
}
|
||||
.value {
|
||||
color: var(--application-color-3);
|
||||
}
|
||||
.suffix {
|
||||
padding-left: 4px;
|
||||
color: var(--application-color-6);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div class="module_template">
|
||||
<div class="module">
|
||||
<div
|
||||
v-if="value?.value"
|
||||
class="title"
|
||||
>{{ value.value }}</div>
|
||||
<div
|
||||
v-if="value?.children && value?.children.length > 0"
|
||||
class="fields"
|
||||
>
|
||||
<TemplateComponent
|
||||
v-for="(child, index) in value.children"
|
||||
:key="'module-template-child' + index"
|
||||
class="field"
|
||||
:value="child"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TemplateComponent from './TemplateComponent.vue';
|
||||
export default {
|
||||
name: 'ModuleTemplate',
|
||||
components: {
|
||||
TemplateComponent,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.module_template {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 6px 0 6px 0;
|
||||
.module {
|
||||
width: 100%;
|
||||
}
|
||||
.title {
|
||||
position: relative;
|
||||
margin-left: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: var(--application-color-2);
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
padding-left: 12px;
|
||||
text-align: left;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
border-radius: 1.5px;
|
||||
background-color: var(--primary-color-1);
|
||||
top: 50%;
|
||||
left: 0px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
.fields {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0px 16px 0 16px;
|
||||
.field:nth-child(n+1) {
|
||||
width: 34%;
|
||||
}
|
||||
.field:nth-child(2n) {
|
||||
flex: 64%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<component
|
||||
:is="DynamicComponent"
|
||||
v-if="DynamicComponent"
|
||||
:value="value"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'TemplateComponent',
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
DynamicComponent: null,
|
||||
dynamicComponentMap: {
|
||||
'module': () => import(/* webpackChunkName: "ModuleTemplate" */ './ModuleTemplate.vue'),
|
||||
'field': () => import(/* webpackChunkName: "FieldTemplate" */ './FieldTemplate.vue'),
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// console.log('TemplateComponent value', this.value);
|
||||
this.loadComponent(this.value?.type);
|
||||
},
|
||||
methods: {
|
||||
loadComponent(type) {
|
||||
// console.log('loadComponent type', type);
|
||||
this.dynamicComponentMap[type]()
|
||||
.then((component) => {
|
||||
this.DynamicComponent = component.default || component;
|
||||
}).catch((error) => {
|
||||
console.error('Failed Load COmponent ', error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.module_template {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,54 @@
|
||||
function isObject(value) {
|
||||
return value !== null && (typeof value === 'object' || typeof value === 'function');
|
||||
}
|
||||
|
||||
const partternField = /^\{{2}(.*)\}{2}$/;
|
||||
function replaceField(globalData, field) {
|
||||
if (field && partternField.test(field)) { return globalData[field.replace(partternField, '$1')]; }
|
||||
return field;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据数据源解析模板变量
|
||||
* @param {*} globalData
|
||||
* @param {*} source
|
||||
* @param {*} hash
|
||||
* @returns
|
||||
*/
|
||||
export async function parseDeep(globalData, source, hash = new WeakMap()) {
|
||||
if (!isObject(source)) return replaceField(globalData, source);
|
||||
if (hash.has(source)) return hash.get(source);
|
||||
|
||||
var target = Array.isArray(source) ? [] : {};
|
||||
hash.set(source, target);
|
||||
|
||||
for (var key in source) {
|
||||
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||
if (isObject(source[key])) {
|
||||
target[key] = await parseDeep(globalData, source[key], hash);
|
||||
} else {
|
||||
target[key] = replaceField(globalData, source[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return target;
|
||||
}
|
||||
|
||||
/**
|
||||
* 递归遍历字段
|
||||
* @param {*} obj
|
||||
* @param {*} targetPath
|
||||
* @returns
|
||||
*/
|
||||
export function findDeepValue(obj, targetPath) {
|
||||
const keys = targetPath.split('.');
|
||||
let current = obj;
|
||||
for (const key of keys) {
|
||||
if (current.hasOwnProperty(key)) {
|
||||
current = current[key];
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
return current;
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="dcs_details_dialog">
|
||||
<RCSDialog
|
||||
:title="title"
|
||||
:visible="dialogVisible"
|
||||
:before-close="rcsDialogbeforeClose['details']"
|
||||
:destroy-on-close="true"
|
||||
:paddingempty="true"
|
||||
>
|
||||
<template #default>
|
||||
<DcsDetails
|
||||
v-if="dialogVisible"
|
||||
:deal-id="dealId"
|
||||
:product="product"
|
||||
:instrument="instrument"
|
||||
/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="footer">
|
||||
<el-button
|
||||
@click="rcsDialogBtnEvent['detailsClose']"
|
||||
>{{ $t('button.close') }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</RCSDialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import RCSDialog from '@/components/RCSDialog';
|
||||
import DcsDetails from '../DcsDetails';
|
||||
export default {
|
||||
name: 'DcsDetailsDialog',
|
||||
components: {
|
||||
RCSDialog,
|
||||
DcsDetails,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
dealId: {
|
||||
type: String || Number,
|
||||
default: '',
|
||||
},
|
||||
product: {
|
||||
type: String || Number,
|
||||
default: '',
|
||||
},
|
||||
instrument: {
|
||||
type: String || Number,
|
||||
default: '',
|
||||
},
|
||||
onClose: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
rcsDialogbeforeClose: {
|
||||
'details': (done) => {
|
||||
console.log('before-close');
|
||||
this.close();
|
||||
},
|
||||
},
|
||||
rcsDialogBtnEvent: {
|
||||
'detailsClose': () => {
|
||||
this.close();
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
visible(newVal) {
|
||||
// console.log('DcsDetailsDialog->prop->visible', newVal);
|
||||
this.dialogVisible = newVal;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.dialogVisible = false;
|
||||
this.$emit('close');
|
||||
if (this.onClose) {
|
||||
this.onClose();
|
||||
}
|
||||
},
|
||||
show() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div class="nodeline">
|
||||
<div class="container">
|
||||
<div
|
||||
v-if="!disableLine"
|
||||
:class="'line ' + lineType"
|
||||
/>
|
||||
<div :class="{'mark': true, 'top': showTopMark, 'bottom': showBottomMark}" />
|
||||
<div :class="'point ' + pointType" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'NodeLine',
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
disableLine: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showTopMark: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showBottomMark: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
pointType: {
|
||||
type: String,
|
||||
default: 'default', // default | primary
|
||||
},
|
||||
lineType: {
|
||||
type: String,
|
||||
default: 'default', // default | primary
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@mixin point-nodes($before-bg-color, $after-bg-color) {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: $before-bg-color;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: $after-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.nodeline {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 24px;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.point {
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
top: 8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
&.primary {
|
||||
@include point-nodes(var(--primary-color-3), var(--primary-color-1))
|
||||
}
|
||||
&.default {
|
||||
@include point-nodes(var(--application-color-7), var(--application-color-4))
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
border: 1px dashed var(--primary-color-1);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
&.default {
|
||||
border: 1px dashed var(--application-color-7);
|
||||
}
|
||||
&.primary {
|
||||
border: 1px dashed var(--primary-color-1);
|
||||
}
|
||||
}
|
||||
|
||||
.mark {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
&.top::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
height: 12px;
|
||||
width: 100%;
|
||||
background-color: var(--bg-color-2);
|
||||
}
|
||||
&.bottom::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
height: calc(100% - 16px - 4px);
|
||||
width: 100%;
|
||||
background-color: var(--bg-color-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<span class="high_light">
|
||||
<span @click="handleCLick['detail']">{{ value }}</span>
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'HighLight',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: String || Number,
|
||||
default: '',
|
||||
},
|
||||
rowData: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
dialogTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
action: {
|
||||
type: String, // detail (交易明细)
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dcsDetailsDialogVisible: false,
|
||||
handleCLick: {
|
||||
'detail': () => {
|
||||
// console.log('this.rowData', this.rowData);
|
||||
|
||||
// TODO 存在节点销毁失败和性能问题，插件后续优化
|
||||
this.$dcsDetailsDialog({
|
||||
title: this.dialogTitle,
|
||||
dealId: this.rowData?.dealId,
|
||||
product: this.rowData?.product,
|
||||
instrument: this.rowData?.instrument,
|
||||
onClose: () => {
|
||||
console.log('close decDetailsDialog');
|
||||
// 在这里处理取消事件
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.high_light {
|
||||
cursor: pointer;
|
||||
color: #017BFF;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="trade_print">
|
||||
<iframe
|
||||
ref="iframe"
|
||||
width="100%"
|
||||
height="100%"
|
||||
sandbox="allow-same-origin allow-scripts allow-forms allow-modals"
|
||||
@load="onIframeLoad"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { queryDealReceipt, queryDealQueryList } from '@/api/dcsApi';
|
||||
import { isEmpty } from 'lodash';
|
||||
export default {
|
||||
name: 'TradePrint',
|
||||
props: {
|
||||
dealId: {
|
||||
type: Number || String,
|
||||
default: '',
|
||||
},
|
||||
product: {
|
||||
type: Number || String,
|
||||
default: '',
|
||||
},
|
||||
instrument: {
|
||||
type: Number || String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
iframeDocument: null,
|
||||
iframeWindow: null,
|
||||
htmlTemplatePre: `
|
||||
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>交易打印</title><style>.print-table{font-family:仿宋;font-size:18px;width:95%;border:0;border-collapse:collapse}.print-tr{height:20px}.print-th0{text-align:center;width:9%;border:solid#000 1px;font-weight:bold}.print-th1{text-align:center;width:9%;border:solid#000 1px;font-weight:bold}.print-th2{text-align:center;width:9%;border:solid#000 1px;font-weight:bold}.print-th3{text-align:center;width:12%;border:solid#000 1px;font-weight:bold}.print-th4{text-align:center;width:24%;border:solid#000 1px;font-weight:bold}.print-th5{text-align:center;width:14%;border:solid#000 1px;font-weight:bold}.print-th6{text-align:center;width:9%;border:solid#000 1px;font-weight:bold}.print-th7{text-align:center;width:14%;border:solid#000 1px;font-weight:bold}.print-td{text-align:left;width:100%;border:solid#000 1px;font-weight:bold}.print-td0{text-align:center;width:9%;border:solid#000 1px}.print-td1{text-align:center;width:9%;border:solid#000 1px}.print-td2{text-align:center;width:9%;border:solid#000 1px}.print-td3{text-align:center;width:12%;border:solid#000 1px}.print-td4{text-align:left;width:24%;border:solid#000 1px}.print-td5{text-align:left;width:14%;border:solid#000 1px}.print-td6{text-align:center;width:9%;border:solid#000 1px}.print-td7{text-align:right;width:14%;border:solid#000 1px}.print-log-table{font-family:仿宋;font-size:18px;width:95%;border:0;border-collapse:collapse}.print-log-th0{text-align:center;width:15%;border:solid#000 1px;font-weight:bold}.print-log-th1{text-align:center;width:10%;border:solid#000 1px;font-weight:bold}.print-log-th2{text-align:center;width:15%;border:solid#000 1px;font-weight:bold}.print-log-th3{text-align:center;width:15%;border:solid#000 1px;font-weight:bold}.print-log-th4{text-align:center;width:25%;border:solid#000 1px;font-weight:bold}.print-log-th5{text-align:center;width:20%;border:solid#000 1px;font-weight:bold}.print-log-td0{text-align:center;width:15%;border:solid#000 1px}.print-log-td1{text-align:center;width:10%;border:solid#000 1px}.print-log-td2{text-align:center;width:15%;border:solid#000 1px}.print-log-td3{text-align:center;width:15%;border:solid#000 1px}.print-log-td4{text-align:center;width:25%;border:solid#000 1px}.print-log-td5{text-align:center;width:20%;border:solid#000 1px}.print-log-td{text-align:left;width:100%;font-weight:bold;border:solid#000 1px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{border-radius:5px;background:#ffffff}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.2)}</style></head><body id="printContentBody">
|
||||
`,
|
||||
htmlTemplateSuf: `</body></html>`,
|
||||
cssFileUrl: '', // 实际的 CSS 文件路径
|
||||
insertCount: 0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// 初始化 iframe 加载
|
||||
this.$refs.iframe.src = 'about:blank';
|
||||
},
|
||||
methods: {
|
||||
onIframeLoad() {
|
||||
if (!this.dealId || !this.product) {
|
||||
console.warn('dealId is empty');
|
||||
return;
|
||||
}
|
||||
|
||||
this.initHtml();
|
||||
},
|
||||
async initHtml() {
|
||||
if (this.insertCount > 0) { return; }
|
||||
const str = await this.assemblyHtmlStr();
|
||||
this.insertHtmlStr(str);
|
||||
this.insertCount++;
|
||||
},
|
||||
async insertHtmlStr(str) {
|
||||
this.iframeDocument = this.$refs.iframe.contentDocument;
|
||||
this.iframeWindow = this.$refs.iframe.contentWindow;
|
||||
|
||||
const html = this.htmlTemplatePre + str + this.htmlTemplateSuf;
|
||||
// 设置 iframe 的 HTML 内容为表单模板
|
||||
this.iframeDocument.open();
|
||||
this.iframeDocument.write(html);
|
||||
this.iframeDocument.close();
|
||||
|
||||
// TODO 目前不考虑，在不依赖 nginx 情况下先做内联 css 处理
|
||||
// 动态加载额外的 CSS 文件
|
||||
// const link = this.iframeDocument.createElement('link');
|
||||
// link.rel = 'stylesheet';
|
||||
// link.href = this.cssFileUrl;
|
||||
// this.iframeDocument.head.appendChild(link);
|
||||
},
|
||||
print() {
|
||||
this.iframeWindow.print();
|
||||
},
|
||||
async assemblyHtmlStr() {
|
||||
const result = await Promise.all([this.getDealReceipt(), this.getDealQueryList()]);
|
||||
return result.join('');
|
||||
},
|
||||
async getDealReceipt() {
|
||||
const data = await queryDealReceipt({ 'dealId': this.dealId, 'product': this.product, 'instrument': this.instrument });
|
||||
if (data?.success && data?.data.result) {
|
||||
return data?.data.result.replace(/@{2}([^@]*)@{2}/g, (match, key) => {
|
||||
return this.$t(key);
|
||||
});
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
async getDealQueryList() {
|
||||
if (this.product === 'REPO' || this.product === 'SECLB' || this.product === 'REPOOUT') {
|
||||
const data = await queryDealQueryList({ 'queryParam.dealId': this.dealId });
|
||||
const dealData = data?.data.result ?? [];
|
||||
if (dealData.length > 0) {
|
||||
let guaranteeTable = '';
|
||||
if (!isEmpty(dealData[0].guaranteeEos) && dealData[0].guaranteeEos.length > 0) {
|
||||
const guaranteeTableStart =
|
||||
`
|
||||
<table class="print-log-table">
|
||||
<tbody>
|
||||
<thead>
|
||||
<tr class="print-tr">
|
||||
<td class="print-log-th1">债券编码</td>
|
||||
<td class="print-log-th1">货币</td>
|
||||
<td class="print-log-th2">全价</td>
|
||||
<td class="print-log-th3">债券面额</td>
|
||||
<td class="print-log-th1">折扣率(%)</td>
|
||||
<td class="print-log-th3">折算汇率</td>
|
||||
</tr>
|
||||
</thead>
|
||||
`;
|
||||
const guaranteeTableEnd =
|
||||
`
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
dealData[0].guaranteeEos.forEach(function(item) {
|
||||
guaranteeTable += `<tr class="print-tr">
|
||||
<td class="print-log-td" style="width:20%">${item.underlying}</td>
|
||||
<td class="print-log-td" style="width:10%">${item.ccy}</td>
|
||||
<td class="print-log-td" style="width:12%">${item.price}</td>
|
||||
<td class="print-log-td" style="width:18%">${item.nominal}</td>
|
||||
<td class="print-log-td" style="width:11%">${item.haircut}</td>
|
||||
<td class="print-log-td" style="width:11%">${item.spotRate}</td>
|
||||
</tr>`;
|
||||
});
|
||||
return guaranteeTableStart + guaranteeTable + guaranteeTableEnd + '<br/>';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.trade_print {
|
||||
height: 460px;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<div class="trade_trace">
|
||||
<div
|
||||
v-for="(item, index) in datalArray"
|
||||
:key="'trace_' + index"
|
||||
class="trace_item"
|
||||
>
|
||||
<NodeLine
|
||||
:show-bottom-mark="index == datalArray.length - 1"
|
||||
:show-top-mark="index == 0"
|
||||
:point-type="index == 0 ? 'primary' : 'default'"
|
||||
:line-type="'default'"
|
||||
/>
|
||||
<div class="date">{{ item.operateDateInfo }}</div>
|
||||
<div class="main_content">
|
||||
<div class="main">
|
||||
<div class="item">
|
||||
<div class="label">{{ $t('form.tradeId') }}</div>
|
||||
<div
|
||||
class="value"
|
||||
@click="copyToClipboard"
|
||||
>
|
||||
<span id="main_tradeid">{{ item?.dealId ?? item?.parentId }}</span>
|
||||
<icon-font
|
||||
name="icon-copy"
|
||||
class="icon-copy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">{{ $t('field.action') }}</div>
|
||||
<div class="value edit">
|
||||
<div class="btn">{{ item?.eventName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">{{ $t('form.dealStatus') }}</div>
|
||||
<div class="value point">
|
||||
<span class="success">{{ item?.dealStatusName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">{{ $t('field.product') }}</div>
|
||||
<div class="value">{{ item?.productShowName }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">{{ $t('form.user') }}</div>
|
||||
<div class="value">{{ item?.userId }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">{{ $t('field.history') }}</div>
|
||||
<div class="value">{{ item?.version }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_header">
|
||||
<icon-font
|
||||
name="icon-save"
|
||||
class="icon-save"
|
||||
/>
|
||||
<span class="text"> {{ $t('field.content') }}</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div
|
||||
v-for="(cItem, cIndex) in item.contentArray"
|
||||
:key="'trace_' + index + '_content_' + cIndex"
|
||||
class="item"
|
||||
>
|
||||
<div class="label">{{ cItem.label }}</div>
|
||||
<div
|
||||
:class="{
|
||||
'value': true,
|
||||
'changed': cItem.localChanged
|
||||
}"
|
||||
>{{ cItem.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { queryDealTrace, queryComboxData } from '@/api/dcsApi';
|
||||
import NodeLine from '../NodeLine';
|
||||
|
||||
export default {
|
||||
name: 'TradeTrace',
|
||||
components: {
|
||||
NodeLine,
|
||||
},
|
||||
props: {
|
||||
dealId: {
|
||||
type: String || Number,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
datalArray: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (this.dealId) {
|
||||
this.getDealTrace(this.dealId);
|
||||
}
|
||||
},
|
||||
async getDealTrace(dealId) {
|
||||
debugger;
|
||||
const data = await queryDealTrace({ 'dealId': dealId });
|
||||
if (data?.success) {
|
||||
const { datals } = data?.data.result;
|
||||
this.datalArray = await this.platDetails([], datals);
|
||||
// console.log('datalArray', this.datalArray);
|
||||
}
|
||||
},
|
||||
async platDetails(datalArray, datals) {
|
||||
for (const datal of datals) {
|
||||
const detalRes = await this.formatDetail(datal, datalArray.length > 0 ? datalArray[0] : { contentArray: [] });
|
||||
datalArray.unshift(detalRes);
|
||||
if (datal?.children) {
|
||||
await this.platDetails(datalArray, datal?.children);
|
||||
}
|
||||
}
|
||||
return datalArray;
|
||||
},
|
||||
async formatDetail(detail, lastDetail) {
|
||||
const contentArray = await this.compareArrayAddFlag(detail, lastDetail);
|
||||
return {
|
||||
...detail,
|
||||
contentArray: contentArray,
|
||||
};
|
||||
},
|
||||
async compareArrayAddFlag(detail, lastDetail) {
|
||||
const array = lastDetail.contentArray;
|
||||
const oriArray = await this.formatContent(detail.content);
|
||||
const map = new Map([]);
|
||||
for (const index in oriArray) {
|
||||
map.set(oriArray[index].label, { index: index, value: oriArray[index].value });
|
||||
}
|
||||
for (const item of array) {
|
||||
if (map.has(item.label) && map.get(item.label).value != item.value) {
|
||||
oriArray[map.get(item.label).index]['localChanged'] = true;
|
||||
}
|
||||
}
|
||||
return oriArray;
|
||||
},
|
||||
async formatContent(data) {
|
||||
let str = await this.formatMessageParameters(data);
|
||||
// TODO 原有多语言模板逗号中英文混乱配置，对英文逗号转换成中文逗号，并排除金额情况的英文逗号
|
||||
str = str.replace(/,([^0-9])/g, '，$1');
|
||||
return str.split('，').map(item => {
|
||||
const index = item.indexOf(':');
|
||||
return {
|
||||
label: item.slice(0, index),
|
||||
value: item.slice(index + 1, item.length),
|
||||
};
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 特殊格式多语言字符串处理
|
||||
*
|
||||
* （迁移自旧项目代码）
|
||||
*
|
||||
* 适用于以下情况
|
||||
* 数据源：info.deal.newTrack|@|25032400000|@|FXOPTION_EUROPEAN|@|1,000,000|@|USDCNY|@|2025-03-24|@|2025-03-26|@|2025-04-24|@|2025-03-24 10:53:15|@|test0001|@|RCS|@|25032400000
|
||||
* 多语言配置：'info.deal.newTrack': '金额:{2}，标的:{3}，交易日:{4}，起息日:{5}，到期日:{6}，发生时间:{7}，交易来源:{9}，外部流水号:{10}',
|
||||
* 转换结果：金额:1,000,000，标的:USDCNY，交易日:2025-03-24，起息日:2025-03-26，到期日:2025-04-24，发生时间:2025-03-24 10:53:15，交易来源:RCS，外部流水号:25032400000
|
||||
* @param {String} msg
|
||||
* @return {String}
|
||||
*/
|
||||
async formatMessageParameters(msg) {
|
||||
if (msg == null || msg === '') {
|
||||
return '';
|
||||
}
|
||||
msg = msg.replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/&/g, '&');
|
||||
var msgs = msg.split('\|@\|');
|
||||
var mess = this.$t(msgs[0]);
|
||||
for (var i = 1; i < msgs.length; i++) {
|
||||
var reg = new RegExp('[{]' + (i - 1) + '[}]', 'g');
|
||||
var message = msgs[i];
|
||||
if (message != null && message != '') {
|
||||
if (message.indexOf(';') > -1) {
|
||||
var strings = message.split(';');
|
||||
if (strings.length >= 2 && Eui.Share.get('language') == 'en') {
|
||||
message = strings[1];
|
||||
} else {
|
||||
message = strings[0];
|
||||
}
|
||||
}
|
||||
}
|
||||
mess = mess.replace(reg, message);
|
||||
}
|
||||
return mess;
|
||||
},
|
||||
/**
|
||||
* 获取数据字典
|
||||
*/
|
||||
async queryComboxData() {
|
||||
const params = {
|
||||
codifierGrpCodes: 'typeOfEvent',
|
||||
};
|
||||
const res = await queryComboxData(params);
|
||||
if (res?.success) {
|
||||
const result = res.data?.result;
|
||||
}
|
||||
},
|
||||
copyToClipboard() {
|
||||
const textToCopy = document.getElementById('main_tradeid').textContent;
|
||||
navigator.clipboard.writeText(textToCopy)
|
||||
.then(() => {
|
||||
console.log('复制成功');
|
||||
this.$message.success('复制成功');
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('无法复制文本: ', err);
|
||||
this.$message.error('无法复制文本');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@mixin point-detail($color) {
|
||||
color: $color;
|
||||
position: relative;
|
||||
padding-left: 8px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
border-radius: 50%;
|
||||
left: 0px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
@mixin point {
|
||||
&.point {
|
||||
.success {
|
||||
@include point-detail(var(--ancillary-color-success-1))
|
||||
}
|
||||
.warning {
|
||||
@include point-detail(var(---ancillary-color-warning-1))
|
||||
}
|
||||
}
|
||||
}
|
||||
.trade_trace {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.trace_item {
|
||||
position: relative;
|
||||
padding: 6px 0px 6px 32px;
|
||||
}
|
||||
.date {
|
||||
color: var(--application-color-5);
|
||||
line-height: 20px;
|
||||
}
|
||||
.main_content {
|
||||
margin-top: 13px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--application-color-8);
|
||||
}
|
||||
.main {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: url('../../assets/trade_trace_main.png') no-repeat center/cover border-box;
|
||||
.item {
|
||||
width: 25%;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 6px 0;
|
||||
.label {
|
||||
width: 80px;
|
||||
color: var(--application-color-3);
|
||||
line-height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.value {
|
||||
color: var(--application-color-2);
|
||||
line-height: 20px;
|
||||
vertical-align: middle;
|
||||
.icon-copy {
|
||||
margin-left: 4px;
|
||||
color: var(--primary-color-1);
|
||||
}
|
||||
&.edit {
|
||||
text-align: center;
|
||||
.btn {
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
border-radius: 2px;
|
||||
// TODO 待替换全局变量
|
||||
color: #FF950B;
|
||||
background-color: rgb(255, 149, 11, 0.1);
|
||||
}
|
||||
}
|
||||
@include point;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content_header {
|
||||
color: var(--primary-color-1);
|
||||
margin: 0 12px;
|
||||
border-top: 1px solid var(--application-color-8);
|
||||
padding-top: 12px;
|
||||
.icon-save {
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.text {
|
||||
flex-grow: 1;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding: 8px 12px 12px 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.item {
|
||||
width: 25%;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 6px 0;
|
||||
.label {
|
||||
width: 80px;
|
||||
color: var(--application-color-3);
|
||||
line-height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.value {
|
||||
flex-grow: 1;
|
||||
color: var(--application-color-2);
|
||||
line-height: 20px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
&.changed {
|
||||
color: var(--ancillary-color-success-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+418
@@ -0,0 +1,418 @@
|
||||
<template>
|
||||
<div class="more_item derivation">
|
||||
<div class="header">{{ $t('alt.otherInfo') }}</div>
|
||||
<div
|
||||
v-if="data?.dealId"
|
||||
class="content"
|
||||
>
|
||||
<div class="head">
|
||||
<icon-font
|
||||
name="icon-down1"
|
||||
:class="'icon-down1'"
|
||||
/>
|
||||
<icon-font
|
||||
name="icon-layers"
|
||||
/>
|
||||
<span class="text">{{ data?.instrument }}（{{ data?.dealId }}）</span>
|
||||
<span
|
||||
v-if="false"
|
||||
class="open"
|
||||
@click="openContentInfo(0)"
|
||||
>{{ $t('alt.auditInfo') }}
|
||||
<icon-font
|
||||
name="icon-down"
|
||||
:class="'icon-down' + 'derivation_content_' + 0 + '_btn'"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info derivation_content_0">
|
||||
<div
|
||||
v-for="(item, index) in data?.children"
|
||||
:key="'sub_content_' + index"
|
||||
class="sub_content"
|
||||
>
|
||||
<div class="head">
|
||||
<icon-font
|
||||
name="icon-down1"
|
||||
:class="'icon-down1'"
|
||||
/>
|
||||
<span class="text">{{ item?.event }}-{{ item.instrument }}（{{ item?.dealId }}）
|
||||
</span>
|
||||
<!-- <span class="status">失效</span> -->
|
||||
<span
|
||||
class="open"
|
||||
@click="openInfo(index, item)"
|
||||
>{{ $t('alt.auditInfo') }}
|
||||
<icon-font
|
||||
name="icon-down"
|
||||
:class="'icon-down ' + 'derivation_sub_content_' + index + '_btn'"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="base">
|
||||
<div
|
||||
v-for="(value, key) of item?.message"
|
||||
:key="value"
|
||||
class="base_item"
|
||||
>
|
||||
<div class="left">{{ $t(key) }}</div>
|
||||
<div class="right">{{ value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="'extension derivation_sub_content_' + index">
|
||||
<div
|
||||
v-for="(infoItem, infoIndex) in auditInfos[index]"
|
||||
:key="'info_item_' + index + '_' + infoIndex"
|
||||
class="ext_container"
|
||||
>
|
||||
<div class="ext_head">{{ $t(infoItem?.event) }}</div>
|
||||
<div
|
||||
v-if="infoItem?.children && infoItem?.children.length > 0"
|
||||
class="ext_detail"
|
||||
>
|
||||
<div :class="{'line': true, 'default': true, 'first': true}" />
|
||||
<div class="point" />
|
||||
<div
|
||||
v-for="(sInfoItem, sInfoIndex) in infoItem?.children"
|
||||
:key="'s_info_item_' + index + '_' + infoIndex + '_' + sInfoIndex"
|
||||
class="detail_item"
|
||||
>
|
||||
<div class="item_title">{{ $t(sInfoItem.message) }}</div>
|
||||
<div class="item_desc">{{ sInfoItem == 0 ? '完成' : '未完成' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getQueryAuditInfo } from '@/api/dcsApi';
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
product: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
instrument: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
auditInfos: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
data(newVal) {
|
||||
if (newVal?.children) {
|
||||
this.auditInfos = new Array(newVal?.children.length).fill([]);
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openContentInfo(index) {
|
||||
this.toggleHeightWithAnimation('.derivation_content_' + index);
|
||||
},
|
||||
async openInfo(index, item) {
|
||||
const param = { 'queryParam.rcsSerialNo': item.dealId, 'queryParam.dealId': item.dealId, 'queryParam.product': this.product, 'queryParam.instrument': this.instrument };
|
||||
await this.getAuditInfo(param, index);
|
||||
this.toggleHeightWithAnimation('.derivation_sub_content_' + index);
|
||||
},
|
||||
toggleBtn(id, animation) {
|
||||
const btn = document.querySelector(id + '_btn');
|
||||
if (animation == 'up') {
|
||||
btn.classList.add('up');
|
||||
} else {
|
||||
btn.classList.remove('up');
|
||||
}
|
||||
},
|
||||
toggleHeightWithAnimation(id) {
|
||||
const box = document.querySelector(id);
|
||||
let height = box.style.height;
|
||||
if (height) {
|
||||
if (Number(height.replace(/px/, '')) > 0) {
|
||||
box.style.transition = '0.5s';
|
||||
box.style.height = 0 + 'px';
|
||||
this.toggleBtn(id, 'down');
|
||||
return;
|
||||
}
|
||||
}
|
||||
// 设置高度为 auto（通常这是默认值，但可以明确设置）
|
||||
box.style.height = 'auto';
|
||||
|
||||
// 动态获取高度
|
||||
height = box.offsetHeight;
|
||||
box.style.height = 0;
|
||||
|
||||
// 触发 reflow
|
||||
box.clientHeight;
|
||||
|
||||
box.style.transition = '0.5s';
|
||||
box.style.height = height + 'px';
|
||||
this.toggleBtn(id, 'up');
|
||||
},
|
||||
async getAuditInfo(param, index) {
|
||||
if (this.auditInfos[index].length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await getQueryAuditInfo(param);
|
||||
if (data?.success) {
|
||||
const { auditInfo } = data.data.result;
|
||||
this.auditInfos.splice(index, 1, auditInfo);
|
||||
}
|
||||
return;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.more_item {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
background-color: var(--bg-color-main-2);
|
||||
border-radius: 4px;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.more_item.derivation {
|
||||
.header {
|
||||
padding: 5px 11px;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: var(--primary-color-1);
|
||||
border-radius: 1.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-left: 32px;
|
||||
position: relative;
|
||||
|
||||
.head {
|
||||
position: relative;
|
||||
|
||||
.icon-down1 {
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 3px;
|
||||
}
|
||||
.text {
|
||||
padding-left: 4px;
|
||||
font-size: 14px;
|
||||
color: var(--application-color-1);
|
||||
}
|
||||
|
||||
.open {
|
||||
padding-left: 8px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
color: var(--primary-color-1);
|
||||
}
|
||||
|
||||
.icon-down {
|
||||
color: var(--primary-color-1);
|
||||
transition: all 0.3s;
|
||||
transform: rotate(-90deg);
|
||||
&.down {
|
||||
|
||||
}
|
||||
&.up {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 6px;
|
||||
margin-top: 12px;
|
||||
border: 1px solid var(--application-color-7);
|
||||
|
||||
.sub_content {
|
||||
margin-left: 20px;
|
||||
position: relative;
|
||||
border-left: 1px solid var(--application-color-8);
|
||||
|
||||
.head {
|
||||
padding-left: 12px;
|
||||
position: relative;
|
||||
|
||||
.icon-down1 {
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 12px;
|
||||
color: var(--application-color-1);
|
||||
}
|
||||
|
||||
.open {
|
||||
padding-left: 8px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
color: var(--primary-color-1);
|
||||
}
|
||||
|
||||
.icon-down {
|
||||
color: var(--primary-color-1);
|
||||
transition: all 0.3s;
|
||||
transform: rotate(-90deg);
|
||||
&.down {
|
||||
|
||||
}
|
||||
&.up {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
padding: 12px;
|
||||
|
||||
.base {
|
||||
padding: 8px;
|
||||
background-color: var(--primary-color-3);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border-radius: 4px;
|
||||
|
||||
.base_item {
|
||||
padding: 8px 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.left {
|
||||
text-align: left;
|
||||
color: var(--application-color-3);
|
||||
font-size: 12px;
|
||||
|
||||
&::after {
|
||||
content: ":";
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
padding-left: 4px;
|
||||
text-align: left;
|
||||
color: var(--application-color-2);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.extension {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.5s;
|
||||
background-color: var(--primary-color-3);
|
||||
padding: 0px 16px 0px 16px;
|
||||
.ext_container {
|
||||
&:first-child {
|
||||
.ext_head {
|
||||
border-top: 1px solid var(--application-color-7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ext_head {
|
||||
padding-top: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--application-color-2);
|
||||
}
|
||||
|
||||
.ext_detail {
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 6px 12px;
|
||||
position: relative;
|
||||
.line {
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
&.default {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
left: 6px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-left: 1px dashed var(--primary-color-1);
|
||||
}
|
||||
&.first {
|
||||
top: calc(50% + 8px);
|
||||
height: calc(50% - 8px);
|
||||
}
|
||||
&.last {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
.point {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--primary-color-1);
|
||||
}
|
||||
|
||||
.detail_item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.item_title {
|
||||
color: var(--application-color-3);
|
||||
|
||||
&::after {
|
||||
content: ":";
|
||||
}
|
||||
}
|
||||
|
||||
.item_desc {
|
||||
padding-left: 6px;
|
||||
color: var(--application-color-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,345 @@
|
||||
<template>
|
||||
<div class="more_item trading">
|
||||
<div class="header">交易信息</div>
|
||||
<div
|
||||
v-for="(item, index) in data?.timelineInfo"
|
||||
:key="'trading_' + index"
|
||||
class="content"
|
||||
>
|
||||
<div :class="{'point': true, 'default': true, 'date': item?.viewNowDateFlag}" />
|
||||
<div :class="{'block': true, 'default': true, 'first': index == 0, 'last': index + 1 == data?.timelineInfo.length }" />
|
||||
<div class="head">
|
||||
<span class="text">{{ item?.date }} {{ item?.event }}</span>
|
||||
<span
|
||||
v-if="extensionOpen"
|
||||
class="open"
|
||||
@click="openInfo(index)"
|
||||
>{{ $t('alt.auditInfo') }}
|
||||
<icon-font
|
||||
name="icon-down"
|
||||
:class="'icon-down ' + 'trading_extension_' + index + '_btn'"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="item?.message"
|
||||
class="info"
|
||||
>
|
||||
<div class="base">
|
||||
<div
|
||||
v-for="(value, key) of item?.message"
|
||||
:key="value"
|
||||
class="base_item"
|
||||
>
|
||||
<div class="left">{{ $t(key) }}</div>
|
||||
<div class="right">{{ value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO 交易生命周期不存在中台审批列表，而 eflow 存在。等待后期改造 -->
|
||||
<div
|
||||
v-if="extensionOpen"
|
||||
:class="'extension ' + 'trading_extension_' + index"
|
||||
>
|
||||
<div class="ext_head border_bottom_line">{{ $t('info.dcs.centerAudit') }}</div>
|
||||
<div class="ext_detail">
|
||||
<div class="detail_item">
|
||||
<div class="item_title">发起人</div>
|
||||
<div class="item_desc">wxx</div>
|
||||
</div>
|
||||
<div class="detail_item">
|
||||
<div class="item_title">操作日期</div>
|
||||
<div class="item_desc">2025-05-15 09:34:23</div>
|
||||
</div>
|
||||
<div class="detail_item">
|
||||
<div class="item_title">审批状态</div>
|
||||
<div class="item_desc">审批退回</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ext_detail">
|
||||
<div class="detail_item">
|
||||
<div class="item_title">发起人</div>
|
||||
<div class="item_desc">wxx</div>
|
||||
</div>
|
||||
<div class="detail_item">
|
||||
<div class="item_title">操作日期</div>
|
||||
<div class="item_desc">2025-05-15 09:34:23</div>
|
||||
</div>
|
||||
<div class="detail_item">
|
||||
<div class="item_title">审批状态</div>
|
||||
<div class="item_desc">生效</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
extensionOpen: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
openInfo(index) {
|
||||
this.toggleHeightWithAnimation('.trading_extension_' + index);
|
||||
},
|
||||
toggleBtn(id, animation) {
|
||||
const btn = document.querySelector(id + '_btn');
|
||||
if (animation == 'up') {
|
||||
btn.classList.add('up');
|
||||
} else {
|
||||
btn.classList.remove('up');
|
||||
}
|
||||
},
|
||||
toggleHeightWithAnimation(id) {
|
||||
const box = document.querySelector(id);
|
||||
let height = box.style.height;
|
||||
if (height) {
|
||||
if (Number(height.replace(/px/, '')) > 0) {
|
||||
box.style.transition = '0.5s';
|
||||
box.style.height = 0 + 'px';
|
||||
this.toggleBtn(id, 'down');
|
||||
return;
|
||||
}
|
||||
}
|
||||
// 设置高度为 auto（通常这是默认值，但可以明确设置）
|
||||
box.style.height = 'auto';
|
||||
|
||||
// 动态获取高度
|
||||
height = box.offsetHeight;
|
||||
box.style.height = 0;
|
||||
|
||||
// 触发 reflow
|
||||
box.clientHeight;
|
||||
|
||||
box.style.transition = '0.5s';
|
||||
box.style.height = height + 'px';
|
||||
this.toggleBtn(id, 'up');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.more_item {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
background-color: var(--bg-color-main-2);
|
||||
border-radius: 4px;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.more_item.trading {
|
||||
.header {
|
||||
padding: 5px 11px;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: var(--primary-color-1);
|
||||
border-radius: 1.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
border-left: 1px dashed var(--primary-color-1);
|
||||
padding-bottom: 16px;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
|
||||
.point {
|
||||
z-index: 1;
|
||||
&.default {
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 4px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: var(--primary-color-1);
|
||||
border-radius: 50%;
|
||||
border: 4px solid;
|
||||
border-color: var(--primary-color-3);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
&.date {
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 4px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: var(--application-color-7);
|
||||
border-radius: 50%;
|
||||
border: 4px solid;
|
||||
border-color: var(--primary-color-3);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
}
|
||||
|
||||
.block {
|
||||
z-index: 0;
|
||||
&.default {
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 4px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: var(--bg-color-main-2);
|
||||
}
|
||||
&.first {
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 0px;
|
||||
width: 16px;
|
||||
height: 22px;
|
||||
background-color: var(--bg-color-main-2);
|
||||
}
|
||||
&.last {
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 0px;
|
||||
width: 16px;
|
||||
height: 100%;
|
||||
background-color: var(--bg-color-main-2);
|
||||
}
|
||||
}
|
||||
|
||||
.head {
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: var(--application-color-1);
|
||||
}
|
||||
|
||||
.open {
|
||||
padding-left: 8px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
color: var(--primary-color-1);
|
||||
}
|
||||
.icon-down {
|
||||
color: var(--primary-color-1);
|
||||
transition: all 0.3s;
|
||||
transform: rotate(-90deg);
|
||||
&.down {
|
||||
|
||||
}
|
||||
&.up {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--application-color-7);
|
||||
padding: 12px;
|
||||
|
||||
.base {
|
||||
padding-bottom: 8px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.base_item {
|
||||
padding: 8px 8px;
|
||||
width: 33%;
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
width: 90px;
|
||||
text-align: left;
|
||||
color: var(--application-color-3);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
color: var(--application-color-2);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.extension {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.5s;
|
||||
|
||||
.ext_head {
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--application-color-2);
|
||||
|
||||
&.border_bottom_line {
|
||||
border-top: 1px solid var(--application-color-7);
|
||||
}
|
||||
}
|
||||
|
||||
.ext_detail {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 6px 12px;
|
||||
border-left: 1px dashed var(--primary-color-1);
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--primary-color-1);
|
||||
}
|
||||
|
||||
.detail_item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.item_title {
|
||||
color: var(--application-color-3);
|
||||
|
||||
&::after {
|
||||
content: ":";
|
||||
}
|
||||
}
|
||||
|
||||
.item_desc {
|
||||
padding-left: 6px;
|
||||
color: var(--application-color-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<div class="transaction_status">
|
||||
<div
|
||||
v-if="data?.dealId"
|
||||
class="header"
|
||||
>
|
||||
<span class="title">{{ data.instrument }}</span>
|
||||
<span class="code">{{ data.dealId }}</span>
|
||||
<span class="btn">
|
||||
<icon-font name="icon-doc-edit" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="pancels">
|
||||
<div class="pancel">
|
||||
<div class="title">
|
||||
<icon-font name="icon-email" />
|
||||
<span>{{ $t('alt.quickInfo') }}</span>
|
||||
</div>
|
||||
<div class="pancel-details">
|
||||
<div
|
||||
v-for="(value, key) of data?.messages"
|
||||
:key="value"
|
||||
class="detail-item"
|
||||
>
|
||||
<div class="status">{{ value }}</div>
|
||||
<div class="info">{{ $t(key) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pancel">
|
||||
<div class="title">
|
||||
<icon-font name="icon-monitor" />
|
||||
<span>{{ $t('alt.backOfficeStatus') }}</span>
|
||||
</div>
|
||||
<div class="pancel-details">
|
||||
<div
|
||||
v-for="(value, key) of data?.settleInfo"
|
||||
:key="value"
|
||||
class="detail-item"
|
||||
>
|
||||
<div :class="{'status': true, 'success': value == 0, 'warning': value == 1}">{{ value == 0 ? '完成' : '未完成' }}</div>
|
||||
<div class="info">{{ $t(key) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'TransactionStatus',
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@media (max-width: 1023px) {
|
||||
.transaction_status {
|
||||
.pancels {
|
||||
flex-direction: column !important;
|
||||
|
||||
.pancel:not(:first-child) {
|
||||
padding-top: 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin point($color) {
|
||||
& {
|
||||
color: var($color);
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
background-color: var($color);
|
||||
border-radius: 50%;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.transaction_status {
|
||||
padding: 16px;
|
||||
background-color: var(--bg-color-main-2);
|
||||
border-radius: 4px;
|
||||
|
||||
.header {
|
||||
padding: 16px;
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
color: var(--application-color-1);
|
||||
}
|
||||
|
||||
.code {
|
||||
padding-left: 8px;
|
||||
font-size: 14px;
|
||||
color: var(--primary-color-1);
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding-left: 8px;
|
||||
color: var(--primary-color-1);
|
||||
}
|
||||
}
|
||||
|
||||
.pancels {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.pancel {
|
||||
&:last-child {
|
||||
border-left: 1px solid var(--application-color-8);
|
||||
}
|
||||
|
||||
padding: 0 8px;
|
||||
flex: 1;
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
color: var(--primary-color-1);
|
||||
background-color: var(--primary-color-3);
|
||||
border-radius: 4px;
|
||||
|
||||
span:last-child {
|
||||
padding-left: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&-details {
|
||||
padding: 0px 12px 0px 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.detail-item {
|
||||
padding-top: 14px;
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.status {
|
||||
color: var(--application-color-1);
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
|
||||
&.lose {
|
||||
@include point(--application-color-4);
|
||||
}
|
||||
|
||||
&.success {
|
||||
@include point(--ancillary-color-success-1);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
@include point(--ancillary-color-warning-1);
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
padding-top: 10px;
|
||||
color: var(--application-color-5);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,669 @@
|
||||
<template>
|
||||
<div class="customResult">
|
||||
<el-tabs v-if="tabs.length > 0" v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane v-for="(item, index) in tabs" :key="item.value" :label="item.label" :name="item.value">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<template>
|
||||
<div class="tableBox" v-if="tableConfig.length>0" :style="{ height: maxHeight + 'px' }">
|
||||
<CustomTable ref="table" :key="tableKey" v-loading="loading" :configs="tableConfig" :data="tableData" :border="true" :summary-render="summaryRender">
|
||||
<template #dealId="{ row }">
|
||||
<el-link type="primary" @click="onOpenModal(row)">{{row.dealId}}</el-link>
|
||||
</template>
|
||||
<template #folderStr="{ row }">
|
||||
<el-link type="primary" @click="getFolderInfo(row)">{{row.folderStr}}</el-link>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<div class="table-action">
|
||||
<el-tooltip :content="$t('button.print')" placement="bottom">
|
||||
<i class="el-icon-printer" @click="iconClick('1', row)"></i>
|
||||
</el-tooltip>
|
||||
<el-tooltip :content="$t('button.following')" placement="bottom">
|
||||
<i class="el-icon-notebook-2" @click="iconClick('2', row)"></i>
|
||||
</el-tooltip>
|
||||
<el-tooltip :content="$t('button.life')" placement="bottom">
|
||||
<i class="el-icon-alarm-clock" @click="iconClick('3', row)"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</CustomTable>
|
||||
</div>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[30, 50, 70, 100, 150]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="400px">
|
||||
<el-form ref="form" :model="form" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-form-item :label="this.$t('field.code')">
|
||||
<el-input v-model="form.code" placeholder="" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('field.shortName')">
|
||||
<el-input v-model="form.name" placeholder="" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('field.name')">
|
||||
<el-input v-model="form.localName" placeholder="" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('field.belongingLedger')">
|
||||
<el-input v-model="form.bookIdName" placeholder="" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('field.profitAndLossCcy')">
|
||||
<el-select v-model="form.currencyId" placeholder="" disabled>
|
||||
<el-option v-for="inner in option1" :label="inner.text" :value="inner.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('field.accountAttributes')">
|
||||
<el-select v-model="form.folderStatus" placeholder="" disabled>
|
||||
<el-option v-for="inner in option2" :label="inner.text" :value="inner.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('field.accountingClassification')">
|
||||
<el-select v-model="form.accountingSection" placeholder="" disabled>
|
||||
<el-option v-for="inner in option3" :label="inner.text" :value="inner.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('field.homeOffshore')">
|
||||
<el-select v-model="form.homeType" placeholder="" disabled>
|
||||
<el-option v-for="inner in option4" :label="inner.text" :value="inner.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CustomTable } from '@erayt/titanOne-component-vue';
|
||||
import { dcsQueryPage, queryFieldByProduct, queryComboxData, getFolderInfo } from '../../../api/dcsApi.js';
|
||||
export default {
|
||||
name: 'customResult',
|
||||
components: {
|
||||
CustomTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchParams: {},
|
||||
tabs: [],
|
||||
activeName: '',
|
||||
tableData: [],
|
||||
tableConfig: [],
|
||||
publicConfig: [
|
||||
{
|
||||
label: this.$t('field.transactionSerialNumber'),
|
||||
name: 'dealId',
|
||||
slot: true,
|
||||
headerAlign: 'center',
|
||||
align: 'left',
|
||||
width: 120,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.product'),
|
||||
name: 'productStr',
|
||||
headerAlign: 'center',
|
||||
align: 'left',
|
||||
fixed: true
|
||||
},
|
||||
{
|
||||
label: this.$t('field.control'),
|
||||
name: 'action',
|
||||
slot: true,
|
||||
width: 100,
|
||||
headerAlign: 'center',
|
||||
align: 'center',
|
||||
fixed: true
|
||||
},
|
||||
{
|
||||
label: this.$t('field.folder'),
|
||||
name: 'folderStr',
|
||||
slot: true,
|
||||
headerAlign: 'center'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.accountType'),
|
||||
name: 'folderStatusStr',
|
||||
headerAlign: 'center',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
label: this.$t('menu.counterparty'),
|
||||
name: 'cptyStr',
|
||||
headerAlign: 'center',
|
||||
align: 'left',
|
||||
width: 220
|
||||
},
|
||||
{
|
||||
label: this.$t('field.operatingUsers'),
|
||||
name: 'takerId',
|
||||
headerAlign: 'center'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.transactionDate'),
|
||||
name: 'tradeDateStr',
|
||||
headerAlign: 'center',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.startingDate'),
|
||||
name: 'valueDateStr',
|
||||
headerAlign: 'center',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.expirationDate'),
|
||||
name: 'maturityDateStr',
|
||||
headerAlign: 'center',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.enterDate'),
|
||||
name: 'captureTimeStr',
|
||||
headerAlign: 'center',
|
||||
align: 'center',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
label: this.$t('field.transactionStatus'),
|
||||
name: 'dealStatusStr',
|
||||
headerAlign: 'center',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.natureOfTransaction'),
|
||||
name: 'dealFlagStr',
|
||||
headerAlign: 'center',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.sourceOfTransaction'),
|
||||
name: 'sourceName',
|
||||
headerAlign: 'center',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.transactionPurpose'),
|
||||
name: 'ext20',
|
||||
headerAlign: 'center',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.lastModifiedDate'),
|
||||
name: 'lastModifyDateStr',
|
||||
headerAlign: 'center',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.subjectCategories'),
|
||||
name: 'underlyingTypeStr',
|
||||
headerAlign: 'center',
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: this.$t('menu.underlying'),
|
||||
name: 'underlying',
|
||||
headerAlign: 'center',
|
||||
align: 'left',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
label: this.$t('field.tradingDirection'),
|
||||
name: 'buySellStr',
|
||||
headerAlign: 'center',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.externalSerialNumber'),
|
||||
name: 'globalId',
|
||||
headerAlign: 'center',
|
||||
align: 'left',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
label: this.$t('field.fatherTransactionSerialNumber'),
|
||||
name: 'parentId',
|
||||
headerAlign: 'center',
|
||||
align: 'left',
|
||||
width: 120
|
||||
}
|
||||
],
|
||||
loading: false,
|
||||
currentPage: 1,
|
||||
pageSize: 50,
|
||||
total: null,
|
||||
json: {},
|
||||
tableKey: 1,
|
||||
title: this.$t('field.accountDetails'),
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
code: '',
|
||||
name: '',
|
||||
localName: '',
|
||||
bookIdName: '',
|
||||
currencyId: '',
|
||||
folderStatus: '',
|
||||
accountingSection: '',
|
||||
homeType: '',
|
||||
},
|
||||
option1: [],
|
||||
option2: [],
|
||||
option3: [],
|
||||
option4: [],
|
||||
maxHeight: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
this.getOption()
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
activated () {
|
||||
this.init()
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
deactivated () {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
async getOption () {
|
||||
let formData = new FormData();
|
||||
formData.append('codifierGrpCodes', 'static_currencies,FolderStatus,AccountingSection,HomeType');
|
||||
const res = await queryComboxData(formData)
|
||||
const result = res.data.result
|
||||
this.option1 = result.currencies
|
||||
this.option2 = result.FolderStatus
|
||||
this.option3 = result.AccountingSection
|
||||
this.option4 = result.HomeType
|
||||
},
|
||||
// 根据产品key转换condition
|
||||
conditionChange (key) {
|
||||
let condition = []
|
||||
if (key === 'FXSPOT' || key === 'FXFWD' || key === 'NDF' || key === 'FXSWAP' || key === 'PMSPOT' || key === 'PMFWD' || key === 'PMSWAP') {
|
||||
condition = ['foreignExchangeCondition'] // 外汇即期，远期，NDF, 掉期，贵金属即期，远期，掉期
|
||||
} else if (key === 'FXOPTION_VANILA' || key === 'FXOPTION_BARRIER' || key === 'FXOPTION_DIGITAL' || key === 'FXOPTION_TOUCH' || key === 'FXOPTION_ASIAN' || key === 'PMOPTION_VANILA' || key === 'PMOPTION_BARRIER' || key === 'PMOPTION_DIGITAL' || key === 'PMOPTION_TOUCH' || key === 'PMOPTION_ASIAN') {
|
||||
condition = ['fxoptionCondition'] // 期权
|
||||
} else if (key === 'REPOOUT' || key === 'REPO') {
|
||||
condition = ['repoCondition'] // 买断式，质押式
|
||||
} else if (key === 'SECLB') {
|
||||
condition = ['bondlendingCondition'] // 债券借贷
|
||||
} else if (key === 'BOND' || key === 'BONDFWD') {
|
||||
condition = ['bondCondition'] // 现券买卖，债券远期
|
||||
} else if (key === 'SIMPLECF' || key === 'BRR') {
|
||||
condition = ['cashflowCondition'] // 单边现金流，存款准备金
|
||||
} else if (key === 'IAM' || key === 'PMLD' || key === 'LOANDEPO' || key === 'LEASE' || key === 'CDS' || key === 'FRA') {
|
||||
condition = ['loandepositCondition'] // 同业拆借，贵金属拆借，多期拆借，黄金租赁，信用违约互换，远期利率协议
|
||||
} else if (key === 'POSALL') {
|
||||
condition = ['posallocationCondition'] // 资金调拨
|
||||
} else if (key === 'IRS' || key === 'CCS') {
|
||||
condition = ['instrumentlegCondition'] // 利率掉期、货币掉期
|
||||
} else if (key === 'CAPFLOOR') {
|
||||
condition = ['capfloorCondition'] // 利率上下限
|
||||
} else if (key === 'SWAPTION') {
|
||||
condition = ['swaptionCondition'] // 利率互换期权
|
||||
} else if (key === 'BFUND' || key === 'MFUND') {
|
||||
condition = ['fundCondition'] // 债券基金，货币基金
|
||||
} else if (key === 'BONDF' || key === 'SBONDF') {
|
||||
condition = ['futureCondition'] // 国债期货，标准债券远期
|
||||
} else if (key === 'Straddle' || key === 'Strangle' || key === 'Butterfly' || key === 'CallSpread' || key === 'PutSpread' || key === 'Seagull' || key === 'RiskReversal' || key === 'ParticipatoryForward') {
|
||||
condition = ['fxoptionCondition', 'contractCondition'] //组合相关--其他、组合号
|
||||
}
|
||||
return condition
|
||||
},
|
||||
initJson () {
|
||||
this.json = {
|
||||
"queryParam.moduleName": "dcsCustomTradeQuery",
|
||||
"queryParam.pageStart": this.currentPage,
|
||||
"queryParam.pageLimit": this.pageSize,
|
||||
"queryParam.loginId": Eui.Share.get("loginId"),
|
||||
"queryParam.bankId": Eui.Share.get("bankId")
|
||||
}
|
||||
let moreConditionRule = JSON.parse(JSON.stringify(this.searchParams.moreConditionRule))
|
||||
let moreConditionRule2
|
||||
if (this.activeName) {
|
||||
this.json["queryParam.products"] = [this.activeName] // 产品
|
||||
moreConditionRule2 = this.searchParams.moreConditionRule2[this.conditionChange(this.activeName)[0]] || []
|
||||
moreConditionRule2.forEach(item=>{
|
||||
if (item) {
|
||||
moreConditionRule.push(item)
|
||||
}
|
||||
})
|
||||
}
|
||||
if (moreConditionRule.length > 0) {
|
||||
moreConditionRule.forEach(item=>{
|
||||
if (item.isNow) {
|
||||
const date = new Date()
|
||||
const yyyy = date.getFullYear()
|
||||
const mm = String(date.getMonth() + 1).padStart(2, '0') // 月份需要加1，并且补零
|
||||
const dd = String(date.getDate()).padStart(2, '0') // 日需要补零
|
||||
const convertedDate = `${yyyy}${mm}${dd}`
|
||||
const convertedDate2 = `${yyyy}-${mm}-${dd}`
|
||||
if (item.Field === 'tradeDate' || item.Field === 'maturityDate') {
|
||||
item.Value = [convertedDate, convertedDate]
|
||||
} else if (item.Field === 'captureTime') {
|
||||
item.Value = [convertedDate2 + ' 00:00:00', convertedDate2 + ' 23:59:59']
|
||||
}
|
||||
}
|
||||
if (item.isUser) {
|
||||
item.Value = item.Operator === 'EQ' || item.Operator === 'NQ' ? Eui.Share.get('loginId') : [Eui.Share.get('loginId')]
|
||||
}
|
||||
})
|
||||
this.json["queryParam.moreCondition"] = JSON.stringify({ // 交易信息
|
||||
"Condition":"AND",
|
||||
"Rules": moreConditionRule
|
||||
})
|
||||
}
|
||||
this.conditionChange(this.activeName).forEach(item=>{
|
||||
if (this.searchParams[item] && this.searchParams[item].length > 0) {
|
||||
this.json['queryParam.' + item] = JSON.stringify({
|
||||
"Condition":"AND",
|
||||
"Rules":this.searchParams[item]
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取table最大高度
|
||||
handleResize () {
|
||||
const customResult = Array.from(document.getElementsByClassName('customResult')) || []
|
||||
const customResultH = customResult.find(ele => ele.clientHeight > 0)?.clientHeight || 0
|
||||
const tabs = Array.from(document.getElementsByClassName('el-tabs')) || []
|
||||
const tabsH = tabs.find(ele => ele.clientHeight > 0)?.clientHeight || 0
|
||||
const pagination = Array.from(document.getElementsByClassName('el-pagination')) || []
|
||||
const paginationH = pagination.find(ele => ele.clientHeight > 0)?.clientHeight || 0
|
||||
if (this.searchParams.products.length > 0) {
|
||||
this.maxHeight = customResultH - tabsH - paginationH - 10
|
||||
} else {
|
||||
this.maxHeight = customResultH - paginationH - 10
|
||||
}
|
||||
},
|
||||
async init () {
|
||||
this.loading = true
|
||||
this.searchParams = JSON.parse(localStorage.getItem('params'))
|
||||
if (this.searchParams.products.length > 0) {
|
||||
this.tabs = this.searchParams.products
|
||||
this.activeName = this.tabs[0].value
|
||||
await this.queryFieldByProduct()
|
||||
} else {
|
||||
this.tabs = []
|
||||
this.activeName = ''
|
||||
this.tableConfig = [...this.publicConfig]
|
||||
}
|
||||
this.handleResize()
|
||||
this.initJson()
|
||||
this.queryPage(this.json)
|
||||
},
|
||||
async queryPage (params) {
|
||||
let formData = new FormData();
|
||||
formData.append('reqJson', JSON.stringify(params));
|
||||
const res = await queryPage(formData)
|
||||
this.tableData = res.data.result.datals
|
||||
this.total = res.data.result.total
|
||||
this.loading = false
|
||||
},
|
||||
// tab切换
|
||||
async handleClick () {
|
||||
this.currentPage = 1
|
||||
this.pageSize = 50
|
||||
this.loading = true
|
||||
this.initJson()
|
||||
await this.queryFieldByProduct()
|
||||
this.queryPage(this.json)
|
||||
},
|
||||
// 获取产品表头
|
||||
async queryFieldByProduct () {
|
||||
let data = {
|
||||
areaType: 'QueryArea',
|
||||
product: this.activeName
|
||||
}
|
||||
let formData = new FormData();
|
||||
formData.append('reqJson', JSON.stringify(data));
|
||||
const res = await queryFieldByProduct(formData)
|
||||
let arr = []
|
||||
res.data.result.forEach(item => {
|
||||
let obj = {
|
||||
label: item.fieldLocalName,
|
||||
name: item.fieldCode,
|
||||
headerAlign: 'center'
|
||||
}
|
||||
if (item.fieldDataType === '1' || item.fieldDataType === '3') {
|
||||
obj.align = 'center'
|
||||
} else if (item.fieldDataType === '4') {
|
||||
obj.align = 'right'
|
||||
obj.width = 120,
|
||||
obj.showSummary = true
|
||||
}
|
||||
arr.push(obj)
|
||||
});
|
||||
this.tableConfig = [...this.publicConfig, ...arr]
|
||||
this.tableKey = Math.floor(Math.random() * Math.pow(10, 16))
|
||||
},
|
||||
handleSizeChange (e) {
|
||||
this.pageSize = e
|
||||
this.currentPage = 1
|
||||
this.loading = true
|
||||
this.initJson()
|
||||
this.queryPage(this.json)
|
||||
},
|
||||
handleCurrentChange (e) {
|
||||
this.currentPage = e
|
||||
this.loading = true
|
||||
this.initJson()
|
||||
this.queryPage(this.json)
|
||||
},
|
||||
// 账户详情
|
||||
async getFolderInfo (row) {
|
||||
const data = {
|
||||
code: row.folder
|
||||
}
|
||||
let formData = new FormData();
|
||||
formData.append('reqJson', JSON.stringify(data));
|
||||
const res = await getFolderInfo(formData)
|
||||
this.form = {
|
||||
code: res.data.result.code,
|
||||
name: res.data.result.name,
|
||||
localName: res.data.result.localName,
|
||||
bookIdName: res.data.result.bookIdName,
|
||||
currencyId: res.data.result.currencyId + '',
|
||||
folderStatus: res.data.result.folderStatus,
|
||||
accountingSection: res.data.result.accountingSection,
|
||||
homeType: res.data.result.homeType
|
||||
}
|
||||
this.dialogVisible = true
|
||||
},
|
||||
// 操作按钮
|
||||
iconClick (index, row) {
|
||||
if (index === '1') {
|
||||
const dealId = row.dealId
|
||||
const product = row.product
|
||||
const instrument = row.product
|
||||
const data = {
|
||||
id: 1, // id必填 后续通过此id可修改弹窗信息
|
||||
text: '打印', // 标题
|
||||
href: '/dcs/dcs/dcsDailyTradeQuery/tradePrint', // 路由 对应路由表里配置的路由
|
||||
loadMode: 'iframe',
|
||||
width: 750, //宽 必须是数字类型
|
||||
height: 516 - 45,
|
||||
customclass: 'user-modifyPwd', //自定义类名
|
||||
maximize: true, //最大化功能
|
||||
minimize: true, //最小化功能
|
||||
draggable: true, //拖拽功能
|
||||
modal: true, //蒙层
|
||||
appendToBody: true, //是否添加进body
|
||||
closeonclickModal: false, //点击蒙层是否关闭弹窗
|
||||
extraParams: {
|
||||
// 额外参数
|
||||
// loginId: Eui.share.get('loginId')，// 获取登陆loginId
|
||||
dealId,
|
||||
product,
|
||||
instrument
|
||||
}
|
||||
};
|
||||
Eui.openVueWin(data);
|
||||
} else if (index === '2') {
|
||||
const dealId = row.dealId
|
||||
const product = row.product
|
||||
const instrument = row.product
|
||||
const data = {
|
||||
id: 1, // id必填 后续通过此id可修改弹窗信息
|
||||
text: '跟踪', // 标题
|
||||
href: '/dcs/dcs/dcsDailyTradeQuery/tradeQueryTrace', // 路由 对应路由表里配置的路由
|
||||
loadMode: 'iframe',
|
||||
width: 750, //宽 必须是数字类型
|
||||
height: 516 - 45,
|
||||
customclass: 'user-modifyPwd', //自定义类名
|
||||
maximize: true, //最大化功能
|
||||
minimize: true, //最小化功能
|
||||
draggable: true, //拖拽功能
|
||||
modal: true, //蒙层
|
||||
appendToBody: true, //是否添加进body
|
||||
closeonclickModal: false, //点击蒙层是否关闭弹窗
|
||||
extraParams: {
|
||||
// 额外参数
|
||||
// loginId: Eui.share.get('loginId')，// 获取登陆loginId
|
||||
dealId,
|
||||
product
|
||||
}
|
||||
};
|
||||
Eui.openVueWin(data);
|
||||
} else if (index === '3') {
|
||||
const dealId = row.dealId
|
||||
const product = row.product
|
||||
const instrument = row.product
|
||||
let id = this.$menuMap.get('/dcs/dcs/dcsLifeCycle/index')
|
||||
this.$router.push(`/iframe/${id}?dealId=${dealId}&product=${product}&instrument=${instrument}&title=生命周期`)
|
||||
}
|
||||
},
|
||||
onOpenModal(row) {
|
||||
const data = {
|
||||
id: 1, // id必填 后续通过此id可修改弹窗信息
|
||||
text: row.productStr, // 标题
|
||||
href: '/dcs/dcs/dcsInput/index', // 路由 对应路由表里配置的路由
|
||||
loadMode: 'iframe', // 加载方式 iframe
|
||||
width: 750, //宽 必须是数字类型
|
||||
height: 516 - 45,
|
||||
customclass: 'user-modifyPwd', //自定义类名
|
||||
maximize: true, //最大化功能
|
||||
minimize: true, //最小化功能
|
||||
draggable: true, //拖拽功能
|
||||
modal: true, //蒙层
|
||||
appendToBody: true, //是否添加进body
|
||||
closeonclickModal: false, //点击蒙层是否关闭弹窗
|
||||
extraParams: {
|
||||
// 额外参数
|
||||
// loginId: Eui.share.get('loginId')，// 获取登陆loginId
|
||||
dealId: row.dealId,
|
||||
product: row.product
|
||||
}
|
||||
};
|
||||
Eui.openVueWin(data);
|
||||
},
|
||||
// 汇总
|
||||
summaryRender (h, scopeData) {
|
||||
if (this.tableData.length > 0) {
|
||||
const {column} = scopeData
|
||||
let arr = []
|
||||
let tofix = null
|
||||
let sum = null
|
||||
this.tableData.forEach(item=>{
|
||||
tofix = tofix ? tofix : item[column.property].split('.')[1].length
|
||||
arr.push((item[column.property].replace(/,/g, '')) * 1)
|
||||
sum += (item[column.property].replace(/,/g, '')) * 1
|
||||
})
|
||||
let max = Math.max(...arr)
|
||||
let min = Math.min(...arr)
|
||||
let avg = sum/arr.length
|
||||
let sumStr = sum.toLocaleString('en-US', {
|
||||
minimumFractionDigits: tofix,
|
||||
maximumFractionDigits: tofix
|
||||
})
|
||||
let maxStr = max.toLocaleString('en-US', {
|
||||
minimumFractionDigits: tofix,
|
||||
maximumFractionDigits: tofix
|
||||
})
|
||||
let minStr = min.toLocaleString('en-US', {
|
||||
minimumFractionDigits: tofix,
|
||||
maximumFractionDigits: tofix
|
||||
})
|
||||
let avgStr = avg.toLocaleString('en-US', {
|
||||
minimumFractionDigits: tofix,
|
||||
maximumFractionDigits: tofix
|
||||
})
|
||||
let str = `${column.label}: Sum=${sumStr} Max=${maxStr} Avg=${avgStr} Min=${minStr}`
|
||||
return <div style={{ padding: '8px 12px',position: 'fixed', bottom: '58px', left: '0', 'font-size': '13px'}}>{str}</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.customResult{
|
||||
height: 100%;
|
||||
background-color: var(--table-cell-striped-bg);
|
||||
color: var(--color-90);
|
||||
font-size: 12px;
|
||||
.el-tabs__item{
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-form-item, .el-select{
|
||||
width: 100%;
|
||||
}
|
||||
.el-form-item{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.el-input, .el-input__inner, .el-input__suffix span i{
|
||||
height: 20px!important;
|
||||
line-height: 20px!important;
|
||||
}
|
||||
.el-table__fixed-header-wrapper{
|
||||
z-index: 99;
|
||||
}
|
||||
.tableBox {
|
||||
/* .el-table .el-table__body-wrapper{
|
||||
max-height: 600px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
} */
|
||||
.table-action{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
color: var(--blue-50);
|
||||
font-size: 14px;
|
||||
i{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-pagination{
|
||||
text-align: right;
|
||||
position: fixed;
|
||||
bottom: 52px;
|
||||
right: 36px;
|
||||
box-shadow: none;
|
||||
.el-pager li{
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
.el-tabs .el-tabs__header .el-tabs__nav-wrap{
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="date">
|
||||
<h4>{{title}}</h4>
|
||||
<el-form class="t-form" ref="form" :model="form" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-form-item v-for="(item, index) in form" :label="item.label" :key="item.key">
|
||||
<el-select v-model="item.value1" placeholder="" disabled>
|
||||
<el-option v-for="inner in option" :label="inner.text" :value="inner.value"></el-option>
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-model="item.value2"
|
||||
type="daterange"
|
||||
:range-separator="toDate"
|
||||
:start-placeholder="startDate"
|
||||
:end-placeholder="endDate"
|
||||
value-format="yyyyMMdd"
|
||||
@change="dateChange(index)">
|
||||
</el-date-picker>
|
||||
<span @click="nowDate(index)">Today</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'date',
|
||||
data() {
|
||||
return {
|
||||
title: this.$t('field.date'),
|
||||
btn: this.$t('field.currentDate'),
|
||||
startDate: this.$t('field.startDate'),
|
||||
endDate: this.$t('field.endDate'),
|
||||
toDate: this.$t('field.to'),
|
||||
form: [],
|
||||
defaultForm: [
|
||||
{
|
||||
label: this.$t('field.transactionDate'),
|
||||
key: 'tradeDate',
|
||||
value1: 'BT',
|
||||
value2: '',
|
||||
isNow: false
|
||||
},
|
||||
{
|
||||
label: this.$t('field.enterDate'),
|
||||
key: 'captureTime',
|
||||
value1: 'BT',
|
||||
value2: '',
|
||||
isNow: false
|
||||
},
|
||||
{
|
||||
label: this.$t('field.expirationDate'),
|
||||
key: 'maturityDate',
|
||||
value1: 'BT',
|
||||
value2: '',
|
||||
isNow: false
|
||||
}
|
||||
],
|
||||
option: [
|
||||
{
|
||||
text: '=',
|
||||
value: 'BT'
|
||||
},
|
||||
{
|
||||
text: '!=',
|
||||
value: 'NQ'
|
||||
},
|
||||
{
|
||||
text: this.$t('field.contain'),
|
||||
value: 'IN'
|
||||
},
|
||||
{
|
||||
text: this.$t('field.notContain'),
|
||||
value: 'NOT IN'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.reset()
|
||||
},
|
||||
methods: {
|
||||
nowDate (index) {
|
||||
const date = new Date()
|
||||
const yyyy = date.getFullYear()
|
||||
const mm = String(date.getMonth() + 1).padStart(2, '0') // 月份需要加1，并且补零
|
||||
const dd = String(date.getDate()).padStart(2, '0') // 日需要补零
|
||||
const convertedDate = `${yyyy}${mm}${dd}`
|
||||
this.form[index].value2 = [convertedDate, convertedDate]
|
||||
this.form[index].isNow = true
|
||||
},
|
||||
dateChange (index) {
|
||||
this.form[index].isNow = false
|
||||
},
|
||||
submit () {
|
||||
this.form.forEach(item => {
|
||||
if (item.key === 'captureTime' && item.value2.length > 0) { // 录入日期特殊处理
|
||||
item.value3 = item.value2.map((c, i)=>{
|
||||
return `${c.substr(0,4)}-${c.substr(4,2)}-${c.substr(6,2)} ${i > 0 ? '23:59:59' : '00:00:00'}`
|
||||
})
|
||||
}
|
||||
});
|
||||
return this.form
|
||||
},
|
||||
reset () {
|
||||
this.form = JSON.parse(JSON.stringify(this.defaultForm))
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.date{
|
||||
width: 100%;
|
||||
h4{
|
||||
padding: 6px 20px;
|
||||
margin: 0;
|
||||
background-color: var(--select-item-hover-bg);
|
||||
}
|
||||
.t-form{
|
||||
padding: 20px;
|
||||
.el-form-item__content{
|
||||
.el-select{
|
||||
&:first-child{
|
||||
width: 20%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
div{
|
||||
&:nth-of-type(2){
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
span{
|
||||
position: absolute;
|
||||
color: var(--blue-80);
|
||||
right: -70px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.date{
|
||||
width: 100%;
|
||||
.t-form{
|
||||
.el-form-item__content{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div class="saveList">
|
||||
<h4>
|
||||
<i class="el-icon-d-arrow-right" @click="saveHide"></i>
|
||||
<span>{{title}}</span>
|
||||
<span>{{btn}}</span>
|
||||
</h4>
|
||||
<p class="list" v-for="(item, index) in lists" :key="item.text">
|
||||
<span @click="gotoResult(item)">{{item.localName}}</span>
|
||||
<span><i class="el-icon-delete" @click="deleteBtn(item.code)"></i></span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { queryList, doDelete } from '../../../../api/dcsApi.js';
|
||||
export default {
|
||||
name: 'saveList',
|
||||
data() {
|
||||
return {
|
||||
title: this.$t('field.customQueryCombination'),
|
||||
btn: this.$t('field.control'),
|
||||
lists: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.queryList()
|
||||
},
|
||||
methods: {
|
||||
async queryList () {
|
||||
let param = {
|
||||
"queryParam.moduleName": "dcsUserCondition",
|
||||
"queryParam.user": Eui.Share.get("loginId")
|
||||
}
|
||||
let formData = new FormData();
|
||||
formData.append('reqJson', JSON.stringify(param));
|
||||
const res = await queryList(formData)
|
||||
this.lists = res.data.result.datals
|
||||
},
|
||||
gotoResult (item) {
|
||||
this.$emit('gotoResult', item.data)
|
||||
},
|
||||
deleteBtn (code) {
|
||||
this.$confirm(this.$t('field.areYouSureYouWantToPerformThisOperation'), this.$t('field.tip'), {
|
||||
confirmButtonText: this.$t('field.confirm'),
|
||||
cancelButtonText: this.$t('field.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.deleteItem(code)
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
async deleteItem (code) {
|
||||
let param = {
|
||||
"queryParam.moduleName": "dcsUserCondition",
|
||||
"queryParam.domain": JSON.stringify({
|
||||
code: code,
|
||||
user: Eui.Share.get("loginId")
|
||||
})
|
||||
}
|
||||
let formData = new FormData();
|
||||
formData.append('reqJson', JSON.stringify(param));
|
||||
await doDelete(formData)
|
||||
this.queryList()
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: this.$t('field.operationSuccessful')
|
||||
});
|
||||
},
|
||||
saveHide () {
|
||||
this.$emit('saveHide',true)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.saveList{
|
||||
width: 100%;
|
||||
h4{
|
||||
padding: 6px 20px;
|
||||
padding-left: 30px;
|
||||
margin: 0;
|
||||
background-color: var(--select-item-hover-bg);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--scrollBar);
|
||||
position: relative;
|
||||
i{
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
}
|
||||
span{
|
||||
&:first-child{
|
||||
flex: 1;
|
||||
}
|
||||
&:last-child{
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list{
|
||||
padding: 10px 20px;
|
||||
padding-left: 30px;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--scrollBar);
|
||||
&:hover{
|
||||
background-color: var(--blue-10);
|
||||
}
|
||||
span{
|
||||
cursor: pointer;
|
||||
&:first-child{
|
||||
flex: 1;
|
||||
}
|
||||
&:last-child{
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
margin-left: 80px;
|
||||
i{
|
||||
color: var(--color-90);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div class="serialNumber">
|
||||
<h4>{{title}}</h4>
|
||||
<el-form class="t-form" ref="form" :model="form" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-form-item v-for="(item, index) in form" :label="item.label" :key="item.key">
|
||||
<el-select v-model="item.value1" placeholder="" disabled>
|
||||
<el-option v-for="inner in option" :label="inner.text" :value="inner.value"></el-option>
|
||||
</el-select>
|
||||
<el-select v-if="item.type === 'select'" v-model="item.value2" :multiple="item.value1 === 'IN' || item.value1 === 'NOT IN'" :collapse-tags="item.value1 === 'IN' || item.value1 === 'NOT IN'" filterable :placeholder="item.placeholder">
|
||||
<el-option v-for="inner in item.option" :label="inner.text" :value="inner.value"></el-option>
|
||||
</el-select>
|
||||
<el-input v-else-if="item.type === 'input'" type="number" v-model="item.value2" :placeholder="item.placeholder"></el-input>
|
||||
<el-input v-else-if="item.type === 'custom'" v-model="item.value2" :placeholder="item.placeholder" suffix-icon="el-icon-search" @focus="inputFocus"></el-input>
|
||||
<span v-if="item.btn">{{item.btn}}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'serialNumber',
|
||||
data() {
|
||||
return {
|
||||
title: this.$t('field.dealsId'),
|
||||
form: [],
|
||||
defaultForm: [
|
||||
{
|
||||
label: this.$t('field.transactionSerialNumber'),
|
||||
type: 'input',
|
||||
key: 'dealId',
|
||||
value1: 'EQ',
|
||||
value2: '',
|
||||
placeholder: this.$t('field.pleaseInput')
|
||||
},
|
||||
{
|
||||
label: this.$t('field.externalSerialNumber'),
|
||||
type: 'input',
|
||||
key: 'businessId',
|
||||
value1: 'EQ',
|
||||
value2: '',
|
||||
placeholder: this.$t('field.pleaseInput')
|
||||
},
|
||||
{
|
||||
label: this.$t('field.fatherTransactionSerialNumber'),
|
||||
type: 'input',
|
||||
key: 'parentId',
|
||||
value1: 'EQ',
|
||||
value2: '',
|
||||
placeholder: this.$t('field.pleaseInput')
|
||||
},
|
||||
{
|
||||
label: this.$t('field.externalBusinessNumber'),
|
||||
type: 'input',
|
||||
key: 'globalId',
|
||||
value1: 'EQ',
|
||||
value2: '',
|
||||
placeholder: this.$t('field.pleaseInput')
|
||||
},
|
||||
],
|
||||
option: [
|
||||
{
|
||||
text: '=',
|
||||
value: 'EQ'
|
||||
},
|
||||
{
|
||||
text: '!=',
|
||||
value: 'NQ'
|
||||
},
|
||||
{
|
||||
text: this.$t('field.contain'),
|
||||
value: 'IN'
|
||||
},
|
||||
{
|
||||
text: this.$t('field.notContain'),
|
||||
value: 'NOT IN'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.reset()
|
||||
},
|
||||
methods: {
|
||||
submit () {
|
||||
return this.form
|
||||
},
|
||||
reset () {
|
||||
this.form = JSON.parse(JSON.stringify(this.defaultForm))
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.serialNumber{
|
||||
width: 100%;
|
||||
h4{
|
||||
padding: 6px 20px;
|
||||
margin: 0;
|
||||
background-color: var(--select-item-hover-bg);
|
||||
}
|
||||
.t-form{
|
||||
padding: 20px;
|
||||
.el-form-item__content{
|
||||
.el-select{
|
||||
&:first-child{
|
||||
width: 20%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
div{
|
||||
&:nth-of-type(2){
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
span{
|
||||
position: absolute;
|
||||
right: -60px;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
border: 1px solid var(--scrollBar);
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.serialNumber{
|
||||
width: 100%;
|
||||
.t-form{
|
||||
.el-form-item__content{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,780 @@
|
||||
<template>
|
||||
<div class="topSearch">
|
||||
<div class="ts-list" v-for="(list, idx) in searchForm" :key="idx">
|
||||
<div class="leftBox">
|
||||
<i class="el-icon-plus" @click="addItem"></i>
|
||||
<i class="el-icon-delete" @click="delItem(idx)"></i>
|
||||
<span>{{product}}</span>
|
||||
<el-input ref="input" class="l-input" v-model="list.input" placeholder="" @focus="inputFocus(idx)">
|
||||
<i slot="suffix" class="el-input__icon el-icon-search" @click="handleIconClick(idx)"></i>
|
||||
</el-input>
|
||||
<div ref="panel" class="panel" v-show="list.panelShow">
|
||||
<div class="p-item" v-if="list.checkBox.length" v-for="(item, index) in list.checkBox">
|
||||
<el-checkbox v-model="item.checkAll" @change="handleCheckAllChange($event, idx, index)"></el-checkbox>
|
||||
<el-checkbox-group v-model="item.checked" @change="handleCheckedCitiesChange($event, idx, index)">
|
||||
<el-checkbox v-if="filterArr.includes(inner.value)" v-for="inner in item.checkLists" :label="inner.value" :key="inner.item+idx">{{inner.label}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightBox">
|
||||
<el-form ref="form" :model="list.form" label-width="120px">
|
||||
<el-row>
|
||||
<el-col v-for="item in list.formLists" :span="11" :key="item.key+idx">
|
||||
<el-form-item :label="item.label">
|
||||
<el-input v-if="item.type === 'input'" :type="item.inputType" v-model="list.form[item.key]" :placeholder="item.placeholder||''" @blur="inputBlur($event, item, idx)"></el-input>
|
||||
<el-select v-else-if="item.type === 'select'" v-model="list.form[item.key]" filterable :multiple="item.multiple" :collapse-tags="item.collapseTags" :placeholder="item.placeholder||''">
|
||||
<el-option v-for="inner in item.option" :label="inner.text" :value="inner.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { queryComboxData, queryBondList, pubqueryList } from '../../../../api/dcsApi.js';
|
||||
export default {
|
||||
name: 'topSearch',
|
||||
data() {
|
||||
return {
|
||||
filterArr: [],
|
||||
product: this.$t('field.product'),
|
||||
obj: {
|
||||
formLists: [],
|
||||
form: {},
|
||||
input: '',
|
||||
checked: [],
|
||||
type: '',
|
||||
panelShow: false,
|
||||
checkBox: [
|
||||
{
|
||||
checkAll: false,
|
||||
checked: [],
|
||||
checkType: '1',
|
||||
checkLists: [
|
||||
{
|
||||
label: this.$t('field.foreignExchangeSpot'),
|
||||
value: 'FXSPOT'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.foreignExchangeForward'),
|
||||
value: 'FXFWD'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.NDF'),
|
||||
value: 'NDF'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.foreignExchangeSwap'),
|
||||
value: 'FXSWAP'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.preciousMetalsSpot'),
|
||||
value: 'PMSPOT'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.longTermPreciousMetals'),
|
||||
value: 'PMFWD'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.preciousMetalSwap'),
|
||||
value: 'PMSWAP'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
checkAll: false,
|
||||
checked: [],
|
||||
checkType: '2',
|
||||
checkLists: [
|
||||
{
|
||||
label: this.$t('field.foreignExchangeCommonOptions'),
|
||||
value: 'FXOPTION_VANILA'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.foreignExchangeBarrierOptions'),
|
||||
value: 'FXOPTION_BARRIER'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.foreignExchangeDigitalOptions'),
|
||||
value: 'FXOPTION_DIGITAL'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.forexTouchOptions'),
|
||||
value: 'FXOPTION_TOUCH'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.forexAsianOptions'),
|
||||
value: 'FXOPTION_ASIAN'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.preciousMetalCommonOptions'),
|
||||
value: 'PMOPTION_VANILA'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.preciousMetalBarrierOptions'),
|
||||
value: 'PMOPTION_BARRIER'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.preciousMetalDigitalOptions'),
|
||||
value: 'PMOPTION_DIGITAL'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.preciousMetalTouchOptions'),
|
||||
value: 'PMOPTION_TOUCH'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.preciousMetalAsianOptions'),
|
||||
value: 'PMOPTION_ASIAN'
|
||||
},
|
||||
{
|
||||
label: this.$t('menu.straddleOptionsCombo'),
|
||||
value: 'Straddle'
|
||||
},
|
||||
{
|
||||
label: this.$t('menu.strangleOptionsCombo'),
|
||||
value: 'Strangle'
|
||||
},
|
||||
{
|
||||
label: this.$t('menu.butterflyOptionsCombo'),
|
||||
value: 'Butterfly'
|
||||
},
|
||||
{
|
||||
label: this.$t('menu.bullCallSpreadCombo'),
|
||||
value: 'CallSpread'
|
||||
},
|
||||
{
|
||||
label: this.$t('menu.bearPutSpreadCombo'),
|
||||
value: 'PutSpread'
|
||||
},
|
||||
{
|
||||
label: this.$t('menu.seagullOptionsCombo'),
|
||||
value: 'Seagull'
|
||||
},
|
||||
{
|
||||
label: this.$t('menu.riskReversalCombo'),
|
||||
value: 'RiskReversal'
|
||||
},
|
||||
{
|
||||
label: this.$t('menu.participatingForwardCombo'),
|
||||
value: 'ParticipatoryForward'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
checkAll: false,
|
||||
checked: [],
|
||||
checkType: '3',
|
||||
checkLists: [
|
||||
{
|
||||
label: this.$t('field.outrightRepo'),
|
||||
value: 'REPOOUT'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.collateralisedRepo'),
|
||||
value: 'REPO'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.bondLending'),
|
||||
value: 'SECLB'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
checkAll: false,
|
||||
checked: [],
|
||||
checkType: '4',
|
||||
checkLists: [
|
||||
{
|
||||
label: this.$t('field.cashCouponTrading'),
|
||||
value: 'BOND'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.bondForward'),
|
||||
value: 'BONDFWD'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
checkAll: false,
|
||||
checked: [],
|
||||
checkType: '5',
|
||||
checkLists: [
|
||||
{
|
||||
label: this.$t('field.unilateralCashFlow'),
|
||||
value: 'SIMPLECF'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.depositReserve'),
|
||||
value: 'BRR'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.interbankBorrowing'),
|
||||
value: 'IAM'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.preciousMetalLending'),
|
||||
value: 'PMLD'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.multiTermLending'),
|
||||
value: 'LOANDEPO'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.fundAllocation'),
|
||||
value: 'POSALL'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.goldLeasing'),
|
||||
value: 'LEASE'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.creditDefaultSwap'),
|
||||
value: 'CDS'
|
||||
},
|
||||
{
|
||||
label: this.$t('field.forwardRateAgreement'),
|
||||
value: 'FRA'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
checkAll: false,
|
||||
checked: [],
|
||||
checkType: '6',
|
||||
checkLists: [
|
||||
{
|
||||
label: this.$t('menu.irsDeal'),
|
||||
value: 'IRS'
|
||||
},
|
||||
{
|
||||
label: this.$t('menu.interestRateCapFloor'),
|
||||
value: 'CAPFLOOR'
|
||||
},
|
||||
{
|
||||
label: this.$t('menu.interestRateSwaption'),
|
||||
value: 'SWAPTION'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
checkAll: false,
|
||||
checked: [],
|
||||
checkType: '7',
|
||||
checkLists: [
|
||||
{
|
||||
label: this.$t('menu.bondFund'),
|
||||
value: 'BFUND'
|
||||
},
|
||||
{
|
||||
label: this.$t('menu.moneyFund'),
|
||||
value: 'MFUND'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
checkAll: false,
|
||||
checked: [],
|
||||
checkType: '8',
|
||||
checkLists: [
|
||||
{
|
||||
label: this.$t('menu.treasuryBondf'),
|
||||
value: 'BONDF'
|
||||
},
|
||||
{
|
||||
label: this.$t('menu.standardBondf'),
|
||||
value: 'SBONDF'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
checkAll: false,
|
||||
checked: [],
|
||||
checkType: '9',
|
||||
checkLists: [
|
||||
{
|
||||
label: this.$t('menu.ccsDeal'),
|
||||
value: 'CCS'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
searchForm: [],
|
||||
activeIndex: null,
|
||||
formLists: [
|
||||
{
|
||||
label: this.$t('field.currencyPair'),
|
||||
type: 'select',
|
||||
key: 'underlying',
|
||||
multiple: true,
|
||||
collapseTags: true,
|
||||
placeholder: '',
|
||||
option: []
|
||||
},
|
||||
{
|
||||
label: this.$t('field.transactionExchangeRate'),
|
||||
type: 'input',
|
||||
inputType: 'number',
|
||||
key: 'spotRate',
|
||||
placeholder: this.$t('field.pleaseInput'),
|
||||
isFixed: 6
|
||||
},
|
||||
{
|
||||
label: this.$t('field.tradingDirection'),
|
||||
type: 'select',
|
||||
key: 'buySell',
|
||||
multiple: true,
|
||||
collapseTags: true,
|
||||
placeholder: '',
|
||||
option: []
|
||||
}
|
||||
],
|
||||
formLists2: [
|
||||
{
|
||||
label: this.$t('field.currencyPair'),
|
||||
type: 'select',
|
||||
key: 'underlying',
|
||||
multiple: true,
|
||||
collapseTags: true,
|
||||
placeholder: '',
|
||||
option: []
|
||||
},
|
||||
{
|
||||
label: this.$t('field.strikePrice'),
|
||||
type: 'input',
|
||||
inputType: 'number',
|
||||
key: 'strike',
|
||||
placeholder: this.$t('field.pleaseInput'),
|
||||
isFixed: 6
|
||||
},
|
||||
{
|
||||
label: this.$t('field.tradingDirection'),
|
||||
type: 'select',
|
||||
key: 'buySell',
|
||||
multiple: true,
|
||||
collapseTags: true,
|
||||
placeholder: '',
|
||||
option: []
|
||||
},
|
||||
{
|
||||
label: this.$t('field.deliveryMethods'),
|
||||
type: 'select',
|
||||
key: 'settlementMode',
|
||||
multiple: true,
|
||||
collapseTags: true,
|
||||
placeholder: '',
|
||||
option: []
|
||||
}
|
||||
],
|
||||
formLists3: [
|
||||
{
|
||||
label: this.$t('menu.currency'),
|
||||
type: 'select',
|
||||
key: 'ccy',
|
||||
multiple: true,
|
||||
collapseTags: true,
|
||||
placeholder: '',
|
||||
option: []
|
||||
},
|
||||
{
|
||||
label: this.$t('field.tradingDirection'),
|
||||
type: 'select',
|
||||
key: 'buySell',
|
||||
multiple: true,
|
||||
collapseTags: true,
|
||||
placeholder: '',
|
||||
option: []
|
||||
}
|
||||
],
|
||||
formLists4: [
|
||||
{
|
||||
label: this.$t('field.tradingDirection'),
|
||||
type: 'select',
|
||||
key: 'buySell',
|
||||
multiple: true,
|
||||
collapseTags: true,
|
||||
placeholder: '',
|
||||
option: []
|
||||
},
|
||||
{
|
||||
label: this.$t('field.bondCode'),
|
||||
type: 'select',
|
||||
key: 'bond',
|
||||
multiple: true,
|
||||
collapseTags: true,
|
||||
placeholder: '',
|
||||
option: []
|
||||
},
|
||||
{
|
||||
label: this.$t('field.custodianInstitution'),
|
||||
type: 'select',
|
||||
key: 'bondsTrustee',
|
||||
multiple: true,
|
||||
collapseTags: true,
|
||||
placeholder: '',
|
||||
option: []
|
||||
}
|
||||
],
|
||||
formLists6: [
|
||||
{
|
||||
label: this.$t('menu.currency'),
|
||||
type: 'select',
|
||||
key: 'ccy',
|
||||
multiple: true,
|
||||
collapseTags: true,
|
||||
placeholder: '',
|
||||
option: []
|
||||
}
|
||||
],
|
||||
formLists8: [
|
||||
{
|
||||
label: this.$t('menu.contract'),
|
||||
type: 'select',
|
||||
key: 'contract',
|
||||
multiple: true,
|
||||
collapseTags: true,
|
||||
placeholder: '',
|
||||
option: []
|
||||
},
|
||||
{
|
||||
label: this.$t('field.tradingDirection'),
|
||||
type: 'select',
|
||||
key: 'buySell',
|
||||
multiple: true,
|
||||
collapseTags: true,
|
||||
placeholder: '',
|
||||
option: []
|
||||
}
|
||||
],
|
||||
formLists9: [
|
||||
{
|
||||
label: this.$t('field.currencyPair'),
|
||||
type: 'select',
|
||||
key: 'underlying',
|
||||
multiple: true,
|
||||
collapseTags: true,
|
||||
placeholder: '',
|
||||
option: []
|
||||
}
|
||||
],
|
||||
formLists10: [
|
||||
{
|
||||
label: this.$t('field.currencyPair'),
|
||||
type: 'select',
|
||||
key: 'underlying',
|
||||
multiple: true,
|
||||
collapseTags: true,
|
||||
placeholder: '',
|
||||
option: []
|
||||
},
|
||||
{
|
||||
label: this.$t('field.strikePrice'),
|
||||
type: 'input',
|
||||
inputType: 'number',
|
||||
key: 'strike',
|
||||
placeholder: this.$t('field.pleaseInput'),
|
||||
isFixed: 6
|
||||
},
|
||||
{
|
||||
label: this.$t('field.tradingDirection'),
|
||||
type: 'select',
|
||||
key: 'buySell',
|
||||
multiple: true,
|
||||
collapseTags: true,
|
||||
placeholder: '',
|
||||
option: []
|
||||
},
|
||||
{
|
||||
label: this.$t('field.deliveryMethods'),
|
||||
type: 'select',
|
||||
key: 'settlementMode',
|
||||
multiple: true,
|
||||
collapseTags: true,
|
||||
placeholder: '',
|
||||
option: []
|
||||
},
|
||||
{
|
||||
label: this.$t('field.combinationNumber'),
|
||||
type: 'input',
|
||||
key: 'contractId',
|
||||
placeholder: this.$t('field.pleaseInput')
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
created() {
|
||||
document.addEventListener('click', this.handleClickOutside);
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.removeEventListener('click', this.handleClickOutside);
|
||||
},
|
||||
methods: {
|
||||
async init () {
|
||||
await this.getOption()
|
||||
await this.queryList()
|
||||
this.reset()
|
||||
},
|
||||
async queryList () {
|
||||
let param = {
|
||||
"queryParam.moduleName": "pubProduct",
|
||||
"queryParam.keyWord": undefined
|
||||
}
|
||||
let formData = new FormData();
|
||||
formData.append('reqJson', JSON.stringify(param));
|
||||
const res = await pubqueryList(formData)
|
||||
if ( res.data?.result?.datals) {
|
||||
this.filterArr = res.data.result.datals.map((item)=>{return item.code})
|
||||
// this.filterArr = ['FXSPOT','REPOOUT','BONDFWD']
|
||||
// console.log('this.filterArr',this.filterArr)
|
||||
this.obj.checkBox.forEach(item=>{
|
||||
item.checkLists = item.checkLists.filter(c=>this.filterArr.includes(c.value))
|
||||
})
|
||||
}
|
||||
},
|
||||
async getOption () {
|
||||
let formData = new FormData();
|
||||
formData.append('reqJson', '{"codifierGrpCodes": "static_pairs,OptionSettlementMode,static_currencies,static_trusteeList,static_contract,BuySellRcs"}');
|
||||
const res = await queryComboxData(formData)
|
||||
const result = res.data.result
|
||||
this.formLists[0].option = this.formLists2[0].option = this.formLists10[0].option = this.formLists9[0].option = result.pairs
|
||||
this.formLists2[3].option = this.formLists10[3].option = result.OptionSettlementMode
|
||||
this.formLists3[0].option = this.formLists6[0].option = result.currencies
|
||||
this.formLists4[2].option = result.trusteeList
|
||||
this.formLists8[0].option = result.contract
|
||||
this.formLists[2].option = this.formLists2[2].option = this.formLists10[2].option = this.formLists3[1].option = this.formLists4[0].option = this.formLists8[1].option = result.BuySellRcs
|
||||
// 债券检索
|
||||
let formData2 = new FormData();
|
||||
formData2.append('reqJson', '{"q":"","queryParam.pageLimit":"100"}');
|
||||
const res2 = await queryBondList(formData2)
|
||||
this.formLists4[1].option = res2.data.result.map(item=>{
|
||||
return {
|
||||
text: item.localName,
|
||||
value: item.code
|
||||
}
|
||||
})
|
||||
},
|
||||
includesArray (arr1, arr2) {
|
||||
return arr1.some(element => arr2.includes(element.value))
|
||||
},
|
||||
inputFocus (index) {
|
||||
this.activeIndex = index
|
||||
let list = this.searchForm[index].checkBox
|
||||
for(let i = list.length - 1; i > 0; i--) {
|
||||
if (!this.includesArray(list[i].checkLists, this.filterArr)) {
|
||||
this.searchForm[index].checkBox.splice(i,1)
|
||||
}
|
||||
}
|
||||
this.$set(this.searchForm[index], 'panelShow', true)
|
||||
},
|
||||
handleIconClick (index) {
|
||||
this.activeIndex = index
|
||||
this.$set(this.searchForm[index], 'panelShow', true)
|
||||
},
|
||||
handleCheckAllChange (val, idx, index) {
|
||||
this.searchForm[idx].checkBox.forEach(item => {
|
||||
item.checkAll = false
|
||||
item.checked = []
|
||||
})
|
||||
this.searchForm[idx].checkBox[index].checkAll = val ? true : false
|
||||
this.searchForm[idx].checkBox[index].checked = val ? this.searchForm[idx].checkBox[index].checkLists.map(c=>c.value) : []
|
||||
},
|
||||
handleCheckedCitiesChange (val, idx, index) {
|
||||
this.searchForm[idx].checkBox.forEach(item => {
|
||||
item.checkAll = false
|
||||
item.checked = []
|
||||
})
|
||||
this.searchForm[idx].checkBox[index].checked = val
|
||||
},
|
||||
// 点击弹层以外关闭弹层
|
||||
handleClickOutside(e, flag=false) {
|
||||
if (flag) {
|
||||
this.formatJson()
|
||||
} else if (this.searchForm[this.activeIndex]?.panelShow && ((e.target.offsetParent.className.indexOf('l-input') === -1 || e.target.form) && e.target.className != 'el-checkbox__original' && e.target.className != 'el-checkbox__label' && e.target.className != 'el-checkbox__inner' && e.target.offsetParent.className != 'panel')) {
|
||||
this.formatJson()
|
||||
}
|
||||
},
|
||||
formatJson () {
|
||||
if (this.activeIndex !== null) {
|
||||
this.searchForm[this.activeIndex].panelShow = false
|
||||
let obj = this.searchForm[this.activeIndex].checkBox.filter(c=>c.checked.length > 0)[0]
|
||||
this.searchForm[this.activeIndex].type = obj?.checkType
|
||||
if (this.searchForm.filter(c=>c.type===obj?.checkType).length > 1) {
|
||||
this.searchForm[this.activeIndex].type = ''
|
||||
this.$alert(this.$t('field.thisCategoryAlreadyExists'), this.$t('field.warn'), {
|
||||
confirmButtonText: this.$t('field.confirm')
|
||||
});
|
||||
} else {
|
||||
this.searchForm[this.activeIndex].input = obj?.checkLists.filter(e=>obj.checked.includes(e.value)).map(c=>c.label)
|
||||
this.searchForm[this.activeIndex].checked = obj?.checkLists.filter(e=>obj.checked.includes(e.value)).map(c=>c.value)
|
||||
this.searchForm[this.activeIndex].checkedBox = obj?.checkLists.filter(e=>obj.checked.includes(e.value))
|
||||
}
|
||||
switch (this.searchForm[this.activeIndex].type) {
|
||||
case '1':
|
||||
this.$set(this.searchForm[this.activeIndex], 'formLists', JSON.parse(JSON.stringify(this.formLists)))
|
||||
break;
|
||||
case '2':
|
||||
let arr = ["Straddle", "Strangle", "Butterfly", "CallSpread", "PutSpread", "Seagull", "RiskReversal", "ParticipatoryForward"]
|
||||
if (arr.some(value => this.searchForm[this.activeIndex].checked.includes(value))) {
|
||||
this.$set(this.searchForm[this.activeIndex], 'formLists', JSON.parse(JSON.stringify(this.formLists10)))
|
||||
} else {
|
||||
this.$set(this.searchForm[this.activeIndex], 'formLists', JSON.parse(JSON.stringify(this.formLists2)))
|
||||
}
|
||||
break;
|
||||
case '3':
|
||||
this.$set(this.searchForm[this.activeIndex], 'formLists', JSON.parse(JSON.stringify(this.formLists3)))
|
||||
break;
|
||||
case '4':
|
||||
this.$set(this.searchForm[this.activeIndex], 'formLists', JSON.parse(JSON.stringify(this.formLists4)))
|
||||
break;
|
||||
case '5':
|
||||
this.$set(this.searchForm[this.activeIndex], 'formLists', JSON.parse(JSON.stringify(this.formLists3)))
|
||||
break;
|
||||
case '6':
|
||||
this.$set(this.searchForm[this.activeIndex], 'formLists', JSON.parse(JSON.stringify(this.formLists6)))
|
||||
break;
|
||||
case '7':
|
||||
this.$set(this.searchForm[this.activeIndex], 'formLists', JSON.parse(JSON.stringify(this.formLists6)))
|
||||
break;
|
||||
case '8':
|
||||
this.$set(this.searchForm[this.activeIndex], 'formLists', JSON.parse(JSON.stringify(this.formLists8)))
|
||||
break;
|
||||
case '9':
|
||||
this.$set(this.searchForm[this.activeIndex], 'formLists', JSON.parse(JSON.stringify(this.formLists9)))
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
let json = {}
|
||||
this.searchForm[this.activeIndex].formLists.forEach(item=>{
|
||||
if (item.type === 'select' && item.multiple) {
|
||||
json[item.key] = []
|
||||
} else {
|
||||
json[item.key] = ''
|
||||
}
|
||||
})
|
||||
this.$set(this.searchForm[this.activeIndex], 'form', json)
|
||||
}
|
||||
},
|
||||
addItem () {
|
||||
let status = true
|
||||
for(let i = 0; i < this.searchForm.length; i++) {
|
||||
if(!this.searchForm[i].input) {
|
||||
status = false
|
||||
break
|
||||
}
|
||||
}
|
||||
if (status) {
|
||||
this.searchForm.push(JSON.parse(JSON.stringify(this.obj)))
|
||||
}
|
||||
},
|
||||
delItem (index) {
|
||||
if (this.searchForm.length > 1) {
|
||||
this.searchForm.splice(index, 1)
|
||||
} else {
|
||||
this.searchForm.splice(index, 1)
|
||||
this.searchForm.push(JSON.parse(JSON.stringify(this.obj)))
|
||||
}
|
||||
},
|
||||
topSubmit () {
|
||||
return this.searchForm
|
||||
},
|
||||
reset () {
|
||||
this.searchForm = [JSON.parse(JSON.stringify(this.obj))]
|
||||
},
|
||||
inputBlur (e, item, index) {
|
||||
if (item.isFixed && e.target.value) {
|
||||
let num = 0
|
||||
if (item.key === 'spotRate' && e.target.value > 100000) {
|
||||
num = 100000
|
||||
} else if (item.key === 'spotRate' && e.target.value < -100000) {
|
||||
num = -100000
|
||||
} else if (item.key === 'strike' && e.target.value > 1000000000000000) {
|
||||
num = 1000000000000000
|
||||
} else if (item.key === 'strike' && e.target.value < -1000000000000000) {
|
||||
num = -1000000000000000
|
||||
} else {
|
||||
num = e.target.value
|
||||
}
|
||||
this.searchForm[index].form[item.key] = parseFloat(num).toFixed(item.isFixed)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.topSearch{
|
||||
padding: 20px;
|
||||
.ts-list{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
.leftBox{
|
||||
width: 300px;
|
||||
margin: 0;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.el-input{
|
||||
width: 200px;
|
||||
}
|
||||
&>i{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.rightBox{
|
||||
margin-left: 50px;
|
||||
flex: 1;
|
||||
.el-select{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.panel{
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
top: 30px;
|
||||
z-index: 3;
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: var(--table-cell-striped-bg);
|
||||
border: 1px solid var(--scrollBar);
|
||||
.p-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--scrollBar);
|
||||
&:last-child{
|
||||
border: none;
|
||||
}
|
||||
&>.el-checkbox{
|
||||
padding: 0 10px;
|
||||
}
|
||||
.el-checkbox-group{
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border-left: 1px solid var(--scrollBar);
|
||||
.el-checkbox{
|
||||
width: 30%;
|
||||
margin-right: 3%;
|
||||
margin-top: 10px;
|
||||
&:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,446 @@
|
||||
<template>
|
||||
<div class="transaction">
|
||||
<h4>{{title}}</h4>
|
||||
<el-form class="t-form" ref="form" :model="form" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-form-item v-for="(item, index) in form" :label="item.label" :key="item.key">
|
||||
<el-select v-model="item.value1" placeholder="" @change="selectChange($event, index)">
|
||||
<el-option v-for="inner in option" :label="inner.text" :value="inner.value"></el-option>
|
||||
</el-select>
|
||||
<el-select v-if="item.type === 'select'" :key="item.selectKey" v-model="item.value2" :multiple="item.multiple" :collapse-tags="item.collapseTags" filterable :placeholder="item.placeholder">
|
||||
<el-option v-for="inner in item.option" :label="inner.text" :value="inner.value"></el-option>
|
||||
</el-select>
|
||||
<el-input v-else-if="item.type === 'input'" v-model="item.value2" :placeholder="item.placeholder" @change="inputChange(index)"></el-input>
|
||||
<el-input v-else-if="item.type === 'custom'" v-model="item.value2" :placeholder="item.placeholder" @focus="inputFocus">
|
||||
<i slot="suffix" class="el-input__icon el-icon-search" @click="handleIconClick"></i>
|
||||
</el-input>
|
||||
<span v-if="item.btn" @click="nowUser">{{item.btn}}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
width="600px"
|
||||
:before-close="handleClose">
|
||||
<span slot="title">
|
||||
<el-select v-model="dialogValue" filterable placeholder="" @change="dialogSelectChange">
|
||||
<el-option v-for="inner in dialogOption" :label="inner.text" :value="inner.value"></el-option>
|
||||
</el-select>
|
||||
</span>
|
||||
<div class="d-box" :key="form[1]?.selectKey">
|
||||
<template v-if="dialogValue==='1'">
|
||||
<!-- <el-input v-model="treeSearch" :placeholder="pleaseInput"/>
|
||||
<transition>
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
show-checkbox
|
||||
check-strictly
|
||||
:filter-node-method="filterNode"
|
||||
:render-content="renderContent"
|
||||
@check-change="handleCheckChange">
|
||||
</el-tree>
|
||||
</transition> -->
|
||||
<div class="folder">
|
||||
<el-select v-model="treeValue" :multiple="form[1]?.multiple" :collapse-tags="form[1]?.collapseTags" filterable :placeholder="pleaseSelect">
|
||||
<el-option v-for="inner in treeData" :label="inner.text" :value="inner.value"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="folder">
|
||||
<el-select v-model="folderValue" :multiple="form[1]?.multiple" :collapse-tags="form[1]?.collapseTags" filterable :placeholder="pleaseSelect">
|
||||
<el-option v-for="inner in folderOption" :label="inner.text" :value="inner.value"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button class="btn" @click="dialogVisible=false">{{this.$t('field.cancel')}}</el-button>
|
||||
<el-button class="btn" type="primary" @click="dialogSubmit">{{this.$t('field.confirm')}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { queryComboxData, queryCptyPage, queryFolderQueryAuthList } from '../../../../api/dcsApi.js';
|
||||
export default {
|
||||
name: 'transaction',
|
||||
data() {
|
||||
return {
|
||||
title: this.$t('field.transaction'),
|
||||
form: [],
|
||||
defaultForm: [
|
||||
{
|
||||
label: this.$t('menu.counterparty'),
|
||||
type: 'select',
|
||||
key: 'cpty',
|
||||
value1: 'EQ',
|
||||
value2: [],
|
||||
placeholder: '',
|
||||
option: [],
|
||||
multiple: false,
|
||||
collapseTags: false,
|
||||
selectKey: 1
|
||||
},
|
||||
{
|
||||
label: this.$t('field.folderGroup'),
|
||||
type: 'custom',
|
||||
key: 'folder',
|
||||
value1: 'EQ',
|
||||
value2: '',
|
||||
id: '',
|
||||
placeholder: '',
|
||||
multiple: false,
|
||||
collapseTags: false,
|
||||
selectKey: 1
|
||||
},
|
||||
{
|
||||
label: this.$t('field.operatingUsers'),
|
||||
type: 'input',
|
||||
key: 'takerId',
|
||||
value1: 'EQ',
|
||||
value2: '',
|
||||
placeholder: '',
|
||||
btn: this.$t('field.currentUser')
|
||||
},
|
||||
{
|
||||
label: this.$t('field.salesman'),
|
||||
type: 'input',
|
||||
key: 'ext4',
|
||||
value1: 'EQ',
|
||||
value2: '',
|
||||
placeholder: this.$t('field.pleaseInput')
|
||||
},
|
||||
{
|
||||
label: this.$t('field.transactionStatus'),
|
||||
type: 'select',
|
||||
key: 'dealStatus',
|
||||
value1: 'EQ',
|
||||
value2: [],
|
||||
placeholder: '',
|
||||
option: [],
|
||||
multiple: false,
|
||||
collapseTags: false,
|
||||
selectKey: 1
|
||||
},
|
||||
{
|
||||
label: this.$t('field.natureOfTransaction'),
|
||||
type: 'select',
|
||||
key: 'dealFlag',
|
||||
value1: 'EQ',
|
||||
value2: [],
|
||||
placeholder: '',
|
||||
option: [],
|
||||
multiple: false,
|
||||
collapseTags: false,
|
||||
selectKey: 1
|
||||
},
|
||||
{
|
||||
label: this.$t('field.transactionPurpose'),
|
||||
type: 'input',
|
||||
key: 'ext20',
|
||||
value1: 'EQ',
|
||||
value2: '',
|
||||
placeholder: ''
|
||||
},
|
||||
{
|
||||
label: this.$t('field.sourceOfTransaction'),
|
||||
type: 'input',
|
||||
key: 'sourceName',
|
||||
value1: 'EQ',
|
||||
value2: '',
|
||||
placeholder: ''
|
||||
}
|
||||
],
|
||||
option: [
|
||||
{
|
||||
text: '=',
|
||||
value: 'EQ'
|
||||
},
|
||||
{
|
||||
text: '!=',
|
||||
value: 'NQ'
|
||||
},
|
||||
{
|
||||
text: this.$t('field.contain'),
|
||||
value: 'IN'
|
||||
},
|
||||
{
|
||||
text: this.$t('field.notContain'),
|
||||
value: 'NOT IN'
|
||||
}
|
||||
],
|
||||
dialogVisible: false,
|
||||
dialogValue: '1',
|
||||
dialogOption: [
|
||||
{
|
||||
text: this.$t('field.accountSearch'),
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
text: this.$t('field.accountGroupSearch'),
|
||||
value: '2'
|
||||
}
|
||||
],
|
||||
treeSearch: '',
|
||||
defaultProps: {
|
||||
label: 'id',
|
||||
children: 'children'
|
||||
},
|
||||
treeValue: '',
|
||||
treeData: [],
|
||||
folderValue: [],
|
||||
folderOption: [],
|
||||
pleaseInput: this.$t('field.pleaseInput'),
|
||||
pleaseSelect: this.$t('field.pleaseSelect')
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
treeSearch (val) {
|
||||
this.$refs.tree.filter(val)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
async init () {
|
||||
await this.getOption()
|
||||
this.reset()
|
||||
},
|
||||
async getOption () {
|
||||
// 通用
|
||||
let formData = new FormData();
|
||||
formData.append('reqJson', '{"codifierGrpCodes": "DealFlagRcs,dealStatusList,folderTreeAuthWithGrp"}');
|
||||
const res = await queryComboxData(formData)
|
||||
this.defaultForm[4].option = res.data.result.dealStatusList
|
||||
this.defaultForm[5].option = res.data.result.DealFlagRcs
|
||||
// this.treeData = res.data.result.folderTreeAuthWithGrp.filter(c=>c.id.indexOf('E@@') !== -1) // 账户
|
||||
this.folderOption = res.data.result.folderTreeAuthWithGrp.filter(c=>c.id.indexOf('E@@') == -1) // 账户组
|
||||
|
||||
// 交易对手
|
||||
let json = {
|
||||
"q":"",
|
||||
"queryParam.loginId": Eui.Share.get("loginId"),
|
||||
"queryParam.bankId": Eui.Share.get("bankId")
|
||||
}
|
||||
let formData2 = new FormData();
|
||||
formData2.append('reqJson', JSON.stringify(json));
|
||||
const res2 = await queryCptyPage(formData2)
|
||||
this.defaultForm[0].option = res2.data.result.datals.map(item=>{
|
||||
return {
|
||||
text: item.localName,
|
||||
value: item.code
|
||||
}
|
||||
})
|
||||
|
||||
// 账户/账户组
|
||||
let json2 = {
|
||||
"q":"",
|
||||
"loginId": Eui.Share.get("loginId"),
|
||||
"bankId": Eui.Share.get("bankId")
|
||||
}
|
||||
let formData3 = new FormData();
|
||||
formData3.append('reqJson', JSON.stringify(json2));
|
||||
const res3 = await queryFolderQueryAuthList(formData3)
|
||||
this.treeData = res3.data.result.map(item=>{
|
||||
return {
|
||||
text: item.localName,
|
||||
value: 'F@@' + item.code
|
||||
}
|
||||
})
|
||||
},
|
||||
inputFocus () {
|
||||
this.dialogVisible = true
|
||||
// this.dialogValue = '1'
|
||||
},
|
||||
handleIconClick () {
|
||||
this.dialogVisible = true
|
||||
},
|
||||
filterNode (value, data) { // 筛选树
|
||||
if (!value) return true
|
||||
if (data.id) {
|
||||
return data.id.indexOf(value) !== -1
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
renderContent(h, { node, data, store }) {
|
||||
return (
|
||||
<span class="custom-tree-node">
|
||||
<span>{data.id.substr(3)}</span>
|
||||
<span>{data.text}</span>
|
||||
</span>);
|
||||
},
|
||||
dialogSelectChange () {
|
||||
this.treeValue = []
|
||||
this.folderValue = []
|
||||
},
|
||||
handleCheckChange(data, checked, node) {
|
||||
if (checked) {
|
||||
// 当节点被选中时，取消其他所有节点的选中状态，除了当前节点自身。
|
||||
this.$refs.tree.setCheckedKeys([]); // 清空所有选中项，但不包括当前节点）
|
||||
this.$refs.tree.setChecked(data, true, true); // 设置当前节点为选中状态，第三个参数 true 表示不触发回调函数
|
||||
}
|
||||
},
|
||||
dialogSubmit () {
|
||||
if (this.dialogValue === '1') {
|
||||
// this.form[1].value2 = this.$refs.tree.getCheckedNodes()[0]?.text || ''
|
||||
// this.form[1].id = this.$refs.tree.getCheckedNodes()[0]?.id || ''
|
||||
// this.$refs.tree.setCheckedKeys([])
|
||||
// for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
|
||||
// // 遍历 el-tree 的每个节点，将节点的 expanded 属性设为 true 或 false
|
||||
// this.$refs.tree.store._getAllNodes()[i].expanded = false
|
||||
// }
|
||||
|
||||
let arr = []
|
||||
this.treeData.forEach(item => {
|
||||
if (this.form[1].multiple) {
|
||||
this.treeValue.forEach(e=>{
|
||||
if(e === item.value) {
|
||||
arr.push(item.text)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
if (this.treeValue === item.value) {
|
||||
arr.push(item.text)
|
||||
}
|
||||
}
|
||||
});
|
||||
this.form[1].value2 = arr
|
||||
this.form[1].id = this.treeValue
|
||||
} else {
|
||||
let arr = []
|
||||
this.folderOption.forEach(item => {
|
||||
if (this.form[1].multiple) {
|
||||
this.folderValue.forEach(e=>{
|
||||
if(e === item.value) {
|
||||
arr.push(item.text)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
if (this.folderValue === item.value) {
|
||||
arr.push(item.text)
|
||||
}
|
||||
}
|
||||
});
|
||||
this.form[1].value2 = arr
|
||||
this.form[1].id = this.folderValue
|
||||
}
|
||||
this.dialogVisible = false
|
||||
// if (this.form[1].id.length > 0) {
|
||||
// this.dialogVisible = false
|
||||
// }
|
||||
},
|
||||
// 切换左侧相等、包含，清空右侧筛选条件
|
||||
selectChange (e, index) {
|
||||
this.form[index].selectKey++
|
||||
if (e === 'EQ' || e === 'NQ') {
|
||||
this.$set(this.form[index], 'value2', '')
|
||||
this.form[index].multiple = false
|
||||
this.form[index].collapseTags = false
|
||||
} else {
|
||||
this.$set(this.form[index], 'value2', [])
|
||||
this.form[index].multiple = true
|
||||
this.form[index].collapseTags = true
|
||||
}
|
||||
},
|
||||
// 当前用户
|
||||
nowUser () {
|
||||
this.form[2].value2 = Eui.Share.get('loginId')
|
||||
this.form[2].isUser = true
|
||||
},
|
||||
inputChange (index) {
|
||||
if (index === 2) {
|
||||
this.form[2].isUser = false
|
||||
}
|
||||
},
|
||||
submit () {
|
||||
return this.form
|
||||
},
|
||||
reset () {
|
||||
this.form = JSON.parse(JSON.stringify(this.defaultForm))
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.transaction{
|
||||
width: 100%;
|
||||
h4{
|
||||
padding: 6px 20px;
|
||||
margin: 0;
|
||||
background-color: var(--select-item-hover-bg);
|
||||
}
|
||||
.t-form{
|
||||
padding: 20px;
|
||||
.el-form-item__content{
|
||||
.el-select{
|
||||
&:first-child{
|
||||
width: 20%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
div{
|
||||
&:nth-of-type(2){
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
span{
|
||||
position: absolute;
|
||||
color: var(--blue-80);
|
||||
right: -70px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.transaction{
|
||||
width: 100%;
|
||||
.t-form{
|
||||
.el-form-item__content{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.el-dialog__header{
|
||||
height: 50px;
|
||||
}
|
||||
.el-dialog .el-dialog__body{
|
||||
.el-tree{
|
||||
max-height: 400px;
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.folder{
|
||||
.el-select{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
span:last-child {
|
||||
color: var(--blue-80);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,505 @@
|
||||
<template>
|
||||
<div class="customSearch">
|
||||
<div class="el-row">
|
||||
<div :class="saveShow?'width-75':'width-100'">
|
||||
<TopSearch ref="topSearch"></TopSearch>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="middle">
|
||||
<Transaction ref="transaction"></Transaction>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="middle middle2">
|
||||
<SerialNumber ref="serialNumber"></SerialNumber>
|
||||
<Date ref="date"></Date>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="width-25 col-right" v-show="saveShow">
|
||||
<div class="right">
|
||||
<SaveList ref="saveList" @gotoResult="gotoResult" @saveHide="saveHide"></SaveList>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-right arrow-left" v-show="!saveShow">
|
||||
<i class="el-icon-d-arrow-left" @click="saveShow=true"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<el-button type="primary" class="btn" @click="search">{{btn1}}</el-button>
|
||||
<el-button plain class="btn" @click="reset">{{btn2}}</el-button>
|
||||
<el-button type="success" class="btn" @click="dialogVisible=true">{{btn3}}</el-button>
|
||||
</div>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="400px"
|
||||
:before-close="handleClose">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-form-item :label="this.$t('field.code')" prop="code">
|
||||
<el-input v-model="form.code" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('field.shortName')" prop="name">
|
||||
<el-input v-model="form.name" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('field.name')">
|
||||
<el-input v-model="form.localName" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" class="btn" @click="submitForm">{{this.$t('field.save')}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TopSearch from "./components/topSearch.vue";
|
||||
import Transaction from "./components/transaction.vue";
|
||||
import SerialNumber from "./components/serialNumber.vue";
|
||||
import Date from "./components/date.vue";
|
||||
import SaveList from "./components/saveList.vue";
|
||||
import { doSave } from '../../../api/dcsApi.js';
|
||||
export default {
|
||||
name: 'customSearch',
|
||||
components: {
|
||||
TopSearch,
|
||||
Transaction,
|
||||
SerialNumber,
|
||||
Date,
|
||||
SaveList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
btn1: this.$t('field.search'),
|
||||
btn2: this.$t('field.reset'),
|
||||
btn3: this.$t('field.saveAs'),
|
||||
title: this.$t('field.saveAs'),
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
code: '',
|
||||
name: '',
|
||||
localName: ''
|
||||
},
|
||||
rules: {
|
||||
code: [{ required: true, message: this.$t('field.pleaseInput'), trigger: 'blur' }],
|
||||
name: [{ required: true, message: this.$t('field.pleaseInput'), trigger: 'blur' }],
|
||||
},
|
||||
saveShow: true
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
getParam () {
|
||||
const option = [
|
||||
{
|
||||
text: '=',
|
||||
value: 'EQ'
|
||||
},
|
||||
{
|
||||
text: '!=',
|
||||
value: 'NQ'
|
||||
},
|
||||
{
|
||||
text: this.$t('field.contain'),
|
||||
value: 'IN'
|
||||
},
|
||||
{
|
||||
text: this.$t('field.notContain'),
|
||||
value: 'NOT IN'
|
||||
}
|
||||
]
|
||||
// 顶部查询处理
|
||||
const topSearch = this.$refs.topSearch.topSubmit()
|
||||
let products = []
|
||||
let topSearchRule = []
|
||||
topSearch.forEach(item=>{
|
||||
// products.push(...item.checked)
|
||||
let type = ''
|
||||
switch (item.type) {
|
||||
case "1":
|
||||
type = 'foreignExchangeCondition'
|
||||
break;
|
||||
case "2":
|
||||
type = 'fxoptionCondition'
|
||||
break;
|
||||
case "3":
|
||||
type = 'repoCondition'
|
||||
break;
|
||||
case "4":
|
||||
type = 'bondCondition'
|
||||
break;
|
||||
case "5":
|
||||
type = 'cashflowCondition'
|
||||
break;
|
||||
case "6":
|
||||
type = 'instrumentlegCondition'
|
||||
break;
|
||||
case "7":
|
||||
type = 'fundCondition'
|
||||
break;
|
||||
case "8":
|
||||
type = 'futureCondition'
|
||||
break;
|
||||
case "9":
|
||||
type = 'instrumentlegCondition2'
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
item.checkedBox?.forEach(c=>{
|
||||
products.push({
|
||||
...c,
|
||||
type: type
|
||||
})
|
||||
})
|
||||
item.formLists.forEach(e=>{
|
||||
let obj = {
|
||||
Operator: e.type === 'select' ? 'IN' : 'EQ',
|
||||
FieldChsname: e.label,
|
||||
FieldEngname: e.key,
|
||||
Field: e.key,
|
||||
Value: item.form[e.key],
|
||||
type: type
|
||||
}
|
||||
if (item.form[e.key].length > 0) {
|
||||
topSearchRule.push(obj)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const foreignExchangeCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'foreignExchangeCondition')
|
||||
const fxoptionCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.Field !== 'contractId' && c.type === 'fxoptionCondition')
|
||||
const bondCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'bondCondition')
|
||||
const futureCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'futureCondition')
|
||||
const repoCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'repoCondition')
|
||||
const bondlendingCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'repoCondition')
|
||||
const cashflowCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'cashflowCondition')
|
||||
const loandepositCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'cashflowCondition')
|
||||
const posallocationCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'cashflowCondition')
|
||||
const instrumentlegCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'instrumentlegCondition')
|
||||
const capfloorCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'instrumentlegCondition')
|
||||
const swaptionCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'instrumentlegCondition')
|
||||
const contractCondition = topSearchRule.filter(c=>c.Field === 'contractId')
|
||||
const fundCondition = topSearchRule.filter(c=>c.Field !== 'underlying' && c.Field !== 'buySell' && c.type === 'fundCondition')
|
||||
const moreConditionRule2 = {
|
||||
foreignExchangeCondition: [
|
||||
topSearchRule.filter(c=>c.Field === 'underlying' && c.type === 'foreignExchangeCondition')?.[0],
|
||||
topSearchRule.filter(c=>c.Field === 'buySell' && c.type === 'foreignExchangeCondition')?.[0]
|
||||
],
|
||||
fxoptionCondition: [
|
||||
topSearchRule.filter(c=>c.Field === 'underlying' && c.type === 'fxoptionCondition')?.[0],
|
||||
topSearchRule.filter(c=>c.Field === 'buySell' && c.type === 'fxoptionCondition')?.[0]
|
||||
],
|
||||
repoCondition: [
|
||||
topSearchRule.filter(c=>c.Field === 'buySell' && c.type === 'repoCondition')?.[0]
|
||||
],
|
||||
bondlendingCondition: [
|
||||
topSearchRule.filter(c=>c.Field === 'buySell' && c.type === 'repoCondition')?.[0]
|
||||
],
|
||||
bondCondition: [
|
||||
topSearchRule.filter(c=>c.Field === 'buySell' && c.type === 'bondCondition')?.[0]
|
||||
],
|
||||
cashflowCondition: [
|
||||
topSearchRule.filter(c=>c.Field === 'buySell' && c.type === 'cashflowCondition')?.[0]
|
||||
],
|
||||
loandepositCondition: [
|
||||
topSearchRule.filter(c=>c.Field === 'buySell' && c.type === 'cashflowCondition')?.[0]
|
||||
],
|
||||
posallocationCondition: [
|
||||
topSearchRule.filter(c=>c.Field === 'buySell' && c.type === 'cashflowCondition')?.[0]
|
||||
],
|
||||
posallocationCondition: [
|
||||
topSearchRule.filter(c=>c.Field === 'buySell' && c.type === 'cashflowCondition')?.[0]
|
||||
],
|
||||
futureCondition: [
|
||||
topSearchRule.filter(c=>c.Field === 'buySell' && c.type === 'futureCondition')?.[0]
|
||||
],
|
||||
instrumentlegCondition2: [
|
||||
topSearchRule.filter(c=>c.Field === 'underlying' && c.type === 'instrumentlegCondition2')?.[0]
|
||||
],
|
||||
}
|
||||
|
||||
let moreConditionRule = []
|
||||
// 交易信息处理
|
||||
const transaction = this.$refs.transaction.submit()
|
||||
let transactionRule = []
|
||||
transaction.forEach(item=>{
|
||||
let obj = {
|
||||
Operators: option,
|
||||
Operator: item.value1,
|
||||
FieldChsname: item.label,
|
||||
FieldEngname: item.key,
|
||||
Field: item.key,
|
||||
Value: item.key === 'folder' ? item.id : (item.value1 === 'EQ' || item.value1 === 'NQ' ? item.value2 : item.value2.split(',')),
|
||||
isUser: item.isUser
|
||||
}
|
||||
if (item.value2.length > 0) {
|
||||
transactionRule.push(obj)
|
||||
}
|
||||
})
|
||||
|
||||
// 流水号处理
|
||||
const serialNumber = this.$refs.serialNumber.submit()
|
||||
let serialNumberRule = []
|
||||
serialNumber.forEach(item=>{
|
||||
let obj = {
|
||||
Operators: option,
|
||||
Operator: item.value1,
|
||||
FieldChsname: item.label,
|
||||
FieldEngname: item.key,
|
||||
Field: item.key,
|
||||
Value: item.value2
|
||||
}
|
||||
if (item.value2.length > 0) {
|
||||
serialNumberRule.push(obj)
|
||||
}
|
||||
})
|
||||
|
||||
// 日期处理
|
||||
const date = this.$refs.date.submit()
|
||||
let dateRule = []
|
||||
date.forEach(item=>{
|
||||
let obj = {
|
||||
Operators: option,
|
||||
Operator: item.value1,
|
||||
FieldChsname: item.label,
|
||||
FieldEngname: item.key,
|
||||
Field: item.key,
|
||||
Value: item.key === 'captureTime' ? item.value3 : item.value2,
|
||||
isNow: item.isNow
|
||||
}
|
||||
if (item.value2?.length > 0) {
|
||||
dateRule.push(obj)
|
||||
}
|
||||
})
|
||||
moreConditionRule.push(...transactionRule, ...serialNumberRule, ...dateRule)
|
||||
|
||||
let params = {
|
||||
products,
|
||||
foreignExchangeCondition,
|
||||
fxoptionCondition,
|
||||
bondCondition,
|
||||
futureCondition,
|
||||
repoCondition,
|
||||
bondlendingCondition,
|
||||
cashflowCondition,
|
||||
loandepositCondition,
|
||||
posallocationCondition,
|
||||
instrumentlegCondition,
|
||||
capfloorCondition,
|
||||
swaptionCondition,
|
||||
contractCondition,
|
||||
fundCondition,
|
||||
moreConditionRule,
|
||||
moreConditionRule2
|
||||
}
|
||||
|
||||
return params
|
||||
},
|
||||
async search () {
|
||||
await this.$refs.topSearch.handleClickOutside('', true)
|
||||
localStorage.setItem('params', JSON.stringify(this.getParam()))
|
||||
this.$router.push('/888970290/customResult')
|
||||
},
|
||||
// 重置清空所有条件
|
||||
reset () {
|
||||
this.$refs.topSearch.reset()
|
||||
this.$refs.transaction.reset()
|
||||
this.$refs.serialNumber.reset()
|
||||
this.$refs.date.reset()
|
||||
},
|
||||
// 另存为弹窗-确认
|
||||
submitForm(formName) {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.doSave()
|
||||
this.handleClose()
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 另存为弹窗-取消
|
||||
handleClose(formName) {
|
||||
this.form = {
|
||||
code: '',
|
||||
name: '',
|
||||
localName: ''
|
||||
}
|
||||
this.$refs.form.resetFields();
|
||||
this.dialogVisible = false
|
||||
},
|
||||
// 自定义查询组合保存
|
||||
async doSave () {
|
||||
let param = {
|
||||
"queryParam.moduleName": "dcsUserCondition",
|
||||
"queryParam.domain": JSON.stringify({
|
||||
code: this.form.code,
|
||||
name: this.form.name,
|
||||
localName: this.form.localName,
|
||||
data: this.getParam(),
|
||||
user: Eui.Share.get("loginId"),
|
||||
})
|
||||
}
|
||||
let formData = new FormData();
|
||||
formData.append('reqJson', JSON.stringify(param));
|
||||
const res = await doSave(formData)
|
||||
if (res.success) {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: this.$t('field.operationSuccessful')
|
||||
});
|
||||
this.$refs.saveList.queryList()
|
||||
} else {
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: res.message
|
||||
});
|
||||
}
|
||||
},
|
||||
// 点击自定义查询组合跳转至结果页
|
||||
gotoResult (data) {
|
||||
localStorage.setItem('params', data)
|
||||
this.$router.push('/888970290/customResult')
|
||||
},
|
||||
saveHide () {
|
||||
this.saveShow = false
|
||||
this.spanCol = 24
|
||||
},
|
||||
saveShow () {
|
||||
// this.saveShow = true
|
||||
this.spanCol = 18
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.customSearch{
|
||||
font-size: 12px;
|
||||
.el-form-item{
|
||||
width: 100%;
|
||||
}
|
||||
.el-input, .el-input__inner, .el-input__suffix span i, .el-form-item, .el-form-item__label, .el-form-item .el-form-item__content, .el-form-item__content span{
|
||||
height: 20px!important;
|
||||
line-height: 20px!important;
|
||||
}
|
||||
.el-date-editor .el-icon-date{
|
||||
font-size: 12px;
|
||||
line-height: 1px;
|
||||
}
|
||||
.el-date-editor .el-range-separator{
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-form-item__error{
|
||||
text-align: left;
|
||||
}
|
||||
.transaction .el-dialog .btn{
|
||||
height:22px!important;
|
||||
line-height: 22px!important;
|
||||
width: 64px!important;
|
||||
padding: 0!important;
|
||||
text-align: center!important;
|
||||
}
|
||||
.el-select .el-select__tags{
|
||||
flex-wrap: nowrap;
|
||||
/* input{
|
||||
display: none;
|
||||
} */
|
||||
}
|
||||
.el-button{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* number输入框上下箭头隐藏 */
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
input[type="number"]{
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.customSearch{
|
||||
height: calc(100% - 1px);
|
||||
background-color: var(--table-cell-striped-bg);
|
||||
position: relative;
|
||||
color: var(--color-90);
|
||||
.width-100{
|
||||
width: 100%;
|
||||
}
|
||||
.width-75{
|
||||
width: 75%;
|
||||
}
|
||||
.width-25{
|
||||
width: 25%;
|
||||
}
|
||||
.el-row{
|
||||
height: calc(100% - 51px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
transition: all ease 1s 0;
|
||||
}
|
||||
.el-col-6{
|
||||
height: 100%;
|
||||
}
|
||||
.col-right{
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
top: 85px;
|
||||
height: calc(100% - 185px);
|
||||
background-color: var(--table-cell-striped-bg);
|
||||
z-index: 9;
|
||||
transition: all 1s ease 0;
|
||||
&.arrow-left{
|
||||
width: 26px;
|
||||
text-align: center;
|
||||
border: 1px solid var(--scrollBar);
|
||||
border-bottom: none;
|
||||
i{
|
||||
cursor: pointer;
|
||||
margin-top: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
height: 100%;
|
||||
border: 1px solid var(--scrollBar);
|
||||
border-bottom: none;
|
||||
}
|
||||
.middle{
|
||||
height: 650px;
|
||||
border-top: 1px solid var(--scrollBar);
|
||||
&.middle2{
|
||||
border-left: 1px solid var(--scrollBar);
|
||||
}
|
||||
}
|
||||
.btns{
|
||||
position: absolute;
|
||||
background-color: var(--table-cell-striped-bg);
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: right;
|
||||
border-top: 1px solid var(--scrollBar);
|
||||
}
|
||||
.btn{
|
||||
height:22px;
|
||||
line-height: 22px;
|
||||
width: 64px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,642 @@
|
||||
<template>
|
||||
<div class="RCSbox">
|
||||
<div class="cright">
|
||||
<FormSearch
|
||||
:form-arr="formArr"
|
||||
:form-data="formData"
|
||||
@outOperation="outOperation"
|
||||
@searchSubmit="searchSubmit"
|
||||
@reset="resetForm"
|
||||
/>
|
||||
<PublicTable
|
||||
ref="table"
|
||||
class="table"
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:has-index="false"
|
||||
:need-select="false"
|
||||
:table-data="tableData"
|
||||
:table-info="tableInfo"
|
||||
:table-column="columns"
|
||||
operation-width="150px"
|
||||
:btn-button="operations"
|
||||
:table-top-button="tableTopButton"
|
||||
:operation-fixed="true"
|
||||
:is-need-pagination="true"
|
||||
:current-page="pageParams.pageNum"
|
||||
:page-size="pageParams.pageSize"
|
||||
:total="pageParams.total"
|
||||
:is-need-customcolumn="true"
|
||||
:is-need-import="false"
|
||||
:is-need-export="true"
|
||||
@sizeChange="handleSizeChange"
|
||||
@currentChange="handleCurrentChange"
|
||||
@customColumnChange="handleCustomColumnChange"
|
||||
/>
|
||||
</div>
|
||||
<RCSDialog
|
||||
key="RCSDialogPrint"
|
||||
:title="$t('button.print')"
|
||||
:visible="printDialogVisible"
|
||||
:before-close="rcsDialogbeforeClose['print']"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<template #default>
|
||||
<TradePrint
|
||||
v-if="printSelectRow"
|
||||
ref="tradePrint"
|
||||
:deal-id="printSelectRow?.dealId"
|
||||
:product="printSelectRow?.product"
|
||||
:instrument="printSelectRow?.instrument"
|
||||
/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="rcsDialogBtnEvent['print']"
|
||||
>{{ $t('button.print') }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</RCSDialog>
|
||||
<RCSDialog
|
||||
key="RCSDialogTrack"
|
||||
:title="$t('button.track')"
|
||||
:visible="trackDialogVisible"
|
||||
:before-close="rcsDialogbeforeClose['track']"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<template #default>
|
||||
<TradeTrace
|
||||
v-if="trackSelectRow"
|
||||
:deal-id="trackSelectRow?.dealId"
|
||||
/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button
|
||||
@click="rcsDialogBtnEvent['trackClose']"
|
||||
>{{ $t('button.close') }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</RCSDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormSearch from '../../../components/formSearch/index.vue';
|
||||
import PublicTable from '../../../components/table/index.vue';
|
||||
import FormTools from '../../../utils/FormTools';
|
||||
import RCSDialog from '@/components/RCSDialog';
|
||||
import TradePrint from '../components/TradePrint';
|
||||
import TradeTrace from '../components/TradeTrace';
|
||||
import HighLight from '../components/TableFields/HighLight';
|
||||
|
||||
export default {
|
||||
name: 'DcsDailyTradeQuery',
|
||||
components: {
|
||||
FormSearch,
|
||||
PublicTable,
|
||||
RCSDialog,
|
||||
TradePrint,
|
||||
TradeTrace,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formArr: [
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'type',
|
||||
span: 4,
|
||||
attrs: {
|
||||
needStar: true,
|
||||
label: '类型',
|
||||
multiple: true,
|
||||
'collapse-tags': true,
|
||||
},
|
||||
options: [],
|
||||
rules: { required: true, message: '不能为空' },
|
||||
},
|
||||
{
|
||||
type: 'pickerDateSingle',
|
||||
prop: 'dateStart',
|
||||
span: 4,
|
||||
attrs: {
|
||||
needStar: true,
|
||||
label: '开始日期',
|
||||
'value-format': 'yyyyMMdd',
|
||||
rules: { required: true, message: '不能为空' },
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pickerDateSingle',
|
||||
prop: 'dateEnd',
|
||||
span: 4,
|
||||
attrs: {
|
||||
needStar: true,
|
||||
label: '结束日期',
|
||||
'value-format': 'yyyyMMdd',
|
||||
},
|
||||
rules: { required: true, message: '不能为空' },
|
||||
},
|
||||
{
|
||||
type: 'selectTreeTable',
|
||||
prop: 'folder',
|
||||
span: 4,
|
||||
attrs: {
|
||||
label: '账户',
|
||||
placeholder: '请选择',
|
||||
info: { title: '账户检索' },
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'selectTransfer',
|
||||
prop: 'cptys',
|
||||
span: 4,
|
||||
attrs: {
|
||||
label: '交易对手',
|
||||
multiple: true,
|
||||
placeholder: '请选择',
|
||||
info: { title: '交易对手检索' },
|
||||
'collapse-tags': true,
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'selectTransfer',
|
||||
prop: 'products',
|
||||
span: 4,
|
||||
attrs: {
|
||||
label: '产品',
|
||||
multiple: true,
|
||||
placeholder: '请选择',
|
||||
'collapse-tags': true,
|
||||
transfer: { title: '产品检索' },
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'underlyingSearch',
|
||||
span: 4,
|
||||
attrs: {
|
||||
label: '标的',
|
||||
placeholder: '请输入',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'dealStatuss',
|
||||
span: 4,
|
||||
attrs: {
|
||||
label: '交易状态',
|
||||
multiple: true,
|
||||
placeholder: '请选择',
|
||||
'collapse-tags': true,
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'dealFlags',
|
||||
span: 4,
|
||||
attrs: {
|
||||
label: '交易性质',
|
||||
multiple: true,
|
||||
placeholder: '请选择',
|
||||
'collapse-tags': true,
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'dealId',
|
||||
span: 4,
|
||||
attrs: {
|
||||
label: '交易流水号',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'globalId',
|
||||
span: 4,
|
||||
attrs: {
|
||||
label: '外部流水号',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'contractId',
|
||||
span: 4,
|
||||
attrs: {
|
||||
label: '组合号',
|
||||
},
|
||||
},
|
||||
],
|
||||
// 默认值
|
||||
formData: {
|
||||
|
||||
},
|
||||
|
||||
// 获取列表前是否loading加载
|
||||
loading: false,
|
||||
|
||||
tableInfo: {
|
||||
fileConfig: {
|
||||
uploadParams: {
|
||||
moduleName: 'dcsDailyTradeQuery',
|
||||
param: { 'multiple': false },
|
||||
},
|
||||
},
|
||||
tableHeight: document.documentElement.clientHeight - 286,
|
||||
},
|
||||
// table数据源
|
||||
tableData: [],
|
||||
|
||||
// 表格项绑定的属性
|
||||
columns: [],
|
||||
// 操作栏自定义按钮
|
||||
operations: [
|
||||
{
|
||||
text: '打印',
|
||||
type: 'text',
|
||||
class: 'el-text-color',
|
||||
callback: (row) => {
|
||||
this.handleOpertions['print'](row);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '跟踪',
|
||||
type: 'text',
|
||||
class: 'el-text-color',
|
||||
callback: (row) => {
|
||||
this.handleOpertions['track'](row);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '生命周期',
|
||||
type: 'text',
|
||||
class: 'el-text-color',
|
||||
callback: (row) => {
|
||||
this.handleOpertions['lifeCycle'](row);
|
||||
},
|
||||
},
|
||||
],
|
||||
tableTopButton: [
|
||||
|
||||
],
|
||||
|
||||
// 搜索查询的参数
|
||||
pageParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
},
|
||||
filtersMap: {},
|
||||
|
||||
printDialogVisible: false,
|
||||
printSelectRow: null,
|
||||
trackDialogVisible: false,
|
||||
trackSelectRow: null,
|
||||
handleOpertions: {
|
||||
'track': (data) => {
|
||||
this.trackSelectRow = {
|
||||
dealId: data.dealId,
|
||||
};
|
||||
this.trackDialogVisible = !this.trackDialogVisible;
|
||||
},
|
||||
'print': (data) => {
|
||||
this.printSelectRow = {
|
||||
dealId: data.dealId,
|
||||
product: data.product,
|
||||
instrument: data.instrument,
|
||||
};
|
||||
this.printDialogVisible = !this.printDialogVisible;
|
||||
},
|
||||
'lifeCycle': (data) => {
|
||||
const dealId = data.dealId;
|
||||
const product = data.product;
|
||||
const instrument = data.instrument;
|
||||
|
||||
// TODO this.$menuMap is null now
|
||||
// const id = this.$menuMap.get('/dcs/dcsLifeCycle');
|
||||
const id = '888970226';
|
||||
const path = 'dcs/dcsLifeCycle';
|
||||
this.$router.push(`/${id}/${path}?dealId=${dealId}&product=${product}&instrument=${instrument}&title=生命周期`);
|
||||
},
|
||||
},
|
||||
rcsDialogbeforeClose: {
|
||||
'print': (done) => {
|
||||
console.log('print before-close');
|
||||
this.printSelectRow = null;
|
||||
this.printDialogVisible = false;
|
||||
console.log('this.printDialogVisible', this.printDialogVisible);
|
||||
},
|
||||
'track': (done) => {
|
||||
console.log('track before-close');
|
||||
this.trackSelectRow = null;
|
||||
this.trackDialogVisible = false;
|
||||
},
|
||||
},
|
||||
rcsDialogBtnEvent: {
|
||||
'print': () => {
|
||||
this.$refs.tradePrint.print();
|
||||
},
|
||||
'trackClose': () => {
|
||||
this.trackDialogVisible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initPage();
|
||||
},
|
||||
mounted() {
|
||||
this.queryPage();
|
||||
},
|
||||
methods: {
|
||||
comonfilter(value, row, column) {
|
||||
console.log('value', row, column);
|
||||
return row[column.property] === value;
|
||||
},
|
||||
/**
|
||||
* 初始化页面数据
|
||||
*/
|
||||
async initPage() {
|
||||
await this.initFormData();
|
||||
this.queryComboxData();
|
||||
},
|
||||
/**
|
||||
* 初始化表单数据
|
||||
*/
|
||||
async initFormData() {
|
||||
const date = FormTools.getNowStr();
|
||||
this.formData = {
|
||||
type: ['deal'],
|
||||
dateStart: date,
|
||||
dateEnd: date,
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 查询 Table 数据
|
||||
*/
|
||||
async queryPage() {
|
||||
const params = {
|
||||
'queryParam.moduleName': 'dcsDailyTradeQuery',
|
||||
'queryParam.type': FormTools.checkEmpty(this.formData['type'], ['deal']),
|
||||
'queryParam.dateStart': FormTools.format('date:yyyyMMdd', this.formData['dateStart']),
|
||||
'queryParam.dateEnd': FormTools.format('date:yyyyMMdd', this.formData['dateEnd']),
|
||||
'queryParam.folder': FormTools.checkEmpty(this.formData['folder'], ''),
|
||||
'queryParam.underlyingSearch': FormTools.checkEmpty(this.formData['underlyingSearch'], ''),
|
||||
'queryParam.dealId': FormTools.checkEmpty(this.formData['dealId'], ''),
|
||||
'queryParam.globalId': FormTools.checkEmpty(this.formData['globalId'], ''),
|
||||
'queryParam.contractId': FormTools.checkEmpty(this.formData['contractId'], ''),
|
||||
'queryParam.moreCondition': '{}',
|
||||
'queryParam.excludeGroup': 'Y',
|
||||
'queryParam.cptys': FormTools.checkEmpty(this.formData['cptys'], []),
|
||||
'queryParam.products': FormTools.checkEmpty(this.formData['products'], []),
|
||||
'queryParam.dealStatuss': FormTools.checkEmpty(this.formData['dealStatuss'], []),
|
||||
'queryParam.dealFlags': FormTools.checkEmpty(this.formData['dealFlags'], []),
|
||||
'queryParam.pageStart': FormTools.checkEmpty(this.pageParams.pageNum, 0),
|
||||
'queryParam.pageLimit': this.pageParams.pageSize,
|
||||
};
|
||||
|
||||
this.loading = true;
|
||||
const res = await this.$apis.dcsQueryPage(params);
|
||||
if (res.success) {
|
||||
this.tableData = res.data.result.datals;
|
||||
this.pageParams.total = Number(res.data.result.total);
|
||||
this.loading = false;
|
||||
|
||||
await this.initFiltersData(this.tableData);
|
||||
await this.initColunm();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取数据字典
|
||||
*/
|
||||
async queryComboxData() {
|
||||
const params = {
|
||||
codifierGrpCodes: 'DailyType,folderTreeAuthWithGrp,cptys,productList,dealStatusList,DealFlagRcs,BondsIssueDirection,RepoDirectionRcs,BRRDirection,DealStatusRcs',
|
||||
};
|
||||
const res = await this.$apis.queryComboxData(params);
|
||||
if (res.success) {
|
||||
const result = res.data?.result;
|
||||
|
||||
const filedOptionMap = new Map([
|
||||
['type', 'DailyType'],
|
||||
['dealStatuss', 'dealStatusList'],
|
||||
['dealFlags', 'DealFlagRcs'],
|
||||
['folder', 'folderTreeAuthWithGrp'],
|
||||
['cptys', 'cptys'],
|
||||
['products', 'productList'],
|
||||
]);
|
||||
this.formArr.forEach(item => {
|
||||
if (filedOptionMap.has(item.prop) && result[filedOptionMap.get(item.prop)]) {
|
||||
item.options = result[filedOptionMap.get(item.prop)].map(sitem => ({ ...sitem, label: sitem.text, value: sitem.value }));
|
||||
}
|
||||
});
|
||||
|
||||
this.$message.success('请求成功');
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 初始化 table column 筛选数据
|
||||
* @param list
|
||||
*/
|
||||
async initFiltersData(list) {
|
||||
const filterHeader = {
|
||||
'productStr': new Set([]),
|
||||
'dealId': new Set([]),
|
||||
'folder': new Set([]),
|
||||
'cptyStr': new Set([]),
|
||||
'underlying': new Set([]),
|
||||
'buySellStr': new Set([]),
|
||||
'valueDateStr': new Set([]),
|
||||
'maturityDateStr': new Set([]),
|
||||
'dealStatusStr': new Set([]),
|
||||
};
|
||||
const filtersMap = {
|
||||
'productStr': [],
|
||||
'dealId': [],
|
||||
'folder': [],
|
||||
'cptyStr': [],
|
||||
'underlying': [],
|
||||
'buySellStr': [],
|
||||
'valueDateStr': [],
|
||||
'maturityDateStr': [],
|
||||
'dealStatusStr': [],
|
||||
};
|
||||
list.forEach(item => {
|
||||
Object.keys(filterHeader).forEach(key => {
|
||||
if (!filterHeader[key].has(item[key])) {
|
||||
filterHeader[key].add(item[key]);
|
||||
filtersMap[key].push({ value: item[key], text: item[key] });
|
||||
}
|
||||
});
|
||||
});
|
||||
this.filtersMap = filtersMap;
|
||||
// console.log('filtersMap', filtersMap);
|
||||
this.initColunm();
|
||||
},
|
||||
/**
|
||||
* 初始化 table 列信息
|
||||
*/
|
||||
async initColunm() {
|
||||
this.columns = [
|
||||
{
|
||||
prop: 'productStr',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: '产品',
|
||||
filters: this.filtersMap.productStr,
|
||||
'filter-method': this.comonfilter,
|
||||
'filter-placement': 'bottom-end',
|
||||
},
|
||||
{
|
||||
prop: 'dealId',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: '交易流水号',
|
||||
filters: this.filtersMap.dealId,
|
||||
'filter-method': this.comonfilter,
|
||||
'filter-placement': 'bottom-end',
|
||||
render: (h, context) => {
|
||||
// console.log('context h');
|
||||
return h(HighLight, {
|
||||
props: {
|
||||
dialogTitle: '交易详情',
|
||||
value: context.row['dealId'],
|
||||
action: 'detail',
|
||||
rowData: context.row,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'folder',
|
||||
minWidth: '200px',
|
||||
align: 'center',
|
||||
label: '账户',
|
||||
filters: this.filtersMap.folder,
|
||||
'filter-method': this.comonfilter,
|
||||
'filter-placement': 'bottom-end',
|
||||
},
|
||||
{
|
||||
prop: 'cptyStr',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: '交易对手',
|
||||
filters: this.filtersMap.cptyStr,
|
||||
'filter-method': this.comonfilter,
|
||||
'filter-placement': 'bottom-end',
|
||||
},
|
||||
{
|
||||
prop: 'underlying',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: '标的',
|
||||
filters: this.filtersMap.underlying,
|
||||
'filter-method': this.comonfilter,
|
||||
'filter-placement': 'bottom-end',
|
||||
},
|
||||
{
|
||||
prop: 'buySellStr',
|
||||
minWidth: '200px',
|
||||
align: 'center',
|
||||
label: '交易方向',
|
||||
filters: this.filtersMap.buySellStr,
|
||||
'filter-method': this.comonfilter,
|
||||
'filter-placement': 'bottom-end',
|
||||
},
|
||||
{
|
||||
prop: 'ccy1AmountStr',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: '金额1',
|
||||
},
|
||||
{
|
||||
prop: 'ccy2AmountStr',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: '金额2',
|
||||
},
|
||||
{
|
||||
prop: 'valueDateStr',
|
||||
minWidth: '200px',
|
||||
align: 'center',
|
||||
label: '起息日',
|
||||
filters: this.filtersMap.valueDateStr,
|
||||
'filter-method': this.comonfilter,
|
||||
'filter-placement': 'bottom-end',
|
||||
},
|
||||
{
|
||||
prop: 'maturityDateStr',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: '到期日',
|
||||
filters: this.filtersMap.maturityDateStr,
|
||||
'filter-method': this.comonfilter,
|
||||
'filter-placement': 'bottom-end',
|
||||
},
|
||||
{
|
||||
prop: 'dealStatusStr',
|
||||
minWidth: '200px',
|
||||
align: 'center',
|
||||
label: '交易状态',
|
||||
filters: this.filtersMap.dealStatusStr,
|
||||
'filter-method': this.comonfilter,
|
||||
'filter-placement': 'bottom-end',
|
||||
},
|
||||
{
|
||||
prop: 'amount1Str',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: '拆美元金额',
|
||||
},
|
||||
];
|
||||
},
|
||||
searchSubmit(val) {
|
||||
this.queryPage();
|
||||
},
|
||||
resetForm() {
|
||||
this.formData = {};
|
||||
},
|
||||
outOperation(val, index, prop, num) {
|
||||
console.log(val, index, prop, num);
|
||||
},
|
||||
|
||||
// 页面展示条数改变事件-pageSize
|
||||
handleSizeChange(pageSize) {
|
||||
this.pageParams.pageSize = pageSize;
|
||||
this.queryPage();
|
||||
},
|
||||
// 页面切换事件-pageNum
|
||||
handleCurrentChange(pageNum) {
|
||||
this.pageParams.pageNum = pageNum;
|
||||
this.queryPage();
|
||||
},
|
||||
// 数据列确定修改事件
|
||||
handleCustomColumnChange(val) {
|
||||
// console.log('数据列确定修改事件',val);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.RCSbox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.cright {
|
||||
width: 100%;
|
||||
.table {
|
||||
margin-top: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="RCSbox main">
|
||||
<TransactionStatus
|
||||
:data="transactionStatusData"
|
||||
/>
|
||||
<div class="content">
|
||||
<TradingTimeline :data="tradingTimelineData" />
|
||||
<TradingOperationsTimeline
|
||||
:data="tradingOperationsTimelineData"
|
||||
:instrument="instrument"
|
||||
:product="product"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TransactionStatus from '../components/TransactionStatus';
|
||||
import TradingTimeline from '../components/TradingTimeline';
|
||||
import TradingOperationsTimeline from '../components/TradingOperationsTimeline';
|
||||
import { getQueryMainInfo, getQueryDeriveInfo } from '@/api/dcsApi';
|
||||
import FormTools from '@/utils/FormTools';
|
||||
import { isEmpty } from 'lodash';
|
||||
export default {
|
||||
components: {
|
||||
TransactionStatus,
|
||||
TradingTimeline,
|
||||
TradingOperationsTimeline,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
transactionStatusData: {},
|
||||
tradingTimelineData: {},
|
||||
tradingOperationsTimelineData: {},
|
||||
routeParam: {
|
||||
product: '',
|
||||
instrument: '',
|
||||
dealId: '',
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log('$route.query', this.$route.query);
|
||||
const routeParam = this.$route.query;
|
||||
this.queryMainInfo(routeParam);
|
||||
this.getDeriveInfo(routeParam);
|
||||
},
|
||||
methods: {
|
||||
async queryMainInfo(routeParam) {
|
||||
const param = {
|
||||
'queryParam.dealId': routeParam.dealId, 'queryParam.product': routeParam.product, 'queryParam.instrument': routeParam.instrument,
|
||||
};
|
||||
const data = await getQueryMainInfo(param);
|
||||
if (data?.success) {
|
||||
const { mainInfo, timelineInfo, serveDate, settleInfo } = data.data.result;
|
||||
|
||||
this.transactionStatusData = {
|
||||
...mainInfo,
|
||||
messages: FormTools.parseMapStr(mainInfo.children[0].message),
|
||||
settleInfo: FormTools.parseMapStr(settleInfo),
|
||||
};
|
||||
|
||||
let viewNowDateFlag = true;
|
||||
const timelineInfoChildren = timelineInfo.children
|
||||
.filter(item => { return !isEmpty(item); })
|
||||
.map((item, index) => {
|
||||
if (item?.date == serveDate) {
|
||||
viewNowDateFlag = false;
|
||||
}
|
||||
return { ...item, message: item.message ? FormTools.parseMapStr(item.message) : '' };
|
||||
});
|
||||
if (viewNowDateFlag) {
|
||||
timelineInfoChildren.push({
|
||||
date: serveDate,
|
||||
event: this.$t('form.nowDate'),
|
||||
viewNowDateFlag: viewNowDateFlag,
|
||||
});
|
||||
}
|
||||
timelineInfoChildren.sort((a, b) => { return new Date(a.date) - new Date(b.date); });
|
||||
|
||||
this.tradingTimelineData = {
|
||||
timelineInfo: timelineInfoChildren,
|
||||
serveDate: serveDate,
|
||||
};
|
||||
}
|
||||
},
|
||||
async getDeriveInfo(routeParam) {
|
||||
const data = await getQueryDeriveInfo({ 'queryParam.dealId': routeParam.dealId, 'queryParam.product': routeParam.product, 'queryParam.instrument': routeParam.instrument });
|
||||
if (data?.success) {
|
||||
const { deriveInfo } = data.data.result;
|
||||
this.tradingOperationsTimelineData = {
|
||||
...deriveInfo,
|
||||
children: deriveInfo?.children ? deriveInfo?.children.map(item => {
|
||||
return {
|
||||
...item,
|
||||
message: item.message ? FormTools.parseMapStr(item.message) : '',
|
||||
};
|
||||
}) : [],
|
||||
};
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@media (max-width: 1023px) {
|
||||
.content {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
}
|
||||
|
||||
.RCSbox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
&.main {
|
||||
flex-direction: column;
|
||||
|
||||
.content {
|
||||
margin-top: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,372 @@
|
||||
<template>
|
||||
<div class="RCSbox">
|
||||
<FormSearch
|
||||
:form-arr="formArr"
|
||||
:form-data="formData"
|
||||
@outOperation="outOperation"
|
||||
@searchSubmit="searchSubmit"
|
||||
@reset="resetForm"
|
||||
/>
|
||||
<PublicTable
|
||||
ref="table"
|
||||
class="table"
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:has-index="false"
|
||||
:need-select="false"
|
||||
:table-data="tableData"
|
||||
:table-info="tableInfo"
|
||||
:table-column="columns"
|
||||
operation-width="150px"
|
||||
:btn-button="operations"
|
||||
:operation-fixed="true"
|
||||
:is-need-pagination="true"
|
||||
:current-page="pageParams.pageNum"
|
||||
:page-size="pageParams.pageSize"
|
||||
:total="pageParams.total"
|
||||
:operated-string="operatedString"
|
||||
:is-need-customcolumn="false"
|
||||
:is-need-import="false"
|
||||
@sizeChange="handleSizeChange"
|
||||
@currentChange="handleCurrentChange"
|
||||
/>
|
||||
<HistoryVersion
|
||||
ref="historyVersion"
|
||||
:data-id="dataId"
|
||||
:type="type"
|
||||
module="dcs"
|
||||
:visible.sync="historyVisible"
|
||||
@handleCancel="historyVisible = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormSearch from '@/components/formSearch/index.vue';
|
||||
import PublicTable from '@/components/table/index.vue';
|
||||
import HistoryVersion from '@/components/historyVersion/index.vue';
|
||||
export default {
|
||||
name: 'DcsLogQuery',
|
||||
components: {
|
||||
FormSearch,
|
||||
PublicTable,
|
||||
HistoryVersion
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formArr: [
|
||||
{
|
||||
type: 'pickerDate',
|
||||
prop: 'tradeAddDate',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '交易录入日期',
|
||||
type: 'daterange',
|
||||
'value-format': 'yyyyMMdd',
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'pickerDate',
|
||||
prop: 'tradeEditDate',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '最后修改日期',
|
||||
type: 'daterange',
|
||||
'value-format': 'yyyyMMdd',
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'dealId',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: `交易流水号`
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'bankId',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: `运营机构`
|
||||
},
|
||||
options: []
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'takerUser',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: `操作人`
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'globalId',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: `外部流水号`
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'products',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: `金融工具`,
|
||||
multiple: true
|
||||
},
|
||||
options: []
|
||||
},
|
||||
{
|
||||
type: 'selectTree',
|
||||
prop: 'folders',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: `账户`,
|
||||
props: {
|
||||
label: 'text',
|
||||
children: 'children'
|
||||
}
|
||||
},
|
||||
options: []
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'typeOfEvents',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: `事件类型`,
|
||||
multiple: true
|
||||
},
|
||||
options: []
|
||||
},
|
||||
],
|
||||
// 默认值
|
||||
formData: {
|
||||
bankId: ''
|
||||
},
|
||||
// 获取列表前是否loading加载
|
||||
loading: false,
|
||||
tableInfo: {
|
||||
fileConfig: {
|
||||
uploadParams: {
|
||||
moduleName: 'pubCurrency',
|
||||
param: { 'multiple': false },
|
||||
},
|
||||
},
|
||||
tableHeight: 'calc(100vh - 250px)',
|
||||
},
|
||||
// table数据源
|
||||
tableData: [],
|
||||
// 表格项绑定的属性
|
||||
columns: [
|
||||
{
|
||||
prop: 'dealId',
|
||||
minWidth: '180px',
|
||||
align: 'center',
|
||||
label: this.$t('field.dealId'),
|
||||
},
|
||||
{
|
||||
prop: 'typeOfEventStr',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: '交易动作',
|
||||
},
|
||||
{
|
||||
prop: 'version',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: this.$t('field.version'),
|
||||
},
|
||||
{
|
||||
prop: 'dealStatusStr',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: this.$t('field.dealStatus'),
|
||||
},
|
||||
{
|
||||
prop: 'productStr',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: this.$t('field.instrument'),
|
||||
},
|
||||
{
|
||||
prop: 'folder',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: this.$t('field.folder'),
|
||||
},
|
||||
{
|
||||
prop: 'captureTime',
|
||||
minWidth: '200px',
|
||||
align: 'center',
|
||||
label: this.$t('field.tradeAddDate'),
|
||||
},
|
||||
{
|
||||
prop: 'tradeDate',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: this.$t('field.tradeDate'),
|
||||
},
|
||||
{
|
||||
prop: 'lastModifyTime',
|
||||
minWidth: '200px',
|
||||
align: 'center',
|
||||
label: this.$t('field.tradeEditDate'),
|
||||
},
|
||||
{
|
||||
prop: 'takerId',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: '操作员',
|
||||
},
|
||||
{
|
||||
prop: 'parentId',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: '父交易流水号',
|
||||
},
|
||||
{
|
||||
prop: 'globalId',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: '外部流水号',
|
||||
}
|
||||
],
|
||||
// 操作栏自定义按钮
|
||||
operations: [
|
||||
{
|
||||
text: this.$t('field.history'),
|
||||
type: 'text',
|
||||
class: 'el-text-color',
|
||||
callback: (row) => {
|
||||
this.getSelectedValue(row);
|
||||
},
|
||||
},
|
||||
],
|
||||
// 搜索查询的参数
|
||||
pageParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
},
|
||||
historyVisible: false,
|
||||
dataId: '', // 历史版本组件查询需要
|
||||
type: '',
|
||||
dialogTitle: '',
|
||||
dialogVisible: false
|
||||
};
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
await this.getOptionList()
|
||||
this.queryPage();
|
||||
},
|
||||
methods: {
|
||||
async getOptionList() {
|
||||
const match = document.cookie.match(new RegExp('(^| )user.branchId=([^;]+)'));
|
||||
const loginUserBranchId = match ? decodeURIComponent(match[2]) : null;
|
||||
const bankMatch = document.cookie.match(new RegExp('(^| )user.bankId=([^;]+)'));
|
||||
const bankId = bankMatch ? decodeURIComponent(bankMatch[2]) : null;
|
||||
this.formData.bankId = bankId;
|
||||
const params = {
|
||||
'queryParam.moduleName': 'pubBranch',
|
||||
'queryParam.grptype1': '',
|
||||
'queryParam.grpid': '',
|
||||
'queryParam.code': '',
|
||||
'queryParam.loginUserBranchId': loginUserBranchId,
|
||||
'queryParam.pageCtrl': false
|
||||
}
|
||||
const res = await this.$apis.queryPage(params)
|
||||
if (res.success) {
|
||||
this.formArr[3].options = res.data.result.datals.map(item => {
|
||||
return {
|
||||
text: item.localName,
|
||||
value: item.code
|
||||
}
|
||||
})
|
||||
}
|
||||
const comRes = await this.$apis.getDcsOptions({codifierGrpCodes: 'folderTreeAuthWithGrp,productList,typeOfEvent'})
|
||||
if (comRes.success) {
|
||||
this.formArr[6].options = comRes.data.result.productList
|
||||
this.formArr[7].options = comRes.data.result.folderTreeAuthWithGrp
|
||||
this.formArr[8].options = comRes.data.result.typeOfEvent
|
||||
}
|
||||
},
|
||||
|
||||
searchSubmit(val) {
|
||||
this.queryPage();
|
||||
},
|
||||
resetForm() {
|
||||
this.formData = {};
|
||||
},
|
||||
outOperation(val, index, prop, num) {
|
||||
console.log(val, index, prop, num);
|
||||
},
|
||||
|
||||
// 页面展示条数改变事件-pageSize
|
||||
handleSizeChange(pageSize) {
|
||||
this.pageParams.pageSize = pageSize;
|
||||
this.queryPage();
|
||||
},
|
||||
|
||||
// 页面切换事件-pageNum
|
||||
handleCurrentChange(pageNum) {
|
||||
this.pageParams.pageNum = pageNum;
|
||||
this.queryPage();
|
||||
},
|
||||
|
||||
// 自定义按钮 点击事件
|
||||
handletableTopButton(val) {
|
||||
console.log('自定义按钮', val);
|
||||
},
|
||||
|
||||
getSelectedValue(row) {
|
||||
// 打开请求版本接口,请求选中的值以及所有的可选值。
|
||||
this.dataId = row.dealId;
|
||||
this.type = row.product
|
||||
this.historyVisible = true;
|
||||
this.$refs.historyVersion.onOpen();
|
||||
},
|
||||
|
||||
versionChange(value, index) {
|
||||
console.log('我是改变的值', value, index);
|
||||
},
|
||||
|
||||
async queryPage() {
|
||||
const params = {
|
||||
'queryParam.moduleName': 'dcsCashFlowLog',
|
||||
'queryParam.dealId': this.formData.dealId,
|
||||
'queryParam.captureTimeStart': this.formData.tradeAddDate ? this.formData.tradeAddDate[0] : '',
|
||||
'queryParam.captureTimeEnd': this.formData.tradeAddDate ? this.formData.tradeAddDate[1] : '',
|
||||
'queryParam.lastModifyTimeStart': this.formData.tradeEditDate ? this.formData.tradeEditDate[0] : '',
|
||||
'queryParam.lastModifyTimeEnd': this.formData.tradeEditDate ? this.formData.tradeEditDate[1] : '',
|
||||
'queryParam.siteCode': this.formData.bankId,
|
||||
'queryParam.takerId': this.formData.takerUser,
|
||||
'queryParam.pageStart': this.pageParams.pageNum,
|
||||
'queryParam.pageLimit': this.pageParams.pageSize,
|
||||
'queryParam.globalId': this.formData.globalId,
|
||||
'queryParam.products': this.formData.products,
|
||||
'queryParam.folders': this.formData.folders,
|
||||
'queryParam.typeOfEvents': this.formData.typeOfEvents
|
||||
};
|
||||
this.loading = true;
|
||||
const res = await this.$apis.queryDealOperateLog(params);
|
||||
if (res.success) {
|
||||
this.tableData = res.data.result.datals;
|
||||
this.pageParams.total = Number(res.data.result.total);
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.RCSbox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 12px 0 24px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="selectRow.productStr"
|
||||
:visible.sync="visibleDialog"
|
||||
width="80%"
|
||||
@close="close"
|
||||
>
|
||||
<div>这是存续期事件弹窗</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
dialogShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
selectRow: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visibleDialog: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
dialogShow: {
|
||||
handler(nv) {
|
||||
this.visibleDialog = nv;
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
console.log('关闭了');
|
||||
this.visibleDialog = false;
|
||||
this.$emit('update:dialogShow', false);
|
||||
},
|
||||
getProcessData() {
|
||||
// 获取流程信息
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<div class="RCSbox event-manager common-page">
|
||||
<FormSearch
|
||||
:form-arr="formArr"
|
||||
:form-data="searchParams"
|
||||
@outOperation="outOperation"
|
||||
@searchSubmit="searchSubmit"
|
||||
@reset="resetForm"
|
||||
/>
|
||||
<PublicTable
|
||||
ref="table"
|
||||
class="table"
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:has-index="false"
|
||||
:need-select="true"
|
||||
:table-data="tableData"
|
||||
:table-info="tableInfo"
|
||||
:table-column="columns"
|
||||
:events="events"
|
||||
operation-width="150px"
|
||||
:btn-button="operations"
|
||||
:table-top-button="tableTopButton"
|
||||
:operation-fixed="true"
|
||||
:is-need-pagination="true"
|
||||
:current-page="searchParams.pageStart"
|
||||
:page-size="searchParams.pageLimit"
|
||||
:total="total"
|
||||
:has-operation="false"
|
||||
:is-need-customcolumn="false"
|
||||
@sizeChange="handleSizeChange"
|
||||
@currentChange="handleCurrentChange"
|
||||
@customColumnChange="handleCustomColumnChange"
|
||||
@handleTableTopColumnIconClick="handleTableTopColumnIconClick"
|
||||
@handleSelectionChange="handleSelectionChange"
|
||||
/>
|
||||
<eventDialog
|
||||
:dialog-show.sync="dialogShow"
|
||||
:select-row="selectRow"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormSearch from '@/components/formSearch/index.vue';
|
||||
import PublicTable from '@/components/table/index.vue';
|
||||
import eventDialog from './components/eventDialog.vue';
|
||||
export default {
|
||||
components: {
|
||||
FormSearch,
|
||||
PublicTable,
|
||||
eventDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogShow: false,
|
||||
selection: [],
|
||||
selectRow: {},
|
||||
formArr: [
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'dealId',
|
||||
span: 4,
|
||||
attrs: {
|
||||
label: '交易流水号',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'selectLabel',
|
||||
prop: 'product',
|
||||
span: 4,
|
||||
attrs: {
|
||||
label: '产品',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'typeOfEvent',
|
||||
span: 4,
|
||||
attrs: {
|
||||
label: '动作事件',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'eventStatus',
|
||||
span: 4,
|
||||
attrs: {
|
||||
label: '事件状态',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'pickerDate',
|
||||
prop: 'eventDate',
|
||||
span: 4,
|
||||
attrs: {
|
||||
label: '事件日期',
|
||||
type: 'daterange',
|
||||
'value-format': 'yyyy-MM-dd',
|
||||
'range-separator': '至',
|
||||
'start-placeholder': '开始日期',
|
||||
'end-placeholder': '结束日期',
|
||||
},
|
||||
},
|
||||
],
|
||||
// 默认值
|
||||
formData: {},
|
||||
loading: false,
|
||||
// table数据源
|
||||
tableData: [],
|
||||
tableInfo: {
|
||||
// tableHeight: document.documentElement.clientHeight - 286,
|
||||
},
|
||||
// 表格项绑定的属性
|
||||
columns: [
|
||||
{
|
||||
prop: 'dealId',
|
||||
minWidth: '200px',
|
||||
align: 'center',
|
||||
label: this.$t('field.dealId'),
|
||||
render: (h, params) => {
|
||||
return h('span', {
|
||||
// attrs: {
|
||||
// title: params.row.dealId,
|
||||
// },
|
||||
domProps: {
|
||||
innerHTML: params.row.dealId,
|
||||
},
|
||||
style: {
|
||||
cursor: 'pointer',
|
||||
color: '#017BFF',
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.selectRow = params.row;
|
||||
this.dialogShow = true;
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'productStr',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: this.$t('field.product'),
|
||||
},
|
||||
{
|
||||
prop: 'typeOfEventStr',
|
||||
minWidth: '200px',
|
||||
align: 'center',
|
||||
label: this.$t('field.typeOfEvent'),
|
||||
},
|
||||
{
|
||||
prop: 'eventStatusStr',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: this.$t('field.eventStatus'),
|
||||
},
|
||||
{
|
||||
prop: 'eventId',
|
||||
minWidth: '160px',
|
||||
align: 'center',
|
||||
label: this.$t('field.eventId'),
|
||||
},
|
||||
{
|
||||
prop: 'blockNo',
|
||||
minWidth: '160px',
|
||||
align: 'center',
|
||||
label: this.$t('field.blockNo'),
|
||||
},
|
||||
{
|
||||
prop: 'eventDate',
|
||||
minWidth: '160px',
|
||||
align: 'center',
|
||||
label: this.$t('field.eventDate'),
|
||||
},
|
||||
// {
|
||||
// prop: 'outsideEventId',
|
||||
// minWidth: '160px',
|
||||
// align: 'center',
|
||||
// label: this.$t('form.outsideEventId'),
|
||||
// },
|
||||
],
|
||||
// 表格行单机双击事件
|
||||
events: {
|
||||
},
|
||||
// 操作栏自定义按钮
|
||||
operations: [
|
||||
|
||||
],
|
||||
tableTopButton: [
|
||||
{
|
||||
text: this.$t('button.revoke'),
|
||||
type: 'primary',
|
||||
class: 'el-text-color',
|
||||
callback: (value) => {
|
||||
this.handleBatchRevoke(value);
|
||||
},
|
||||
},
|
||||
],
|
||||
// 搜索查询的参数
|
||||
searchParams: {
|
||||
pageStart: 1,
|
||||
pageLimit: 20,
|
||||
},
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
this.queryPage();
|
||||
this.getOptions();
|
||||
},
|
||||
methods: {
|
||||
resetForm() {
|
||||
this.searchParams = {
|
||||
pageStart: 1,
|
||||
pageLimit: 20,
|
||||
};
|
||||
},
|
||||
searchSubmit(val) {
|
||||
console.log('search结果', val);
|
||||
this.searchParams = { ...this.searchParams, ...val };
|
||||
this.queryPage();
|
||||
},
|
||||
// 页面展示条数改变事件-pageLimit
|
||||
handleSizeChange(pageLimit) {
|
||||
this.searchParams.pageLimit = pageLimit;
|
||||
this.queryPage();
|
||||
},
|
||||
// 页面切换事件-pageStart
|
||||
handleCurrentChange(pageStart) {
|
||||
// console.log('');
|
||||
this.searchParams.pageStart = pageStart;
|
||||
this.queryPage();
|
||||
},
|
||||
// 数据列确定修改事件
|
||||
handleCustomColumnChange(val) {
|
||||
// console.log('数据列确定修改事件',val);
|
||||
// this.tableData = mockData2;
|
||||
},
|
||||
// 多选事件
|
||||
handleSelectionChange(val) {
|
||||
console.log('多选事件 ', val);
|
||||
this.selection = val;
|
||||
},
|
||||
// 自定义按钮 点击事件
|
||||
async handleBatchRevoke(val) {
|
||||
if (!this.selection.length > 0) {
|
||||
const temp = await this.$confirmAction(
|
||||
'请至少选择一条记录！',
|
||||
'warning',
|
||||
'撤销',
|
||||
);
|
||||
return temp;
|
||||
}
|
||||
this.$apis
|
||||
.batchRevoke({ ids: this.selection })
|
||||
.then((res) => {
|
||||
console.log(res, '确定回调---');
|
||||
this.$message.success('请求成功');
|
||||
});
|
||||
},
|
||||
async queryPage() {
|
||||
const params = {
|
||||
moduleName: 'dcsEventManager',
|
||||
...this.searchParams,
|
||||
};
|
||||
if (params.eventDate && params.eventDate.length > 0) {
|
||||
params.eventDateStart = this.searchParams.eventDate[0];
|
||||
params.eventDateEnd = this.searchParams.eventDate[1];
|
||||
}
|
||||
delete params.eventDate;
|
||||
const transformedParams = {};
|
||||
for (const key in params) {
|
||||
transformedParams[`queryParam.${key}`] = params[key];
|
||||
}
|
||||
this.loading = true;
|
||||
const res = await this.$apis.getEventList(transformedParams);
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.tableData = res.data.result.datals;
|
||||
this.total = res.data.result.total;
|
||||
}
|
||||
},
|
||||
getOptions() {
|
||||
this.$apis
|
||||
.queryComboxData({ 'codifierGrpCodes': 'Instrument,static_RcsTypeOfEvent,DealStatusRcs,productList' })
|
||||
.then((res) => {
|
||||
const { DealStatusRcs, Instrument, RcsTypeOfEvent, productList } = res.data.result;
|
||||
this.formArr[2].options = RcsTypeOfEvent;
|
||||
this.formArr[3].options = DealStatusRcs;
|
||||
this.formArr[1].options = productList;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.event-manager{
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
<!--
|
||||
使用案例
|
||||
<LineCenterDialog
|
||||
:visible="testVisible"
|
||||
@close="testVisible = false"
|
||||
/>
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="line_center_dialog">
|
||||
<RCSDialog
|
||||
:title="title"
|
||||
:visible="dialogVisible"
|
||||
:before-close="rcsDialogbeforeClose['lineCenter']"
|
||||
:destroy-on-close="true"
|
||||
:paddingempty="true"
|
||||
:hiddentitle="true"
|
||||
:append-to-body="true"
|
||||
>
|
||||
<template #header />
|
||||
<template #default>
|
||||
<lineCenter
|
||||
:value="{'chsMenuName': 'menu.forexSpot'}"
|
||||
/>
|
||||
</template>
|
||||
<template #footer />
|
||||
</RCSDialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import RCSDialog from '@/components/RCSDialog';
|
||||
import lineCenter from '../../lineCenter';
|
||||
export default {
|
||||
name: 'LineCenterDialog',
|
||||
components: {
|
||||
RCSDialog,
|
||||
lineCenter,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
onClose: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
rcsDialogbeforeClose: {
|
||||
'lineCenter': (done) => {
|
||||
console.log('before-close');
|
||||
this.close();
|
||||
},
|
||||
},
|
||||
rcsDialogBtnEvent: {
|
||||
'lineCenterClose': () => {
|
||||
this.close();
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
visible(newVal) {
|
||||
this.dialogVisible = newVal;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.dialogVisible = false;
|
||||
this.$emit('close');
|
||||
if (this.onClose) {
|
||||
this.onClose();
|
||||
}
|
||||
},
|
||||
show() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dcs_details_dialog {
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="附件管理"
|
||||
:visible.sync="visible"
|
||||
width="960px"
|
||||
height="480px"
|
||||
>
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<el-tab-pane
|
||||
label="用户管理"
|
||||
name="first"
|
||||
>用户管理</el-tab-pane>
|
||||
<el-tab-pane
|
||||
label="配置管理"
|
||||
name="second"
|
||||
>配置管理</el-tab-pane>
|
||||
</el-tabs>
|
||||
<PublicTable
|
||||
ref="tableRef"
|
||||
style="height: 480px"
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:has-index="false"
|
||||
:need-select="false"
|
||||
:table-top-button="tableTopButton"
|
||||
:table-data="tableData"
|
||||
:table-info="tableInfo"
|
||||
:table-column="columns"
|
||||
:events="events"
|
||||
:is-need-pagination="false"
|
||||
:current-page="pageNum"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
:operated-string="operatedString"
|
||||
:is-need-customcolumn="false"
|
||||
:is-need-import="true"
|
||||
:has-operation="false"
|
||||
@sizeChange="handleSizeChange"
|
||||
@currentChange="handleCurrentChange"
|
||||
@customColumnChange="handleCustomColumnChange"
|
||||
@handleTableTopColumnIconClick="handleTableTopColumnIconClick"
|
||||
@handleSelectionChange="handleSelectionChange"
|
||||
/>
|
||||
<span
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
@click="close"
|
||||
>取 消</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="close"
|
||||
>确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
visible: false,
|
||||
// table
|
||||
loading: false,
|
||||
tableTopButton: [],
|
||||
tableData: [],
|
||||
tableInfo: {
|
||||
fileConfig: {
|
||||
uploadParams: {
|
||||
moduleName: 'dcsDailyTradeQuery',
|
||||
param: { 'multiple': false },
|
||||
},
|
||||
},
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
prop: 'dealId',
|
||||
minWidth: '100px',
|
||||
label: '附件编号',
|
||||
},
|
||||
{
|
||||
prop: 'folderStr',
|
||||
minWidth: '100px',
|
||||
label: '附件名称',
|
||||
},
|
||||
{
|
||||
prop: 'cptyStr',
|
||||
minWidth: '120px',
|
||||
label: ' 创建时间 ',
|
||||
},
|
||||
{
|
||||
prop: 'underlying',
|
||||
minWidth: '80px',
|
||||
label: ' 创建人编号 ',
|
||||
},
|
||||
],
|
||||
operatedString: '',
|
||||
pageNum: 1,
|
||||
pageSize: 50,
|
||||
total: 1,
|
||||
events: {
|
||||
'row-dblclick': (row) => {
|
||||
// 双击表格 行 触发的函数
|
||||
// this.$emit('dblclick', row);
|
||||
},
|
||||
},
|
||||
// 其他字段
|
||||
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(newval) {
|
||||
this.visible = newval;
|
||||
if (this.visible) {
|
||||
// this.queryPage();
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
},
|
||||
queryPage() {
|
||||
const data = {
|
||||
'queryParam.instrument': 'FXSPOT',
|
||||
'queryParam.product': 'FXSPOT',
|
||||
'queryParam.globalId': this.formData.globalId,
|
||||
'queryParam.dealId': this.formData.dealId,
|
||||
'queryParam.folder': this.formData.folder,
|
||||
'queryParam.underlying': this.formData.underlying,
|
||||
'queryParam.cpty': this.formData.cpty,
|
||||
'queryParam.amount1': '',
|
||||
'queryParam.amount2': '',
|
||||
'queryParam.tradeDateStart': this.formData.tradeDateStart,
|
||||
'queryParam.tradeDateEnd': this.formData.tradeDateEnd,
|
||||
'queryParam.maturityDateStart': this.formData.maturityDateStart,
|
||||
'queryParam.maturityDateEnd': this.formData.maturityDateEnd,
|
||||
'queryParam.dealStatus': this.formData.dealStatus || [],
|
||||
'queryParam.pageStart': this.pageNum,
|
||||
'queryParam.pageLimit': this.pageSize,
|
||||
'queryParam.isFuzzy': 'Y',
|
||||
};
|
||||
this.$apis.getdealQueryqueryPage(data).then(res => {
|
||||
this.tableData = res.data.result.datals;
|
||||
this.total = res.data.result.total;
|
||||
});
|
||||
},
|
||||
handleSizeChange(pageSize) {
|
||||
this.pageSize = pageSize;
|
||||
this.queryPage();
|
||||
},
|
||||
handleCurrentChange(pageNum) {
|
||||
this.pageNum = pageNum;
|
||||
this.queryPage();
|
||||
},
|
||||
handleCustomColumnChange(val) {
|
||||
},
|
||||
handleTableTopColumnIconClick(val) {
|
||||
this.operatedString = '我是计算了之后的字符串';
|
||||
console.log('当前列 ', val);
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
console.log('多选事件 ', val);
|
||||
},
|
||||
close() {
|
||||
this.$emit('closeQuickSearch');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="footer">
|
||||
<!-- 底部按钮 -->
|
||||
<span
|
||||
class="clear"
|
||||
@click="$emit('handleclearForm')"
|
||||
>
|
||||
<icon-font
|
||||
style="margin-right: 4px"
|
||||
name="icon-operational-risk"
|
||||
size="11"
|
||||
/>
|
||||
<span>一键清空</span>
|
||||
</span>
|
||||
<!-- <el-button
|
||||
v-if="bottomBtns.expandBtn === 'Y'"
|
||||
class="submit"
|
||||
size="small"
|
||||
@click="handleCancelForm"
|
||||
>更多</el-button>
|
||||
<el-button
|
||||
v-if="bottomBtns.deleteRight === 'Y'"
|
||||
class="submit"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleDelete"
|
||||
>删除</el-button> -->
|
||||
<!-- <el-button
|
||||
v-if="bottomBtns.updateRight === 'Y'"
|
||||
class="submit"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handlePreSubmit"
|
||||
>修改</el-button> -->
|
||||
<el-button
|
||||
class="submit"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="$emit('handlePreSubmit')"
|
||||
>提交</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footer {
|
||||
padding: 0 6px;
|
||||
text-align: right;
|
||||
margin-top: 12px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
background-color: var(--desktop-bg-color-1);
|
||||
.clear {
|
||||
font-size: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.submit {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div class="header-top">
|
||||
<!-- 顶部按钮 -->
|
||||
<div class="header-topleft">
|
||||
<div class="header-icon">
|
||||
<icon-font
|
||||
name="icon-doc-edit"
|
||||
size="11"
|
||||
/>
|
||||
</div>
|
||||
<div class="header-title">{{ title }}</div>
|
||||
</div>
|
||||
<div class="header-topright">
|
||||
<!-- 快速查询 -->
|
||||
<icon-font
|
||||
class="search"
|
||||
name="icon-batch-search"
|
||||
size="12"
|
||||
@click="$emit('handleQuickSearch')"
|
||||
/>
|
||||
<!-- 附件管理 -->
|
||||
<icon-font
|
||||
class="link"
|
||||
name="icon-link1"
|
||||
size="12"
|
||||
@click="$emit('handleattachmentVisible')"
|
||||
/>
|
||||
<div class="devide">1</div>
|
||||
<!-- 现金流预览 -->
|
||||
<div
|
||||
class="handle"
|
||||
@click="$emit('handleModal',0)"
|
||||
>
|
||||
<icon-font
|
||||
name="icon-account"
|
||||
size="12"
|
||||
/>
|
||||
</div>
|
||||
<!-- 操作风险 -->
|
||||
<div
|
||||
class="handle"
|
||||
@click="$emit('handleModal',1)"
|
||||
>
|
||||
<icon-font
|
||||
name="icon-operational-risk"
|
||||
size="12"
|
||||
/>
|
||||
</div>
|
||||
<!-- 信用风险 -->
|
||||
<div
|
||||
class="handle"
|
||||
@click="$emit('handleModal',2)"
|
||||
>
|
||||
<icon-font
|
||||
name="icon-credit-risk"
|
||||
size="12"
|
||||
/>
|
||||
</div>
|
||||
<!-- 市场风险 -->
|
||||
<div
|
||||
class="handle"
|
||||
@click="$emit('handleModal',3)"
|
||||
>
|
||||
<icon-font
|
||||
name="icon-market-risk"
|
||||
size="12"
|
||||
/>
|
||||
</div>
|
||||
<!-- 估值分析 -->
|
||||
<icon-font
|
||||
class="info"
|
||||
name="icon-information-query"
|
||||
size="12"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 0 12px;
|
||||
background-color: var(--desktop-bg-color-1);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
height: 37px;
|
||||
border-bottom: 1px solid var(--card-border);
|
||||
.header-topleft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.header-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--desktop-bg-color-1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.header-title {
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
.header-topright {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
.search {
|
||||
margin-right: 6px;
|
||||
}
|
||||
.link {
|
||||
margin-right: 17px;
|
||||
}
|
||||
.devide {
|
||||
border-right: 2px solid var(--desktop-bg-color-2);
|
||||
margin-right: 15px;
|
||||
margin-left: 8px;
|
||||
width: 0px;
|
||||
height: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.handle {
|
||||
margin-right: 4px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: var(--desktop-bg-color-1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.info {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 现金流 -->
|
||||
<PublicTable
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:has-index="true"
|
||||
:need-select="false"
|
||||
:table-data="tableData"
|
||||
:table-info="tableInfo"
|
||||
:table-column="columns"
|
||||
:events="events"
|
||||
:is-need-pagination="true"
|
||||
:current-page="pageNum"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
:has-operation="false"
|
||||
:operated-string="operatedString"
|
||||
:is-need-customcolumn="false"
|
||||
@sizeChange="handleSizeChange"
|
||||
@currentChange="handleCurrentChange"
|
||||
@customColumnChange="handleCustomColumnChange"
|
||||
@handleTableTopColumnIconClick="handleTableTopColumnIconClick"
|
||||
@handleSelectionChange="handleSelectionChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { debounce } from '@/utils/index.js';
|
||||
export default {
|
||||
isOpen: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
row: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// table
|
||||
loading: false,
|
||||
tableData: [],
|
||||
tableInfo: {
|
||||
tableHeight: 340,
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
prop: 'paymentDirectionStr',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: '交易方向',
|
||||
render: (h, params) => {
|
||||
if (params.row.paymentDirection === 'BUY') { // 收
|
||||
return h('div', {
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
color: 'rgb(0, 255, 0)',
|
||||
width: '28px',
|
||||
height: '22px',
|
||||
lineHeight: '22px',
|
||||
backgroundColor: 'rgb(0, 255, 0, 0.2)',
|
||||
textAlign: 'center',
|
||||
},
|
||||
}, params.row?.paymentDirectionStr);
|
||||
} else {
|
||||
return h('div', {
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
color: 'rgb(255, 0, 0)',
|
||||
width: '28px',
|
||||
height: '22px',
|
||||
lineHeight: '22px',
|
||||
backgroundColor: 'rgb(255, 0, 0, 0.2)',
|
||||
textAlign: 'center',
|
||||
},
|
||||
}, params.row?.paymentDirectionStr);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'ccy',
|
||||
minWidth: '60px',
|
||||
align: 'center',
|
||||
label: '货币',
|
||||
},
|
||||
{
|
||||
prop: 'nominalStr',
|
||||
minWidth: '140px',
|
||||
align: 'right',
|
||||
label: '金额',
|
||||
render: (h, params) => {
|
||||
if (params.row.paymentDirection === 'BUY') { // 收
|
||||
return h('div', {}, params.row?.nominalStr);
|
||||
} else {
|
||||
return h('div', {
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
color: 'rgb(255, 0, 0)',
|
||||
textAlign: 'center',
|
||||
},
|
||||
}, params.row?.amountStr);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'paymentDateStr',
|
||||
minWidth: '110px',
|
||||
align: 'center',
|
||||
label: '支付日期',
|
||||
},
|
||||
{
|
||||
prop: 'startDateStr',
|
||||
minWidth: '110px',
|
||||
align: 'center',
|
||||
label: '开始日期',
|
||||
},
|
||||
{
|
||||
prop: 'endDateStr',
|
||||
minWidth: '110px',
|
||||
align: 'center',
|
||||
label: '结束日期',
|
||||
},
|
||||
{
|
||||
prop: 'cashflowTypeStr',
|
||||
minWidth: '81px',
|
||||
align: 'center',
|
||||
label: '类型',
|
||||
},
|
||||
{
|
||||
prop: 'cashflowStatusStr',
|
||||
minWidth: '89px',
|
||||
align: 'center',
|
||||
label: '交易状态',
|
||||
render: (h, params) => {
|
||||
if (params.row.cashflowStatus === 'FIXING') { // 确定
|
||||
return h('div', {
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
color: 'rgb(32, 201, 139)',
|
||||
textAlign: 'center',
|
||||
},
|
||||
}, `· ${params.row?.cashflowStatusStr}`);
|
||||
} else {
|
||||
return h('div', {
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
color: 'rgb(106, 178, 255)',
|
||||
textAlign: 'center',
|
||||
},
|
||||
}, `· ${params.row?.cashflowStatusStr}`);
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
operatedString: '',
|
||||
// pagenation
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
total: 100,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$bus.$on('bujiselectRow', data => {
|
||||
if (data.dealId) {
|
||||
debounce(this.queryList(data));
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
queryList(val) {
|
||||
const data = {
|
||||
'cashFlow.dealId': val.dealId,
|
||||
'cashFlow.instrument': val.instrument,
|
||||
'cashFlow.dealStatus': val.dealStatus,
|
||||
// 'cashFlow.paymentDirection': 'BUY',
|
||||
};
|
||||
this.$apis.getdcsQueryCashFlowList(data).then(res => {
|
||||
this.tableData = res.data.result;
|
||||
// console.log('this.tableData', this.tableData);
|
||||
});
|
||||
},
|
||||
handleSizeChange(pageSize) {
|
||||
this.pageSize = pageSize;
|
||||
},
|
||||
handleCurrentChange(pageNum) {
|
||||
this.pageNum = pageNum;
|
||||
},
|
||||
handleCustomColumnChange(val) {
|
||||
},
|
||||
handleTableTopColumnIconClick(val) {
|
||||
this.operatedString = '我是计算了之后的字符串';
|
||||
console.log('当前列 ', val);
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
console.log('多选事件 ', val);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
+198
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 现金流预览 -->
|
||||
<PublicTable
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:has-index="true"
|
||||
:need-select="false"
|
||||
:table-data="tableData"
|
||||
:table-info="tableInfo"
|
||||
:table-column="columns"
|
||||
:events="events"
|
||||
:is-need-pagination="true"
|
||||
:current-page="pageNum"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
:has-operation="false"
|
||||
:operated-string="operatedString"
|
||||
:is-need-customcolumn="false"
|
||||
@sizeChange="handleSizeChange"
|
||||
@currentChange="handleCurrentChange"
|
||||
@customColumnChange="handleCustomColumnChange"
|
||||
@handleTableTopColumnIconClick="handleTableTopColumnIconClick"
|
||||
@handleSelectionChange="handleSelectionChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { debounce } from '@/utils/index.js';
|
||||
export default {
|
||||
isOpen: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
row: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// table
|
||||
loading: false,
|
||||
tableData: [],
|
||||
tableInfo: {
|
||||
tableHeight: 340,
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
prop: 'paymentDirectionStr',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: '交易方向',
|
||||
render: (h, params) => {
|
||||
if (params.row.paymentDirection === 'BUY') { // 收
|
||||
return h('div', {
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
color: 'rgb(0, 255, 0)',
|
||||
width: '28px',
|
||||
height: '22px',
|
||||
lineHeight: '22px',
|
||||
backgroundColor: 'rgb(0, 255, 0, 0.2)',
|
||||
textAlign: 'center',
|
||||
},
|
||||
}, params.row?.paymentDirectionStr);
|
||||
} else {
|
||||
return h('div', {
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
color: 'rgb(255, 0, 0)',
|
||||
width: '28px',
|
||||
height: '22px',
|
||||
lineHeight: '22px',
|
||||
backgroundColor: 'rgb(255, 0, 0, 0.2)',
|
||||
textAlign: 'center',
|
||||
},
|
||||
}, params.row?.paymentDirectionStr);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'ccy',
|
||||
minWidth: '60px',
|
||||
align: 'center',
|
||||
label: '货币',
|
||||
},
|
||||
{
|
||||
prop: 'nominalStr',
|
||||
minWidth: '140px',
|
||||
align: 'right',
|
||||
label: '金额',
|
||||
render: (h, params) => {
|
||||
if (params.row.paymentDirection === 'BUY') { // 收
|
||||
return h('div', {}, params.row?.nominalStr);
|
||||
} else {
|
||||
return h('div', {
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
color: 'rgb(255, 0, 0)',
|
||||
textAlign: 'center',
|
||||
},
|
||||
}, params.row?.amountStr);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'paymentDateStr',
|
||||
minWidth: '110px',
|
||||
align: 'center',
|
||||
label: '支付日期',
|
||||
},
|
||||
{
|
||||
prop: 'startDateStr',
|
||||
minWidth: '110px',
|
||||
align: 'center',
|
||||
label: '开始日期',
|
||||
},
|
||||
{
|
||||
prop: 'endDateStr',
|
||||
minWidth: '110px',
|
||||
align: 'center',
|
||||
label: '结束日期',
|
||||
},
|
||||
{
|
||||
prop: 'cashflowTypeStr',
|
||||
minWidth: '81px',
|
||||
align: 'center',
|
||||
label: '类型',
|
||||
},
|
||||
{
|
||||
prop: 'cashflowStatusStr',
|
||||
minWidth: '89px',
|
||||
align: 'center',
|
||||
label: '交易状态',
|
||||
render: (h, params) => {
|
||||
if (params.row.cashflowStatus === 'FIXING') { // 确定
|
||||
return h('div', {
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
color: 'rgb(32, 201, 139)',
|
||||
textAlign: 'center',
|
||||
},
|
||||
}, `· ${params.row?.cashflowStatusStr}`);
|
||||
} else {
|
||||
return h('div', {
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
color: 'rgb(106, 178, 255)',
|
||||
textAlign: 'center',
|
||||
},
|
||||
}, `· ${params.row?.cashflowStatusStr}`);
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
operatedString: '',
|
||||
// pagenation
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
total: 100,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$bus.$on('bujiformData', data => {
|
||||
if (data['deal.folder']) {
|
||||
debounce(this.queryList(data));
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
queryList(val) {
|
||||
this.$apis.getdcsPreviewCashflows(val).then(res => {
|
||||
this.tableData = res.data?.result?.previewCashflow || [];
|
||||
});
|
||||
},
|
||||
handleSizeChange(pageSize) {
|
||||
this.pageSize = pageSize;
|
||||
},
|
||||
handleCurrentChange(pageNum) {
|
||||
this.pageNum = pageNum;
|
||||
},
|
||||
handleCustomColumnChange(val) {
|
||||
},
|
||||
handleTableTopColumnIconClick(val) {
|
||||
this.operatedString = '我是计算了之后的字符串';
|
||||
console.log('当前列 ', val);
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
console.log('多选事件 ', val);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<!-- 信用风险 -->
|
||||
<div class="operateRiskbox">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="结果"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div
|
||||
v-if="scope.row.limitStateInt === 0"
|
||||
class="red"
|
||||
>· 超限</div>
|
||||
<div
|
||||
v-if="scope.row.limitStateInt === 1"
|
||||
class="yellow"
|
||||
>· 预警</div>
|
||||
<div
|
||||
v-if="scope.row.limitStateInt === 2"
|
||||
class="green"
|
||||
>· 通过</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="name"
|
||||
align="center"
|
||||
label="指标"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div v-html="scope.row.limitName" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="province"
|
||||
align="center"
|
||||
label="自定义名称"
|
||||
width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div v-html="scope.row.dimensionStr" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="province"
|
||||
align="center"
|
||||
label="限额/剩余额度"
|
||||
width="240"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div v-html="scope.row.limitValueStr" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="province"
|
||||
align="center"
|
||||
label="货币"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="province"
|
||||
align="center"
|
||||
label="检查维度"
|
||||
width="240"
|
||||
>
|
||||
<el-table-column
|
||||
prop="province"
|
||||
align="center"
|
||||
label="交易对手"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="province"
|
||||
align="center"
|
||||
label="实体"
|
||||
width="120"
|
||||
/>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { debounce } from '@/utils/index.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$bus.$on('bujiformData', (data) => {
|
||||
if (data['deal.folder']) {
|
||||
debounce(this.queryList(data));
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
queryList(val) {
|
||||
const data = {
|
||||
...val,
|
||||
'deal.trialType': 'CreditRisk',
|
||||
'deal.riskType': 2,
|
||||
};
|
||||
this.$apis.getdcsdealActionFlow(data).then((res) => {
|
||||
this.tableData = res.data?.result?.riskResult?.list || [];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.red {
|
||||
text-align: center;
|
||||
color: rgb(233, 86, 82);
|
||||
}
|
||||
.yellow {
|
||||
text-align: center;
|
||||
color: rgb(255, 166, 50);
|
||||
}
|
||||
.green {
|
||||
text-align: center;
|
||||
color: rgb(32, 201, 139);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<!-- 市场风险 -->
|
||||
<div class="operateRiskbox">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="结果"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div
|
||||
v-if="scope.row.limitStateInt === 0"
|
||||
class="red"
|
||||
>· 超限</div>
|
||||
<div
|
||||
v-if="scope.row.limitStateInt === 1"
|
||||
class="yellow"
|
||||
>· 预警</div>
|
||||
<div
|
||||
v-if="scope.row.limitStateInt === 2"
|
||||
class="green"
|
||||
>· 通过</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="name"
|
||||
align="center"
|
||||
label="指标"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div v-html="scope.row.limitName" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="province"
|
||||
align="center"
|
||||
label="自定义名称"
|
||||
width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div v-html="scope.row.dimensionStr" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="province"
|
||||
align="center"
|
||||
label="限额/剩余额度"
|
||||
width="240"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div v-html="scope.row.limitValueStr" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="province"
|
||||
align="center"
|
||||
label="货币"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="province"
|
||||
align="center"
|
||||
label="检查维度"
|
||||
width="240"
|
||||
>
|
||||
<el-table-column
|
||||
prop="province"
|
||||
align="center"
|
||||
label="交易对手"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="province"
|
||||
align="center"
|
||||
label="实体"
|
||||
width="120"
|
||||
/>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { debounce } from '@/utils/index.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$bus.$on('bujiformData', (data) => {
|
||||
if (data['deal.folder']) {
|
||||
debounce(this.queryList(data));
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
queryList(val) {
|
||||
const data = {
|
||||
...val,
|
||||
'deal.trialType': 'MarketRisk',
|
||||
'deal.riskType': 4,
|
||||
};
|
||||
this.$apis.getdcsdealActionFlow(data).then((res) => {
|
||||
this.tableData = res.data?.result?.riskResult?.list || [];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.red {
|
||||
text-align: center;
|
||||
color: rgb(233, 86, 82);
|
||||
}
|
||||
.yellow {
|
||||
text-align: center;
|
||||
color: rgb(255, 166, 50);
|
||||
}
|
||||
.green {
|
||||
text-align: center;
|
||||
color: rgb(32, 201, 139);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<!-- 操作风险 -->
|
||||
<div class="operateRiskbox">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="结果"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div
|
||||
v-if="scope.row.limitStateInt === 0"
|
||||
class="red"
|
||||
>· 超限</div>
|
||||
<div
|
||||
v-if="scope.row.limitStateInt === 1"
|
||||
class="yellow"
|
||||
>· 预警</div>
|
||||
<div
|
||||
v-if="scope.row.limitStateInt === 2"
|
||||
class="green"
|
||||
>· 通过</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="name"
|
||||
align="center"
|
||||
label="指标"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div v-html="scope.row.limitName" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="province"
|
||||
align="center"
|
||||
label="自定义名称"
|
||||
width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div v-html="scope.row.dimensionStr" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="province"
|
||||
align="center"
|
||||
label="限额/剩余额度"
|
||||
width="240"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div v-html="scope.row.limitValueStr" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="province"
|
||||
align="center"
|
||||
label="货币"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="province"
|
||||
align="center"
|
||||
label="检查维度"
|
||||
width="240"
|
||||
>
|
||||
<el-table-column
|
||||
prop="province"
|
||||
align="center"
|
||||
label="交易对手"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="province"
|
||||
align="center"
|
||||
label="实体"
|
||||
width="120"
|
||||
/>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { debounce } from '@/utils/index.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$bus.$on('bujiformData', (data) => {
|
||||
if (data['deal.folder']) {
|
||||
debounce(this.queryList(data));
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
queryList(val) {
|
||||
const data = {
|
||||
...val,
|
||||
'deal.trialType': 'OperateRisk',
|
||||
'deal.riskType': 3,
|
||||
};
|
||||
this.$apis.getdcsdealActionFlow(data).then((res) => {
|
||||
this.tableData = res.data?.result?.riskResult?.list || [];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.red {
|
||||
text-align: center;
|
||||
color: rgb(233, 86, 82);
|
||||
}
|
||||
.yellow {
|
||||
text-align: center;
|
||||
color: rgb(255, 166, 50);
|
||||
}
|
||||
.green {
|
||||
text-align: center;
|
||||
color: rgb(32, 201, 139);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,356 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="选择要复制的交易"
|
||||
:visible.sync="visible"
|
||||
width="80%"
|
||||
>
|
||||
<FormSearch
|
||||
:form-arr="formArr"
|
||||
:form-data="formData"
|
||||
@searchSubmit="searchSubmit"
|
||||
@reset="resetForm"
|
||||
/>
|
||||
|
||||
<PublicTable
|
||||
ref="tableRef"
|
||||
style="height: 480px"
|
||||
row-key="id"
|
||||
:table-info="{}"
|
||||
:loading="loading"
|
||||
:has-index="false"
|
||||
:need-select="false"
|
||||
:table-data="tableData"
|
||||
:table-column="columns"
|
||||
:events="events"
|
||||
:is-need-pagination="true"
|
||||
:current-page="pageNum"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
:operated-string="operatedString"
|
||||
:is-need-customcolumn="false"
|
||||
:has-operation="false"
|
||||
@sizeChange="handleSizeChange"
|
||||
@currentChange="handleCurrentChange"
|
||||
@customColumnChange="handleCustomColumnChange"
|
||||
@handleTableTopColumnIconClick="handleTableTopColumnIconClick"
|
||||
@handleSelectionChange="handleSelectionChange"
|
||||
/>
|
||||
<!-- <span
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
@click="close"
|
||||
>取 消</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="close"
|
||||
>确 定</el-button>
|
||||
</span> -->
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormSearch from '@/components/formSearch/index.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormSearch,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
// form 配置
|
||||
formArr: [
|
||||
{
|
||||
prop: 'globalId',
|
||||
type: 'input',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '外部流水号',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
prop: 'dealStatus',
|
||||
type: 'select',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '交易状态',
|
||||
multiple: true,
|
||||
'collapse-tags': true,
|
||||
},
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
'codifierGrpCodes': 'DealStatusRcs',
|
||||
};
|
||||
this.$apis.getPosOptions(data).then(res => {
|
||||
this.formArr[1].options = res.data.result.DealStatusRcs;
|
||||
});
|
||||
},
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
prop: 'dealId',
|
||||
type: 'input',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '交易流水号',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
prop: 'folder',
|
||||
type: 'select',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '账户',
|
||||
},
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = { 'q': '', 'queryParam.menuId': '', 'queryParam.productConfigGrp': '' };
|
||||
this.$apis.queryFolderQueryAuthList(data).then(res => {
|
||||
this.formArr[3].options = res.data.result.map((item) => {
|
||||
return {
|
||||
label: item.localName,
|
||||
value: item.code,
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
prop: 'underlying',
|
||||
type: 'input',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '标的',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
prop: 'cpty',
|
||||
type: 'select',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '交易对手',
|
||||
},
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
'isInternalTrade': 'N',
|
||||
'queryParam.pageCtrl': 'true',
|
||||
'limitResultSet': 'true',
|
||||
'menuId': '',
|
||||
'productConfigGrp': '',
|
||||
'excludeBranch': 'N',
|
||||
'queryParam.pageStart': '1',
|
||||
'queryParam.pageLimit': '1000',
|
||||
'scrollFlag': '0',
|
||||
'startDate': '',
|
||||
'q': '',
|
||||
};
|
||||
this.$apis.queryCptyPage(data).then(res => {
|
||||
this.formArr[5].options = res.data.result.datals.map((item) => {
|
||||
return {
|
||||
label: item.localName,
|
||||
value: item.code,
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
prop: 'tradeDateStart',
|
||||
type: 'pickerDateSingle',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '交易日期',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
prop: 'tradeDateEnd',
|
||||
type: 'pickerDateSingle',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '小于等于',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
prop: 'maturityDateStart',
|
||||
type: 'pickerDateSingle',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '到期日期',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
prop: 'maturityDateEnd',
|
||||
type: 'pickerDateSingle',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '小于等于',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
],
|
||||
// 默认值
|
||||
formData: {},
|
||||
// table
|
||||
loading: false,
|
||||
tableData: [],
|
||||
columns: [
|
||||
{
|
||||
prop: 'dealId',
|
||||
minWidth: '100px',
|
||||
label: '交易流水号',
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
prop: 'folderStr',
|
||||
minWidth: '100px',
|
||||
label: '账户',
|
||||
},
|
||||
{
|
||||
prop: 'cptyStr',
|
||||
minWidth: '120px',
|
||||
label: '交易对手',
|
||||
},
|
||||
{
|
||||
prop: 'underlying',
|
||||
minWidth: '80px',
|
||||
label: '标的',
|
||||
},
|
||||
{
|
||||
prop: 'tradeDateStr',
|
||||
minWidth: '110px',
|
||||
label: '交易日期',
|
||||
},
|
||||
{
|
||||
prop: 'valueDateStr',
|
||||
minWidth: '110px',
|
||||
label: '起息日',
|
||||
},
|
||||
{
|
||||
prop: 'maturityDateStr',
|
||||
minWidth: '110px',
|
||||
label: '到期日期',
|
||||
},
|
||||
{
|
||||
prop: 'dealStatusStr',
|
||||
minWidth: '80px',
|
||||
label: '交易状态',
|
||||
},
|
||||
{
|
||||
prop: 'sourceName',
|
||||
minWidth: '80px',
|
||||
label: '交易来源',
|
||||
},
|
||||
{
|
||||
prop: 'orginalId',
|
||||
minWidth: '90px',
|
||||
label: '外部流水号',
|
||||
},
|
||||
],
|
||||
operatedString: '',
|
||||
pageNum: 1,
|
||||
pageSize: 50,
|
||||
total: 1,
|
||||
events: {
|
||||
'row-dblclick': (row) => {
|
||||
// 双击表格 行 触发的函数
|
||||
this.$emit('dblclick', row);
|
||||
},
|
||||
},
|
||||
// 其他字段
|
||||
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(newval) {
|
||||
this.visible = newval;
|
||||
if (this.visible) {
|
||||
this.queryPage();
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
queryPage() {
|
||||
const data = {
|
||||
'queryParam.instrument': 'FXSPOT',
|
||||
'queryParam.product': 'FXSPOT',
|
||||
'queryParam.globalId': this.formData.globalId,
|
||||
'queryParam.dealId': this.formData.dealId,
|
||||
'queryParam.folder': this.formData.folder,
|
||||
'queryParam.underlying': this.formData.underlying,
|
||||
'queryParam.cpty': this.formData.cpty,
|
||||
'queryParam.amount1': '',
|
||||
'queryParam.amount2': '',
|
||||
'queryParam.tradeDateStart': this.formData.tradeDateStart,
|
||||
'queryParam.tradeDateEnd': this.formData.tradeDateEnd,
|
||||
'queryParam.maturityDateStart': this.formData.maturityDateStart,
|
||||
'queryParam.maturityDateEnd': this.formData.maturityDateEnd,
|
||||
'queryParam.dealStatus': this.formData.dealStatus || [],
|
||||
'queryParam.pageStart': this.pageNum,
|
||||
'queryParam.pageLimit': this.pageSize,
|
||||
'queryParam.isFuzzy': 'Y',
|
||||
};
|
||||
this.$apis.getdealQueryqueryPage(data).then(res => {
|
||||
this.tableData = res.data.result.datals;
|
||||
this.total = res.data.result.total;
|
||||
});
|
||||
},
|
||||
searchSubmit(val) {
|
||||
// console.log('search结果', val);
|
||||
this.queryPage();
|
||||
},
|
||||
resetForm() {
|
||||
this.formData = {};
|
||||
this.queryPage();
|
||||
},
|
||||
handleSizeChange(pageSize) {
|
||||
this.pageSize = pageSize;
|
||||
this.queryPage();
|
||||
},
|
||||
handleCurrentChange(pageNum) {
|
||||
this.pageNum = pageNum;
|
||||
this.queryPage();
|
||||
},
|
||||
handleCustomColumnChange(val) {
|
||||
},
|
||||
handleTableTopColumnIconClick(val) {
|
||||
this.operatedString = '我是计算了之后的字符串';
|
||||
console.log('当前列 ', val);
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
console.log('多选事件 ', val);
|
||||
},
|
||||
close() {
|
||||
this.$emit('closeQuickSearch');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,356 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="选择要编辑的交易"
|
||||
:visible.sync="visible"
|
||||
width="80%"
|
||||
>
|
||||
<FormSearch
|
||||
:form-arr="formArr"
|
||||
:form-data="formData"
|
||||
@searchSubmit="searchSubmit"
|
||||
@reset="resetForm"
|
||||
/>
|
||||
|
||||
<PublicTable
|
||||
ref="tableRef"
|
||||
style="height: 480px"
|
||||
row-key="id"
|
||||
:table-info="{}"
|
||||
:loading="loading"
|
||||
:has-index="false"
|
||||
:need-select="false"
|
||||
:table-data="tableData"
|
||||
:table-column="columns"
|
||||
:events="events"
|
||||
:is-need-pagination="true"
|
||||
:current-page="pageNum"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
:operated-string="operatedString"
|
||||
:is-need-customcolumn="false"
|
||||
:has-operation="false"
|
||||
@sizeChange="handleSizeChange"
|
||||
@currentChange="handleCurrentChange"
|
||||
@customColumnChange="handleCustomColumnChange"
|
||||
@handleTableTopColumnIconClick="handleTableTopColumnIconClick"
|
||||
@handleSelectionChange="handleSelectionChange"
|
||||
/>
|
||||
<!-- <span
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
@click="close"
|
||||
>取 消</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="close"
|
||||
>确 定</el-button>
|
||||
</span> -->
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormSearch from '@/components/formSearch/index.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormSearch,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
// form 配置
|
||||
formArr: [
|
||||
{
|
||||
prop: 'globalId',
|
||||
type: 'input',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '外部流水号',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
prop: 'dealStatus',
|
||||
type: 'select',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '交易状态',
|
||||
multiple: true,
|
||||
'collapse-tags': true,
|
||||
},
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
'codifierGrpCodes': 'DealStatusRcs',
|
||||
};
|
||||
this.$apis.getPosOptions(data).then(res => {
|
||||
this.formArr[1].options = res.data.result.DealStatusRcs;
|
||||
});
|
||||
},
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
prop: 'dealId',
|
||||
type: 'input',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '交易流水号',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
prop: 'folder',
|
||||
type: 'select',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '账户',
|
||||
},
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = { 'q': '', 'queryParam.menuId': '', 'queryParam.productConfigGrp': '' };
|
||||
this.$apis.queryFolderQueryAuthList(data).then(res => {
|
||||
this.formArr[3].options = res.data.result.map((item) => {
|
||||
return {
|
||||
label: item.localName,
|
||||
value: item.code,
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
prop: 'underlying',
|
||||
type: 'input',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '标的',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
prop: 'cpty',
|
||||
type: 'select',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '交易对手',
|
||||
},
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
'isInternalTrade': 'N',
|
||||
'queryParam.pageCtrl': 'true',
|
||||
'limitResultSet': 'true',
|
||||
'menuId': '',
|
||||
'productConfigGrp': '',
|
||||
'excludeBranch': 'N',
|
||||
'queryParam.pageStart': '1',
|
||||
'queryParam.pageLimit': '1000',
|
||||
'scrollFlag': '0',
|
||||
'startDate': '',
|
||||
'q': '',
|
||||
};
|
||||
this.$apis.queryCptyPage(data).then(res => {
|
||||
this.formArr[5].options = res.data.result.datals.map((item) => {
|
||||
return {
|
||||
label: item.localName,
|
||||
value: item.code,
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
prop: 'tradeDateStart',
|
||||
type: 'pickerDateSingle',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '交易日期',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
prop: 'tradeDateEnd',
|
||||
type: 'pickerDateSingle',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '小于等于',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
prop: 'maturityDateStart',
|
||||
type: 'pickerDateSingle',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '到期日期',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
prop: 'maturityDateEnd',
|
||||
type: 'pickerDateSingle',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '小于等于',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
],
|
||||
// 默认值
|
||||
formData: {},
|
||||
// table
|
||||
loading: false,
|
||||
tableData: [],
|
||||
columns: [
|
||||
{
|
||||
prop: 'dealId',
|
||||
minWidth: '100px',
|
||||
label: '交易流水号',
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
prop: 'folderStr',
|
||||
minWidth: '100px',
|
||||
label: '账户',
|
||||
},
|
||||
{
|
||||
prop: 'cptyStr',
|
||||
minWidth: '120px',
|
||||
label: '交易对手',
|
||||
},
|
||||
{
|
||||
prop: 'underlying',
|
||||
minWidth: '80px',
|
||||
label: '标的',
|
||||
},
|
||||
{
|
||||
prop: 'tradeDateStr',
|
||||
minWidth: '110px',
|
||||
label: '交易日期',
|
||||
},
|
||||
{
|
||||
prop: 'valueDateStr',
|
||||
minWidth: '110px',
|
||||
label: '起息日',
|
||||
},
|
||||
{
|
||||
prop: 'maturityDateStr',
|
||||
minWidth: '110px',
|
||||
label: '到期日期',
|
||||
},
|
||||
{
|
||||
prop: 'dealStatusStr',
|
||||
minWidth: '80px',
|
||||
label: '交易状态',
|
||||
},
|
||||
{
|
||||
prop: 'sourceName',
|
||||
minWidth: '80px',
|
||||
label: '交易来源',
|
||||
},
|
||||
{
|
||||
prop: 'orginalId',
|
||||
minWidth: '90px',
|
||||
label: '外部流水号',
|
||||
},
|
||||
],
|
||||
operatedString: '',
|
||||
pageNum: 1,
|
||||
pageSize: 50,
|
||||
total: 1,
|
||||
events: {
|
||||
'row-dblclick': (row) => {
|
||||
// 双击表格 行 触发的函数
|
||||
this.$emit('dblclick', row);
|
||||
},
|
||||
},
|
||||
// 其他字段
|
||||
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(newval) {
|
||||
this.visible = newval;
|
||||
if (this.visible) {
|
||||
this.queryPage();
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
queryPage() {
|
||||
const data = {
|
||||
'queryParam.instrument': 'FXSPOT',
|
||||
'queryParam.product': 'FXSPOT',
|
||||
'queryParam.globalId': this.formData.globalId,
|
||||
'queryParam.dealId': this.formData.dealId,
|
||||
'queryParam.folder': this.formData.folder,
|
||||
'queryParam.underlying': this.formData.underlying,
|
||||
'queryParam.cpty': this.formData.cpty,
|
||||
'queryParam.amount1': '',
|
||||
'queryParam.amount2': '',
|
||||
'queryParam.tradeDateStart': this.formData.tradeDateStart,
|
||||
'queryParam.tradeDateEnd': this.formData.tradeDateEnd,
|
||||
'queryParam.maturityDateStart': this.formData.maturityDateStart,
|
||||
'queryParam.maturityDateEnd': this.formData.maturityDateEnd,
|
||||
'queryParam.dealStatus': this.formData.dealStatus || [],
|
||||
'queryParam.pageStart': this.pageNum,
|
||||
'queryParam.pageLimit': this.pageSize,
|
||||
'queryParam.isFuzzy': 'Y',
|
||||
};
|
||||
this.$apis.getdealQueryqueryPage(data).then(res => {
|
||||
this.tableData = res.data.result.datals;
|
||||
this.total = res.data.result.total;
|
||||
});
|
||||
},
|
||||
searchSubmit(val) {
|
||||
// console.log('search结果', val);
|
||||
this.queryPage();
|
||||
},
|
||||
resetForm() {
|
||||
this.formData = {};
|
||||
this.queryPage();
|
||||
},
|
||||
handleSizeChange(pageSize) {
|
||||
this.pageSize = pageSize;
|
||||
this.queryPage();
|
||||
},
|
||||
handleCurrentChange(pageNum) {
|
||||
this.pageNum = pageNum;
|
||||
this.queryPage();
|
||||
},
|
||||
handleCustomColumnChange(val) {
|
||||
},
|
||||
handleTableTopColumnIconClick(val) {
|
||||
this.operatedString = '我是计算了之后的字符串';
|
||||
console.log('当前列 ', val);
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
console.log('多选事件 ', val);
|
||||
},
|
||||
close() {
|
||||
this.$emit('closeQuickSearch');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,613 @@
|
||||
<template>
|
||||
<div class="CenterRightboxContainer">
|
||||
<div class="CenterRightbox">
|
||||
<div class="ccenter">
|
||||
<div class="cheader">
|
||||
<!-- 顶部按钮 -->
|
||||
<BtnsTop
|
||||
title="外汇即期"
|
||||
@handleQuickSearch="handleQuickSearch"
|
||||
@handleattachmentVisible="handleattachmentVisible"
|
||||
@handleModal="handleModal_ForexSpot"
|
||||
/>
|
||||
<div class="publicFormbox">
|
||||
<publicForm
|
||||
ref="publicForm"
|
||||
:form-arr="zdArr"
|
||||
:form-data="formData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部按钮 -->
|
||||
<BtnsBottom
|
||||
@handleclearForm="handleclearForm_ForexSpot"
|
||||
@handlePreSubmit="handlePreSubmit"
|
||||
/>
|
||||
</div>
|
||||
<div class="cright">
|
||||
<CRight
|
||||
:value="handleType"
|
||||
@handleModal="handleModal_ForexSpot"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 要复制交易 弹窗 -->
|
||||
<QuickSearch
|
||||
:value="quickSearchVisible"
|
||||
@closeQuickSearch="handleCloseQuickSearch"
|
||||
@dblclick="handleQuickSearchdblclick_ForexSpot"
|
||||
/>
|
||||
|
||||
<!-- 附件管理 弹窗 -->
|
||||
<Attachment
|
||||
:value="attachmentVisible"
|
||||
@closeAttachment="handleCloseAttachment"
|
||||
@dblclick="handleAttachmentdblclick_ForexSpot"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import publicForm from '@/components/formLinkage';
|
||||
import CRight from '../lineRight/index.vue';
|
||||
import QuickSearch from '../component/quickSearch.vue';
|
||||
import Attachment from '../component/attachment';
|
||||
import BtnsTop from '../component/btnsTop.vue';
|
||||
import BtnsBottom from '../component/btnsBottom.vue';
|
||||
import fieldMixin from './fieldMixin';
|
||||
import './index.scss';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
publicForm,
|
||||
CRight,
|
||||
QuickSearch,
|
||||
Attachment,
|
||||
BtnsTop,
|
||||
BtnsBottom,
|
||||
},
|
||||
mixins: [fieldMixin],
|
||||
data() {
|
||||
return {
|
||||
zdArr: [
|
||||
{
|
||||
title: '交易信息',
|
||||
formArr: [
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'underlying',
|
||||
attrs: {
|
||||
label: '货币对',
|
||||
needStar: true,
|
||||
},
|
||||
options: [],
|
||||
rules: { required: true },
|
||||
events: {
|
||||
change: (e) => {
|
||||
this.setccy1ccy2_ForexSpot(e);
|
||||
|
||||
// 获取即期汇率
|
||||
const data = { pairCode: e };
|
||||
this.$apis.getdcsPairInfo(data).then((res) => {
|
||||
const result = res.data.result;
|
||||
this.formData.spotRate = result.spotRate;
|
||||
this.formData.quotationUnit = result.quotationUnit;
|
||||
this.formData.noDecimal1 = result.noDecimal1;
|
||||
this.formData.noDecimal2 = result.noDecimal2;
|
||||
|
||||
if (this.formData.amount1) {
|
||||
this.getamount2_ForexSpot();
|
||||
}
|
||||
});
|
||||
|
||||
// 获取起息日
|
||||
const data2 = {
|
||||
tradeDate: this.formData.tradeDate,
|
||||
code: this.formData.underlying,
|
||||
type: 'PAIR',
|
||||
};
|
||||
this.$apis.getdcsValueDate(data2).then((res) => {
|
||||
this.formData.maturityDate = res.data.result.toString();
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'inputFinance',
|
||||
prop: 'amount1',
|
||||
attrs: {
|
||||
label: `金额()`,
|
||||
needStar: true,
|
||||
precision: 2,
|
||||
},
|
||||
rules: { required: true },
|
||||
events: {
|
||||
focus: () => {
|
||||
if (
|
||||
this.formData.amount2 &&
|
||||
!this.formData.amount1 &&
|
||||
this.formData.spotRate
|
||||
) {
|
||||
this.getamount1_ForexSpot();
|
||||
}
|
||||
},
|
||||
blur: () => {
|
||||
if (this.formData.amount1 && this.formData.spotRate) {
|
||||
this.getamount2_ForexSpot();
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'spotRate',
|
||||
attrs: {
|
||||
label: '即期汇率',
|
||||
needStar: true,
|
||||
},
|
||||
options: [],
|
||||
rules: { required: true },
|
||||
events: {
|
||||
blur: () => {
|
||||
if (this.formData.amount1 && this.formData.spotRate) {
|
||||
this.getamount2_ForexSpot();
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'inputFinance',
|
||||
prop: 'amount2',
|
||||
attrs: {
|
||||
label: `金额()`,
|
||||
needStar: true,
|
||||
precision: 2,
|
||||
},
|
||||
rules: { required: true },
|
||||
events: {
|
||||
focus: () => {
|
||||
if (
|
||||
this.formData.amount1 &&
|
||||
!this.formData.amount2 &&
|
||||
this.formData.spotRate
|
||||
) {
|
||||
this.getamount2_ForexSpot();
|
||||
}
|
||||
},
|
||||
blur: () => {
|
||||
if (this.formData.amount2 && this.formData.spotRate) {
|
||||
this.getamount1_ForexSpot();
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pickerDateSingle',
|
||||
prop: 'tradeDate',
|
||||
span: 16,
|
||||
attrs: {
|
||||
label: '交易日期',
|
||||
needStar: true,
|
||||
},
|
||||
rules: { required: true },
|
||||
},
|
||||
{
|
||||
type: 'pickerTimeHHMM',
|
||||
prop: 'tradeTime',
|
||||
span: 8,
|
||||
attrs: {},
|
||||
rules: { required: true },
|
||||
},
|
||||
{
|
||||
type: 'pickerDateSingle',
|
||||
prop: 'maturityDate',
|
||||
attrs: {
|
||||
label: '起息日',
|
||||
needStar: true,
|
||||
},
|
||||
rules: { required: true },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '交易账户',
|
||||
formArr: [
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'folder',
|
||||
span: 16,
|
||||
attrs: {
|
||||
label: '账户',
|
||||
needStar: true,
|
||||
showValueName: 'name',
|
||||
},
|
||||
rules: { required: true },
|
||||
options: [],
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
q: '',
|
||||
'queryParam.menuId': '',
|
||||
'queryParam.productConfigGrp': '',
|
||||
};
|
||||
this.$apis.queryFolderQueryAuthList(data).then((res) => {
|
||||
this.zdArr[1].formArr[0].options = res.data.result.map(
|
||||
(item) => {
|
||||
return {
|
||||
label: item.code,
|
||||
value: item.code,
|
||||
name: item.localName,
|
||||
};
|
||||
},
|
||||
);
|
||||
});
|
||||
},
|
||||
change: (e) => {
|
||||
const arr = this.zdArr[1].formArr[0].options.filter(
|
||||
(item) => {
|
||||
return item.value === e;
|
||||
},
|
||||
);
|
||||
this.formData.folderName = arr[0].name;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'folderName',
|
||||
span: 8,
|
||||
attrs: {
|
||||
disabled: true,
|
||||
placeHolder: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'cpty',
|
||||
span: 16,
|
||||
attrs: {
|
||||
label: '交易对手',
|
||||
needStar: true,
|
||||
},
|
||||
rules: { required: true },
|
||||
options: [],
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
isInternalTrade: 'N',
|
||||
'queryParam.pageCtrl': 'true',
|
||||
'queryParam.pageLimit': '100',
|
||||
limitResultSet: 'true',
|
||||
menuId: '',
|
||||
productConfigGrp: '',
|
||||
excludeBranch: 'N',
|
||||
'queryParam.pageStart': '1',
|
||||
scrollFlag: '0',
|
||||
startDate: '',
|
||||
q: '',
|
||||
};
|
||||
this.$apis.queryCptyPage(data).then((res) => {
|
||||
this.zdArr[1].formArr[2].options =
|
||||
res.data.result.datals.map((item) => {
|
||||
return {
|
||||
label: item.code,
|
||||
value: item.code,
|
||||
name: item.localName,
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
change: (e) => {
|
||||
const arr = this.zdArr[1].formArr[2].options.filter(
|
||||
(item) => {
|
||||
return item.value === e;
|
||||
},
|
||||
);
|
||||
this.formData.cptyName = arr[0].name;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'cptyName',
|
||||
span: 8,
|
||||
attrs: {
|
||||
disabled: true,
|
||||
placeHolder: '',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
formArr: [
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'dealFlag',
|
||||
attrs: {
|
||||
label: '交易性质',
|
||||
needStar: true,
|
||||
},
|
||||
rules: { required: true },
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'blockNo',
|
||||
span: 16,
|
||||
attrs: {
|
||||
label: '外部流水号',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'sourceName',
|
||||
span: 8,
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'pickerDateSingle',
|
||||
prop: 'transactionDate',
|
||||
span: 16,
|
||||
attrs: {
|
||||
label: '交易成交日期',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pickerTimeHHMM',
|
||||
prop: 'transactionTime',
|
||||
span: 8,
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'tacount',
|
||||
attrs: {
|
||||
label: '项目',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'tpurpose',
|
||||
attrs: {
|
||||
label: '交易背景',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'ext20',
|
||||
attrs: {
|
||||
label: '交易目的',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'comments',
|
||||
attrs: {
|
||||
label: '备注',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '拓展字段',
|
||||
formArr: [
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'ssiCodeOurBuyCcy1',
|
||||
attrs: {
|
||||
label: `我方收结算路径()`,
|
||||
},
|
||||
options: [],
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
queryId: 'stb.baseQuery.queryAllSsiInfo',
|
||||
'queryParam.pageCtrl': false,
|
||||
'queryParam.isAllCurrenciesCode': 'N',
|
||||
'queryParam.dealsId': 'NULL',
|
||||
'queryParam.sitesCode': 'BANKZB',
|
||||
'queryParam.tradeDate': this.formData.tradeDate,
|
||||
'queryParam.cptyCode': '',
|
||||
'queryParam.instrumentGrpCode': 'FXSPOT',
|
||||
'queryParam.nostroVostro': 'NOSTRO',
|
||||
'queryParam.payDirection': 'REV',
|
||||
'queryParam.currenciesCode': '',
|
||||
'queryParam.deliveryMode': '0',
|
||||
'queryParam.clrMode': '',
|
||||
};
|
||||
this.$apis.querySettle(data).then((res) => {
|
||||
this.zdArr[3].formArr[0].options =
|
||||
res.data.result.datals.map((item) => {
|
||||
return {
|
||||
label: item.ssiName,
|
||||
value: item.ssiCode,
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'ssiCodeCptyBuyCcy1',
|
||||
attrs: {
|
||||
label: `对手方收结算路径()`,
|
||||
},
|
||||
options: [],
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
queryId: 'stb.baseQuery.queryAllSsiInfo',
|
||||
'queryParam.pageCtrl': false,
|
||||
'queryParam.isAllCurrenciesCode': 'N',
|
||||
'queryParam.dealsId': 'NULL',
|
||||
'queryParam.sitesCode': 'BANKZB',
|
||||
'queryParam.tradeDate': this.formData.tradeDate,
|
||||
'queryParam.cptyCode': '',
|
||||
'queryParam.instrumentGrpCode': 'FXSPOT',
|
||||
'queryParam.nostroVostro': 'VOSTRO',
|
||||
'queryParam.payDirection': 'REV',
|
||||
'queryParam.currenciesCode': '',
|
||||
'queryParam.deliveryMode': '0',
|
||||
'queryParam.clrMode': '',
|
||||
};
|
||||
this.$apis.querySettle(data).then((res) => {
|
||||
this.zdArr[3].formArr[1].options =
|
||||
res.data.result.datals.map((item) => {
|
||||
return {
|
||||
label: item.ssiName,
|
||||
value: item.ssiCode,
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'ssiCodeOurSellCcy2',
|
||||
attrs: {
|
||||
label: `我方付结算路径(${this.ccy2 ? this.ccy2 : ''})`,
|
||||
},
|
||||
options: [],
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
queryId: 'stb.baseQuery.queryAllSsiInfo',
|
||||
'queryParam.pageCtrl': false,
|
||||
'queryParam.isAllCurrenciesCode': 'N',
|
||||
'queryParam.dealsId': 'NULL',
|
||||
'queryParam.sitesCode': 'BANKZB',
|
||||
'queryParam.tradeDate': this.formData.tradeDate,
|
||||
'queryParam.cptyCode': '',
|
||||
'queryParam.instrumentGrpCode': 'FXSPOT',
|
||||
'queryParam.nostroVostro': 'NOSTRO',
|
||||
'queryParam.payDirection': 'PAY',
|
||||
'queryParam.currenciesCode': '',
|
||||
'queryParam.deliveryMode': '0',
|
||||
'queryParam.clrMode': '',
|
||||
};
|
||||
this.$apis.querySettle(data).then((res) => {
|
||||
this.zdArr[3].formArr[2].options =
|
||||
res.data.result.datals.map((item) => {
|
||||
return {
|
||||
label: item.ssiName,
|
||||
value: item.ssiCode,
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'ssiCodeCptySellCcy2',
|
||||
attrs: {
|
||||
label: `对手方付结算路径()`,
|
||||
},
|
||||
options: [],
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
queryId: 'stb.baseQuery.queryAllSsiInfo',
|
||||
'queryParam.pageCtrl': false,
|
||||
'queryParam.isAllCurrenciesCode': 'N',
|
||||
'queryParam.dealsId': 'NULL',
|
||||
'queryParam.sitesCode': 'BANKZB',
|
||||
'queryParam.tradeDate': this.formData.tradeDate,
|
||||
'queryParam.cptyCode': '',
|
||||
'queryParam.instrumentGrpCode': 'FXSPOT',
|
||||
'queryParam.nostroVostro': 'VOSTRO',
|
||||
'queryParam.payDirection': 'PAY',
|
||||
'queryParam.currenciesCode': '',
|
||||
'queryParam.deliveryMode': '0',
|
||||
'queryParam.clrMode': '',
|
||||
};
|
||||
this.$apis.querySettle(data).then((res) => {
|
||||
this.zdArr[3].formArr[3].options =
|
||||
res.data.result.datals.map((item) => {
|
||||
return {
|
||||
label: item.ssiName,
|
||||
value: item.ssiCode,
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'ext1',
|
||||
attrs: {
|
||||
label: '货币1账户行',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'ext2',
|
||||
attrs: {
|
||||
label: '货币2账户行',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'settlementMode',
|
||||
attrs: {
|
||||
label: '清算方式',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'ext4',
|
||||
attrs: {
|
||||
label: '业务员',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
// 默认值
|
||||
formData: {
|
||||
tradeDate: '',
|
||||
tradeTime: '',
|
||||
transactionDate: '',
|
||||
transactionTime: '',
|
||||
maturityDate: '',
|
||||
folderName: '',
|
||||
cptyName: '',
|
||||
spotRate: '',
|
||||
quotationUnit: 0, // 10的n次方
|
||||
noDecimal1: '', // 两个精度参数
|
||||
noDecimal2: '',
|
||||
amount1: '',
|
||||
amount2: '',
|
||||
dealFlag: 'INTERBANK',
|
||||
sourceName: 'RCS',
|
||||
},
|
||||
ccy1: '',
|
||||
ccy2: '',
|
||||
quickSearchVisible: false,
|
||||
attachmentVisible: false,
|
||||
handleType: '',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getOptions_ForexSpot();
|
||||
this.getSystemDate_ForexSpot();
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,337 @@
|
||||
|
||||
import { objAddPrefix } from '@/utils';
|
||||
|
||||
export default {
|
||||
|
||||
computed: {
|
||||
},
|
||||
|
||||
methods: {
|
||||
/** ----------------------------- 所有簿记 公共用的一样的事件提取出来 ---------------------------- */
|
||||
// 删除
|
||||
handleDelete() {},
|
||||
async IsHoliday(date) {
|
||||
const data = {
|
||||
code: this.formData.underlying,
|
||||
valueDate: date,
|
||||
type: 'PAIR',
|
||||
};
|
||||
const res = await this.$apis.getdcsisHolidayByUnderlying(data);
|
||||
return res.data.result;
|
||||
},
|
||||
// get交易对手名称
|
||||
getDCSqueryCptyName(val) {
|
||||
this.$apis.getDCSqueryCptyName({ code: val }).then((res) => {
|
||||
const result = res.data.result;
|
||||
this.formData.cptyName = result;
|
||||
});
|
||||
},
|
||||
// get账户名称
|
||||
getDCSqueryFolderById(val) {
|
||||
this.$apis.getDCSqueryFolderById({ code: val }).then((res) => {
|
||||
const result = res.data.result;
|
||||
this.formData.folderName = result.localName;
|
||||
});
|
||||
},
|
||||
// 打开 要复制交易 弹窗
|
||||
handleQuickSearch() {
|
||||
this.quickSearchVisible = false;
|
||||
setTimeout(() => {
|
||||
this.quickSearchVisible = true;
|
||||
}, 20);
|
||||
},
|
||||
// 关闭 要复制交易 弹窗
|
||||
handleCloseQuickSearch() {
|
||||
this.quickSearchVisible = false;
|
||||
},
|
||||
// 打开 附件管理 弹窗
|
||||
handleattachmentVisible() {
|
||||
this.attachmentVisible = false;
|
||||
setTimeout(() => {
|
||||
this.attachmentVisible = true;
|
||||
}, 20);
|
||||
},
|
||||
// 关闭 附件管理 弹窗
|
||||
handleCloseAttachment() {
|
||||
this.attachmentVisible = false;
|
||||
},
|
||||
/** ----------------------------单个页面内的methods最终都要移到这下面来，短期先不改方便开发 ----------------------- */
|
||||
/** -------------------------------------- 外汇即期 ----------------------------------------- */
|
||||
// 初始化数据
|
||||
getOptions_ForexSpot() {
|
||||
const data = {
|
||||
codifierGrpCodes:
|
||||
'settleMode,static_folders,static_cptys,DealStatusRcs,static_accBank,CashflowDirection,DealFlagRcs,AppId,Tpurpose,Tacount,static_currencies,static_pairs,static_pmPairs,OptionSettlementMode,BuySellRcs,static_pmCurrencies',
|
||||
};
|
||||
this.$apis.getDcsOptions(data).then((res) => {
|
||||
const result = res.data.result;
|
||||
this.zdArr[0].formArr[0].options = result.pairs;
|
||||
this.zdArr[2].formArr[0].options = result.DealFlagRcs;
|
||||
this.zdArr[2].formArr[2].options = result.AppId;
|
||||
this.zdArr[2].formArr[5].options = result.Tacount;
|
||||
this.zdArr[2].formArr[6].options = result.Tpurpose;
|
||||
this.zdArr[3].formArr[6].options = result.settleMode;
|
||||
});
|
||||
},
|
||||
// get日期
|
||||
getSystemDate_ForexSpot() {
|
||||
this.$apis.getDCSgetSystemDate({}).then((res) => {
|
||||
const result = res.data.result;
|
||||
this.formData.tradeDate = this.formData.transactionDate =
|
||||
result.date.toString();
|
||||
this.formData.tradeTime = this.formData.transactionTime = result.time
|
||||
.toString()
|
||||
.slice(0, 4);
|
||||
});
|
||||
},
|
||||
// get金额1
|
||||
getamount1_ForexSpot() {
|
||||
const data = {
|
||||
expression: `${this.formData.amount2} / ${
|
||||
this.formData.spotRate || 1
|
||||
} * -1 / ${Math.pow(10, this.formData.quotationUnit || 0)}`,
|
||||
precision: this.formData.noDecimal1 || 2,
|
||||
};
|
||||
this.$apis.getDCSdoEvaluation(data).then((res) => {
|
||||
this.formData.amount1 = res.data.result;
|
||||
});
|
||||
},
|
||||
// get金额2
|
||||
getamount2_ForexSpot() {
|
||||
const data = {
|
||||
expression: `${this.formData.amount1} * ${
|
||||
this.formData.spotRate || 1
|
||||
} * -1 / ${Math.pow(10, this.formData.quotationUnit || 0)}`,
|
||||
precision: this.formData.noDecimal2 || 2,
|
||||
};
|
||||
this.$apis.getDCSdoEvaluation(data).then((res) => {
|
||||
this.formData.amount2 = res.data.result;
|
||||
});
|
||||
},
|
||||
// 要复制交易 table row 双击事件
|
||||
handleQuickSearchdblclick_ForexSpot(row) {
|
||||
const data = {
|
||||
'queryParam.dealId': row.dealId,
|
||||
'queryParam.instrument': row.instrument,
|
||||
'queryParam.product': row.product,
|
||||
};
|
||||
this.$bus.$emit('bujiselectRow', row); // 现金流（注意和现金流预览区分）
|
||||
this.$apis.getdealQueryQueryList(data).then((res) => {
|
||||
const result = res.data.result[0];
|
||||
// this.formData = {
|
||||
// ...this.formData,
|
||||
// ...result,
|
||||
// maturityDate: result.maturityDate.toString(),
|
||||
// tradeDate: result.tradeDate.toString(),
|
||||
// tradeTime: result.tradeTime.toString(),
|
||||
// transactionDate: result.transactionDate.toString(),
|
||||
// transactionTime: result.transactionTime.toString(),
|
||||
// // transactionTime: '',
|
||||
// };
|
||||
|
||||
this.formData = {
|
||||
folder: '',
|
||||
folderName: '',
|
||||
cptyName: '',
|
||||
spotDealId: '',
|
||||
userId: '',
|
||||
contractId: '',
|
||||
dealId: '',
|
||||
globalId: '',
|
||||
instrument: result.instrument,
|
||||
product: result.product,
|
||||
bank: result.bank,
|
||||
underlyingType: result.underlyingType,
|
||||
inputMode: result.inputMode,
|
||||
takerId: result.takerId,
|
||||
ext19: result.ext19,
|
||||
internalTradeFlag: result.internalTradeFlag,
|
||||
cpty: result.cpty,
|
||||
dbCheck: result.dbCheck,
|
||||
conflictFlag: result.conflictFlag,
|
||||
capturedAmount: result.capturedAmount,
|
||||
amount1bak: result.amount1bak,
|
||||
quotationUnit: result.quotationUnit,
|
||||
amount2bak: result.amount2bak,
|
||||
splitInfo: `{"splitRate2":${result.splitSpotRateSecond},"splitSpotRate":${result.splitSpotRateFirst},"firstDealPair":${result.underlying}}`,
|
||||
underlying: result.underlying,
|
||||
spotRate: result.spotRate,
|
||||
amount1: result.amount1,
|
||||
amount2: result.amount2,
|
||||
buySell: result.buySell,
|
||||
tradeDate: result.tradeDate?.toString(),
|
||||
tradeTime: result.tradeTime?.toString(),
|
||||
valueDate: result.valueDate?.toString(),
|
||||
dealFlag: result.dealFlag,
|
||||
sourceName: result.sourceName,
|
||||
templateCode: result.templateCode,
|
||||
transactionDate: result.transactionDate?.toString(),
|
||||
transactionTime: result.transactionTime?.toString(),
|
||||
tacount: result.tacount,
|
||||
tpurpose: result.tpurpose,
|
||||
ext20: result.ext20,
|
||||
comments: result.comments,
|
||||
ssiCodeOurBuyCcy1: result.ssiCodeOurBuyCcy1 || '',
|
||||
ssiCodeCptyBuyCcy1: result.ssiCodeCptyBuyCcy1 || '',
|
||||
ssiCodeOurSellCcy1: result.ssiCodeOurSellCcy1 || '',
|
||||
ssiCodeCptySellCcy1: result.ssiCodeCptySellCcy1 || '',
|
||||
ssiCodeOurBuyCcy2: result.ssiCodeOurBuyCcy2 || '',
|
||||
ssiCodeCptyBuyCcy2: result.ssiCodeCptyBuyCcy2 || '',
|
||||
ssiCodeOurSellCcy2: result.ssiCodeOurSellCcy2 || '',
|
||||
ssiCodeCptySellCcy2: result.ssiCodeCptySellCcy2 || '',
|
||||
ext1: result.ext1,
|
||||
ext2: result.ext2,
|
||||
ext3: result.ext3,
|
||||
ext4: result.ext4,
|
||||
settlementMode: result.settlementMode,
|
||||
isPass: result.isPass,
|
||||
isBondDuration: result.isBondDuration,
|
||||
extContent:
|
||||
'@undefined|\u8d27\u5e011\u8d26\u6237\u884c@|\u8d27\u5e012\u8d26\u6237\u884c@|\u6e05\u7b97\u65b9\u5f0f@|\u4e1a\u52a1\u5458@undefined',
|
||||
maturityDate: result.maturityDate?.toString(),
|
||||
};
|
||||
|
||||
this.setccy1ccy2_ForexSpot(result.underlying);
|
||||
this.getdcsPairInfo_ForexSpot(result.underlying);
|
||||
// this.getDCSqueryFolderById(result.folder);
|
||||
this.getDCSqueryCptyName(result.cpty);
|
||||
});
|
||||
|
||||
this.quickSearchVisible = false;
|
||||
},
|
||||
// 附件管理 事件
|
||||
handleAttachmentdblclick_ForexSpot(row) {
|
||||
this.attachmentVisible = false;
|
||||
},
|
||||
handleclearForm_ForexSpot() {
|
||||
this.zdArr[0].formArr[1].attrs.label = `金额()`;
|
||||
this.zdArr[0].formArr[3].attrs.label = `金额()`;
|
||||
this.zdArr[3].formArr[0].attrs.label = `我方收结算路径()`;
|
||||
this.zdArr[3].formArr[1].attrs.label = `对手方收结算路径()`;
|
||||
this.zdArr[3].formArr[2].attrs.label = `我方付结算路径()`;
|
||||
this.zdArr[3].formArr[3].attrs.label = `对手方付结算路径()`;
|
||||
this.handleCancelForm_ForexSpot();
|
||||
this.formData = {
|
||||
underlying: null,
|
||||
tradeDate: '',
|
||||
tradeTime: '',
|
||||
transactionDate: '',
|
||||
transactionTime: '',
|
||||
folderName: '',
|
||||
cptyName: '',
|
||||
spotRate: '',
|
||||
quotationUnit: '',
|
||||
noDecimal1: '',
|
||||
noDecimal2: '',
|
||||
maturityDate: '',
|
||||
amount1: '',
|
||||
amount2: '',
|
||||
dealFlag: 'INTERBANK',
|
||||
sourceName: 'RCS',
|
||||
};
|
||||
this.getSystemDate_ForexSpot();
|
||||
this.$bus.$off('bujiselectRow');
|
||||
},
|
||||
handleCancelForm_ForexSpot() {
|
||||
this.$refs.publicForm.resetForm();
|
||||
},
|
||||
handleModal_ForexSpot(num) {
|
||||
this.handleType = num;
|
||||
const data = {
|
||||
...this.formData,
|
||||
dbCheck: '',
|
||||
quotationUnit: '1',
|
||||
capturedAmount: '1',
|
||||
conflictFlag: 'true',
|
||||
internalTradeFlag: 'false',
|
||||
cptyType: '',
|
||||
ofEventType: '',
|
||||
versionType: 'baseVersion',
|
||||
typeOfEvent: 'BOOKING',
|
||||
siteCode: 'BANKZB',
|
||||
inputMode: 'G',
|
||||
};
|
||||
const formData = objAddPrefix(data, 'deal');
|
||||
this.$bus.$emit('bujiformData', formData);
|
||||
},
|
||||
// get汇率
|
||||
getdcsPairInfo_ForexSpot(val) {
|
||||
this.$apis.getdcsPairInfo({ pairCode: val }).then((res) => {
|
||||
const result = res.data.result;
|
||||
this.formData.quotationUnit = result.quotationUnit;
|
||||
this.formData.noDecimal1 = result.noDecimal1;
|
||||
this.formData.noDecimal2 = result.noDecimal2;
|
||||
});
|
||||
},
|
||||
// 设置ccy
|
||||
setccy1ccy2_ForexSpot(val) {
|
||||
this.ccy1 = val.substring(0, 3);
|
||||
this.ccy2 = val.substring(3, 6);
|
||||
this.zdArr[0].formArr[1].attrs.label = `金额(${this.ccy1})`;
|
||||
this.zdArr[0].formArr[3].attrs.label = `金额(${this.ccy2})`;
|
||||
this.zdArr[3].formArr[0].attrs.label = `我方收结算路径(${this.ccy1})`;
|
||||
this.zdArr[3].formArr[1].attrs.label = `对手方收结算路径(${this.ccy1})`;
|
||||
this.zdArr[3].formArr[2].attrs.label = `我方付结算路径(${this.ccy2})`;
|
||||
this.zdArr[3].formArr[3].attrs.label = `对手方付结算路径(${this.ccy2})`;
|
||||
},
|
||||
// 提交 新增
|
||||
handleSubmit_ForexSpot() {
|
||||
const data1 = {
|
||||
instrument: this.formData.instrument,
|
||||
product: this.formData.product,
|
||||
sourceName: this.formData.sourceName,
|
||||
errorShow: false,
|
||||
};
|
||||
this.$apis.getdcsDealNo(data1).then((response) => {
|
||||
this.formData.globalId = response.data.result;
|
||||
this.formData.dbCheck = '';
|
||||
this.formData.quotationUnit = '1';
|
||||
this.formData.capturedAmount = '1'; // 1 和 2怎么区分
|
||||
this.formData.conflictFlag = 'true';
|
||||
this.formData.internalTradeFlag = 'false';
|
||||
this.formData.cptyType = '';
|
||||
this.formData.ofEventType = '';
|
||||
this.formData.versionType = 'baseVersion';
|
||||
this.formData.typeOfEvent = 'BOOKING';
|
||||
this.formData.siteCode = 'BANKZB';
|
||||
this.formData.inputMode = 'G';
|
||||
const data = objAddPrefix(this.formData, 'deal');
|
||||
this.$apis.handledcsdealActionFlow(data).then((res) => {
|
||||
this.$message.success('操作成功');
|
||||
this.handleclearForm_ForexSpot();
|
||||
});
|
||||
});
|
||||
},
|
||||
// 预submit
|
||||
handlePreSubmit() {
|
||||
if (this.$refs.publicForm.submitForm()) {
|
||||
console.log('this.formData', this.formData);
|
||||
this.handleSubmitIsHoliday_ForexSpot();
|
||||
}
|
||||
},
|
||||
sureHoliday(val) {
|
||||
this.$alert(`【${val}】是节假日，确认执行?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
showCancelButton: true,
|
||||
cancelButtonText: '取消',
|
||||
callback: (action) => {
|
||||
if (action === 'confirm') {
|
||||
this.handleSubmit_ForexSpot();
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
// submit前判断是否是节假日
|
||||
async handleSubmitIsHoliday_ForexSpot() {
|
||||
const isH = await this.IsHoliday(this.formData.tradeDate);
|
||||
if (isH) {
|
||||
this.sureHoliday('起息日');
|
||||
} else {
|
||||
const isH1 = await this.IsHoliday(this.formData.maturityDate);
|
||||
if (isH1) {
|
||||
this.sureHoliday('交易日期');
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,32 @@
|
||||
.CenterRightboxContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.CenterRightbox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
.ccenter {
|
||||
width: 560px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
.cheader {
|
||||
background-color: var(--desktop-bg-color-1);
|
||||
padding: 12px 16px 12px 16px;
|
||||
flex: 1;
|
||||
border-radius: 4px;
|
||||
overflow: scroll;
|
||||
.publicFormbox {
|
||||
margin-top: 37px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cright {
|
||||
width: calc(100% - 568px);
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
+1019
File diff suppressed because it is too large
Load Diff
+613
@@ -0,0 +1,613 @@
|
||||
<template>
|
||||
<div class="CenterRightboxContainer">
|
||||
<div class="CenterRightbox">
|
||||
<div class="ccenter">
|
||||
<div class="cheader">
|
||||
<!-- 顶部按钮 -->
|
||||
<BtnsTop
|
||||
title="外汇即期"
|
||||
@handleQuickSearch="handleQuickSearch"
|
||||
@handleattachmentVisible="handleattachmentVisible"
|
||||
@handleModal="handleModal_ForexSpot"
|
||||
/>
|
||||
<div class="publicFormbox">
|
||||
<publicForm
|
||||
ref="publicForm"
|
||||
:form-arr="zdArr"
|
||||
:form-data="formData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部按钮 -->
|
||||
<BtnsBottom
|
||||
@handleclearForm="handleclearForm_ForexSpot"
|
||||
@handlePreSubmit="handlePreSubmit"
|
||||
/>
|
||||
</div>
|
||||
<div class="cright">
|
||||
<CRight
|
||||
:value="handleType"
|
||||
@handleModal="handleModal_ForexSpot"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 要复制交易 弹窗 -->
|
||||
<QuickSearch
|
||||
:value="quickSearchVisible"
|
||||
@closeQuickSearch="handleCloseQuickSearch"
|
||||
@dblclick="handleQuickSearchdblclick_ForexSpot"
|
||||
/>
|
||||
|
||||
<!-- 附件管理 弹窗 -->
|
||||
<Attachment
|
||||
:value="attachmentVisible"
|
||||
@closeAttachment="handleCloseAttachment"
|
||||
@dblclick="handleAttachmentdblclick_ForexSpot"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import publicForm from '@/components/formLinkage';
|
||||
import CRight from '../lineRight/index.vue';
|
||||
import QuickSearch from '../component/quickSearch.vue';
|
||||
import Attachment from '../component/attachment';
|
||||
import BtnsTop from '../component/btnsTop.vue';
|
||||
import BtnsBottom from '../component/btnsBottom.vue';
|
||||
import fieldMixin from './fieldMixin';
|
||||
import './index.scss';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
publicForm,
|
||||
CRight,
|
||||
QuickSearch,
|
||||
Attachment,
|
||||
BtnsTop,
|
||||
BtnsBottom,
|
||||
},
|
||||
mixins: [fieldMixin],
|
||||
data() {
|
||||
return {
|
||||
zdArr: [
|
||||
{
|
||||
title: '交易信息',
|
||||
formArr: [
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'underlying',
|
||||
attrs: {
|
||||
label: '货币对',
|
||||
needStar: true,
|
||||
},
|
||||
options: [],
|
||||
rules: { required: true },
|
||||
events: {
|
||||
change: (e) => {
|
||||
this.setccy1ccy2_ForexSpot(e);
|
||||
|
||||
// 获取即期汇率
|
||||
const data = { pairCode: e };
|
||||
this.$apis.getdcsPairInfo(data).then((res) => {
|
||||
const result = res.data.result;
|
||||
this.formData.spotRate = result.spotRate;
|
||||
this.formData.quotationUnit = result.quotationUnit;
|
||||
this.formData.noDecimal1 = result.noDecimal1;
|
||||
this.formData.noDecimal2 = result.noDecimal2;
|
||||
|
||||
if (this.formData.amount1) {
|
||||
this.getamount2_ForexSpot();
|
||||
}
|
||||
});
|
||||
|
||||
// 获取起息日
|
||||
const data2 = {
|
||||
tradeDate: this.formData.tradeDate,
|
||||
code: this.formData.underlying,
|
||||
type: 'PAIR',
|
||||
};
|
||||
this.$apis.getdcsValueDate(data2).then((res) => {
|
||||
this.formData.maturityDate = res.data.result.toString();
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'inputFinance',
|
||||
prop: 'amount1',
|
||||
attrs: {
|
||||
label: `金额()`,
|
||||
needStar: true,
|
||||
precision: 2,
|
||||
},
|
||||
rules: { required: true },
|
||||
events: {
|
||||
focus: () => {
|
||||
if (
|
||||
this.formData.amount2 &&
|
||||
!this.formData.amount1 &&
|
||||
this.formData.spotRate
|
||||
) {
|
||||
this.getamount1_ForexSpot();
|
||||
}
|
||||
},
|
||||
blur: () => {
|
||||
if (this.formData.amount1 && this.formData.spotRate) {
|
||||
this.getamount2_ForexSpot();
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'spotRate',
|
||||
attrs: {
|
||||
label: '即期汇率',
|
||||
needStar: true,
|
||||
},
|
||||
options: [],
|
||||
rules: { required: true },
|
||||
events: {
|
||||
blur: () => {
|
||||
if (this.formData.amount1 && this.formData.spotRate) {
|
||||
this.getamount2_ForexSpot();
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'inputFinance',
|
||||
prop: 'amount2',
|
||||
attrs: {
|
||||
label: `金额()`,
|
||||
needStar: true,
|
||||
precision: 2,
|
||||
},
|
||||
rules: { required: true },
|
||||
events: {
|
||||
focus: () => {
|
||||
if (
|
||||
this.formData.amount1 &&
|
||||
!this.formData.amount2 &&
|
||||
this.formData.spotRate
|
||||
) {
|
||||
this.getamount2_ForexSpot();
|
||||
}
|
||||
},
|
||||
blur: () => {
|
||||
if (this.formData.amount2 && this.formData.spotRate) {
|
||||
this.getamount1_ForexSpot();
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pickerDateSingle',
|
||||
prop: 'tradeDate',
|
||||
span: 16,
|
||||
attrs: {
|
||||
label: '交易日期',
|
||||
needStar: true,
|
||||
},
|
||||
rules: { required: true },
|
||||
},
|
||||
{
|
||||
type: 'pickerTimeHHMM',
|
||||
prop: 'tradeTime',
|
||||
span: 8,
|
||||
attrs: {},
|
||||
rules: { required: true },
|
||||
},
|
||||
{
|
||||
type: 'pickerDateSingle',
|
||||
prop: 'maturityDate',
|
||||
attrs: {
|
||||
label: '起息日',
|
||||
needStar: true,
|
||||
},
|
||||
rules: { required: true },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '交易账户',
|
||||
formArr: [
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'folder',
|
||||
span: 16,
|
||||
attrs: {
|
||||
label: '账户',
|
||||
needStar: true,
|
||||
showValueName: 'name',
|
||||
},
|
||||
rules: { required: true },
|
||||
options: [],
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
q: '',
|
||||
'queryParam.menuId': '',
|
||||
'queryParam.productConfigGrp': '',
|
||||
};
|
||||
this.$apis.queryFolderQueryAuthList(data).then((res) => {
|
||||
this.zdArr[1].formArr[0].options = res.data.result.map(
|
||||
(item) => {
|
||||
return {
|
||||
label: item.code,
|
||||
value: item.code,
|
||||
name: item.localName,
|
||||
};
|
||||
},
|
||||
);
|
||||
});
|
||||
},
|
||||
change: (e) => {
|
||||
const arr = this.zdArr[1].formArr[0].options.filter(
|
||||
(item) => {
|
||||
return item.value === e;
|
||||
},
|
||||
);
|
||||
this.formData.folderName = arr[0].name;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'folderName',
|
||||
span: 8,
|
||||
attrs: {
|
||||
disabled: true,
|
||||
placeHolder: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'cpty',
|
||||
span: 16,
|
||||
attrs: {
|
||||
label: '交易对手',
|
||||
needStar: true,
|
||||
},
|
||||
rules: { required: true },
|
||||
options: [],
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
isInternalTrade: 'N',
|
||||
'queryParam.pageCtrl': 'true',
|
||||
'queryParam.pageLimit': '100',
|
||||
limitResultSet: 'true',
|
||||
menuId: '',
|
||||
productConfigGrp: '',
|
||||
excludeBranch: 'N',
|
||||
'queryParam.pageStart': '1',
|
||||
scrollFlag: '0',
|
||||
startDate: '',
|
||||
q: '',
|
||||
};
|
||||
this.$apis.queryCptyPage(data).then((res) => {
|
||||
this.zdArr[1].formArr[2].options =
|
||||
res.data.result.datals.map((item) => {
|
||||
return {
|
||||
label: item.code,
|
||||
value: item.code,
|
||||
name: item.localName,
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
change: (e) => {
|
||||
const arr = this.zdArr[1].formArr[2].options.filter(
|
||||
(item) => {
|
||||
return item.value === e;
|
||||
},
|
||||
);
|
||||
this.formData.cptyName = arr[0].name;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'cptyName',
|
||||
span: 8,
|
||||
attrs: {
|
||||
disabled: true,
|
||||
placeHolder: '',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
formArr: [
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'dealFlag',
|
||||
attrs: {
|
||||
label: '交易性质',
|
||||
needStar: true,
|
||||
},
|
||||
rules: { required: true },
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'blockNo',
|
||||
span: 16,
|
||||
attrs: {
|
||||
label: '外部流水号',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'sourceName',
|
||||
span: 8,
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'pickerDateSingle',
|
||||
prop: 'transactionDate',
|
||||
span: 16,
|
||||
attrs: {
|
||||
label: '交易成交日期',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pickerTimeHHMM',
|
||||
prop: 'transactionTime',
|
||||
span: 8,
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'tacount',
|
||||
attrs: {
|
||||
label: '项目',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'tpurpose',
|
||||
attrs: {
|
||||
label: '交易背景',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'ext20',
|
||||
attrs: {
|
||||
label: '交易目的',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'comments',
|
||||
attrs: {
|
||||
label: '备注',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '拓展字段',
|
||||
formArr: [
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'ssiCodeOurBuyCcy1',
|
||||
attrs: {
|
||||
label: `我方收结算路径()`,
|
||||
},
|
||||
options: [],
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
queryId: 'stb.baseQuery.queryAllSsiInfo',
|
||||
'queryParam.pageCtrl': false,
|
||||
'queryParam.isAllCurrenciesCode': 'N',
|
||||
'queryParam.dealsId': 'NULL',
|
||||
'queryParam.sitesCode': 'BANKZB',
|
||||
'queryParam.tradeDate': this.formData.tradeDate,
|
||||
'queryParam.cptyCode': '',
|
||||
'queryParam.instrumentGrpCode': 'FXSPOT',
|
||||
'queryParam.nostroVostro': 'NOSTRO',
|
||||
'queryParam.payDirection': 'REV',
|
||||
'queryParam.currenciesCode': '',
|
||||
'queryParam.deliveryMode': '0',
|
||||
'queryParam.clrMode': '',
|
||||
};
|
||||
this.$apis.querySettle(data).then((res) => {
|
||||
this.zdArr[3].formArr[0].options =
|
||||
res.data.result.datals.map((item) => {
|
||||
return {
|
||||
label: item.ssiName,
|
||||
value: item.ssiCode,
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'ssiCodeCptyBuyCcy1',
|
||||
attrs: {
|
||||
label: `对手方收结算路径()`,
|
||||
},
|
||||
options: [],
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
queryId: 'stb.baseQuery.queryAllSsiInfo',
|
||||
'queryParam.pageCtrl': false,
|
||||
'queryParam.isAllCurrenciesCode': 'N',
|
||||
'queryParam.dealsId': 'NULL',
|
||||
'queryParam.sitesCode': 'BANKZB',
|
||||
'queryParam.tradeDate': this.formData.tradeDate,
|
||||
'queryParam.cptyCode': '',
|
||||
'queryParam.instrumentGrpCode': 'FXSPOT',
|
||||
'queryParam.nostroVostro': 'VOSTRO',
|
||||
'queryParam.payDirection': 'REV',
|
||||
'queryParam.currenciesCode': '',
|
||||
'queryParam.deliveryMode': '0',
|
||||
'queryParam.clrMode': '',
|
||||
};
|
||||
this.$apis.querySettle(data).then((res) => {
|
||||
this.zdArr[3].formArr[1].options =
|
||||
res.data.result.datals.map((item) => {
|
||||
return {
|
||||
label: item.ssiName,
|
||||
value: item.ssiCode,
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'ssiCodeOurSellCcy2',
|
||||
attrs: {
|
||||
label: `我方付结算路径(${this.ccy2 ? this.ccy2 : ''})`,
|
||||
},
|
||||
options: [],
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
queryId: 'stb.baseQuery.queryAllSsiInfo',
|
||||
'queryParam.pageCtrl': false,
|
||||
'queryParam.isAllCurrenciesCode': 'N',
|
||||
'queryParam.dealsId': 'NULL',
|
||||
'queryParam.sitesCode': 'BANKZB',
|
||||
'queryParam.tradeDate': this.formData.tradeDate,
|
||||
'queryParam.cptyCode': '',
|
||||
'queryParam.instrumentGrpCode': 'FXSPOT',
|
||||
'queryParam.nostroVostro': 'NOSTRO',
|
||||
'queryParam.payDirection': 'PAY',
|
||||
'queryParam.currenciesCode': '',
|
||||
'queryParam.deliveryMode': '0',
|
||||
'queryParam.clrMode': '',
|
||||
};
|
||||
this.$apis.querySettle(data).then((res) => {
|
||||
this.zdArr[3].formArr[2].options =
|
||||
res.data.result.datals.map((item) => {
|
||||
return {
|
||||
label: item.ssiName,
|
||||
value: item.ssiCode,
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'ssiCodeCptySellCcy2',
|
||||
attrs: {
|
||||
label: `对手方付结算路径()`,
|
||||
},
|
||||
options: [],
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
queryId: 'stb.baseQuery.queryAllSsiInfo',
|
||||
'queryParam.pageCtrl': false,
|
||||
'queryParam.isAllCurrenciesCode': 'N',
|
||||
'queryParam.dealsId': 'NULL',
|
||||
'queryParam.sitesCode': 'BANKZB',
|
||||
'queryParam.tradeDate': this.formData.tradeDate,
|
||||
'queryParam.cptyCode': '',
|
||||
'queryParam.instrumentGrpCode': 'FXSPOT',
|
||||
'queryParam.nostroVostro': 'VOSTRO',
|
||||
'queryParam.payDirection': 'PAY',
|
||||
'queryParam.currenciesCode': '',
|
||||
'queryParam.deliveryMode': '0',
|
||||
'queryParam.clrMode': '',
|
||||
};
|
||||
this.$apis.querySettle(data).then((res) => {
|
||||
this.zdArr[3].formArr[3].options =
|
||||
res.data.result.datals.map((item) => {
|
||||
return {
|
||||
label: item.ssiName,
|
||||
value: item.ssiCode,
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'ext1',
|
||||
attrs: {
|
||||
label: '货币1账户行',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'ext2',
|
||||
attrs: {
|
||||
label: '货币2账户行',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'settlementMode',
|
||||
attrs: {
|
||||
label: '清算方式',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'ext4',
|
||||
attrs: {
|
||||
label: '业务员',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
// 默认值
|
||||
formData: {
|
||||
tradeDate: '',
|
||||
tradeTime: '',
|
||||
transactionDate: '',
|
||||
transactionTime: '',
|
||||
maturityDate: '',
|
||||
folderName: '',
|
||||
cptyName: '',
|
||||
spotRate: '',
|
||||
quotationUnit: 0, // 10的n次方
|
||||
noDecimal1: '', // 两个精度参数
|
||||
noDecimal2: '',
|
||||
amount1: '',
|
||||
amount2: '',
|
||||
dealFlag: 'INTERBANK',
|
||||
sourceName: 'RCS',
|
||||
},
|
||||
ccy1: '',
|
||||
ccy2: '',
|
||||
quickSearchVisible: false,
|
||||
attachmentVisible: false,
|
||||
handleType: '',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getOptions_ForexSpot();
|
||||
this.getSystemDate_ForexSpot();
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
+895
@@ -0,0 +1,895 @@
|
||||
<template>
|
||||
<div class="CenterRightboxContainer">
|
||||
<div class="CenterRightbox">
|
||||
<div class="ccenter">
|
||||
<div class="cheader">
|
||||
<!-- 顶部按钮 -->
|
||||
<BtnsTop
|
||||
title="外汇掉期"
|
||||
@handleQuickSearch="handleQuickSearch"
|
||||
@handleattachmentVisible="handleattachmentVisible"
|
||||
@handleModal="handleModal"
|
||||
/>
|
||||
<div class="publicFormbox">
|
||||
<publicForm
|
||||
ref="publicForm"
|
||||
:form-arr="zdArr"
|
||||
:form-data="formData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部按钮 -->
|
||||
<BtnsBottom
|
||||
@handleclearForm="handleclearForm"
|
||||
@handlePreSubmit="handlePreSubmit"
|
||||
/>
|
||||
</div>
|
||||
<div class="cright">
|
||||
<CRight
|
||||
:value="handleType"
|
||||
@handleModal="handleModal"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 要复制交易 弹窗 -->
|
||||
<QuickSearch
|
||||
:value="quickSearchVisible"
|
||||
@closeQuickSearch="handleCloseQuickSearch"
|
||||
@dblclick="handleQuickSearchdblclick"
|
||||
/>
|
||||
|
||||
<!-- 附件管理 弹窗 -->
|
||||
<Attachment
|
||||
:value="attachmentVisible"
|
||||
@closeAttachment="handleCloseAttachment"
|
||||
@dblclick="handleAttachmentdblclick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import publicForm from '@/components/formLinkage';
|
||||
import CRight from '../lineRight/index.vue';
|
||||
import QuickSearch from '../component/quickSearch.vue';
|
||||
import Attachment from '../component/attachment';
|
||||
import BtnsTop from '../component/btnsTop.vue';
|
||||
import BtnsBottom from '../component/btnsBottom.vue';
|
||||
import { objAddPrefix } from '@/utils';
|
||||
import fieldMixin from './fieldMixin';
|
||||
import './index.scss';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
publicForm,
|
||||
CRight,
|
||||
QuickSearch,
|
||||
Attachment,
|
||||
BtnsTop,
|
||||
BtnsBottom,
|
||||
},
|
||||
mixins: [fieldMixin],
|
||||
data() {
|
||||
return {
|
||||
zdArr: [
|
||||
{
|
||||
title: '交易信息',
|
||||
formArr: [
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'underlying',
|
||||
attrs: {
|
||||
label: '货币对',
|
||||
needStar: true,
|
||||
},
|
||||
options: [],
|
||||
rules: { required: true },
|
||||
events: {
|
||||
change: (e) => {
|
||||
this.setccy1ccy2(e);
|
||||
|
||||
// 获取即期汇率
|
||||
const data = { pairCode: e };
|
||||
this.$apis.getdcsPairInfo(data).then((res) => {
|
||||
const result = res.data.result;
|
||||
this.formData.spotRate = result.spotRate;
|
||||
this.formData.quotationUnit = result.quotationUnit;
|
||||
this.formData.noDecimal1 = result.noDecimal1;
|
||||
this.formData.noDecimal2 = result.noDecimal2;
|
||||
|
||||
if (this.formData.amount1) {
|
||||
this.getamount2();
|
||||
}
|
||||
});
|
||||
|
||||
// 获取起息日
|
||||
const data2 = {
|
||||
tradeDate: this.formData.tradeDate,
|
||||
code: this.formData.underlying,
|
||||
type: 'PAIR',
|
||||
};
|
||||
this.$apis.getdcsValueDate(data2).then((res) => {
|
||||
this.formData.maturityDate = res.data.result.toString();
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'inputFinance',
|
||||
prop: 'amount1',
|
||||
attrs: {
|
||||
label: `金额()`,
|
||||
needStar: true,
|
||||
},
|
||||
rules: { required: true },
|
||||
events: {
|
||||
focus: () => {
|
||||
if (
|
||||
this.formData.amount2 &&
|
||||
!this.formData.amount1 &&
|
||||
this.formData.spotRate
|
||||
) {
|
||||
this.getamount1();
|
||||
}
|
||||
},
|
||||
blur: () => {
|
||||
if (this.formData.amount1 && this.formData.spotRate) {
|
||||
this.getamount2();
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'spotRate',
|
||||
attrs: {
|
||||
label: '即期汇率',
|
||||
needStar: true,
|
||||
},
|
||||
options: [],
|
||||
rules: { required: true },
|
||||
events: {
|
||||
blur: () => {
|
||||
if (this.formData.amount1 && this.formData.spotRate) {
|
||||
this.getamount2();
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'inputFinance',
|
||||
prop: 'amount2',
|
||||
attrs: {
|
||||
label: `金额()`,
|
||||
needStar: true,
|
||||
},
|
||||
rules: { required: true },
|
||||
events: {
|
||||
focus: () => {
|
||||
if (
|
||||
this.formData.amount1 &&
|
||||
!this.formData.amount2 &&
|
||||
this.formData.spotRate
|
||||
) {
|
||||
this.getamount2();
|
||||
}
|
||||
},
|
||||
blur: () => {
|
||||
if (this.formData.amount2 && this.formData.spotRate) {
|
||||
this.getamount1();
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pickerDateSingle',
|
||||
prop: 'tradeDate',
|
||||
span: 16,
|
||||
attrs: {
|
||||
label: '交易日期',
|
||||
needStar: true,
|
||||
},
|
||||
rules: { required: true },
|
||||
},
|
||||
{
|
||||
type: 'pickerTimeHHMM',
|
||||
prop: 'tradeTime',
|
||||
span: 8,
|
||||
attrs: {},
|
||||
rules: { required: true },
|
||||
},
|
||||
{
|
||||
type: 'pickerDateSingle',
|
||||
prop: 'maturityDate',
|
||||
attrs: {
|
||||
label: '起息日',
|
||||
needStar: true,
|
||||
},
|
||||
rules: { required: true },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '交易账户',
|
||||
formArr: [
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'folder',
|
||||
span: 16,
|
||||
attrs: {
|
||||
label: '账户',
|
||||
needStar: true,
|
||||
showValueName: 'name',
|
||||
},
|
||||
rules: { required: true },
|
||||
options: [],
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
q: '',
|
||||
'queryParam.menuId': '',
|
||||
'queryParam.productConfigGrp': '',
|
||||
};
|
||||
this.$apis.queryFolderQueryAuthList(data).then((res) => {
|
||||
this.zdArr[1].formArr[0].options = res.data.result.map(
|
||||
(item) => {
|
||||
return {
|
||||
label: item.code,
|
||||
value: item.code,
|
||||
name: item.localName,
|
||||
};
|
||||
},
|
||||
);
|
||||
});
|
||||
},
|
||||
change: (e) => {
|
||||
const arr = this.zdArr[1].formArr[0].options.filter(
|
||||
(item) => {
|
||||
return item.value === e;
|
||||
},
|
||||
);
|
||||
this.formData.folderName = arr[0].name;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'folderName',
|
||||
span: 8,
|
||||
attrs: {
|
||||
disabled: true,
|
||||
placeHolder: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'cpty',
|
||||
span: 16,
|
||||
attrs: {
|
||||
label: '交易对手',
|
||||
needStar: true,
|
||||
},
|
||||
rules: { required: true },
|
||||
options: [],
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
isInternalTrade: 'N',
|
||||
'queryParam.pageCtrl': 'true',
|
||||
'queryParam.pageLimit': '100',
|
||||
limitResultSet: 'true',
|
||||
menuId: '',
|
||||
productConfigGrp: '',
|
||||
excludeBranch: 'N',
|
||||
'queryParam.pageStart': '1',
|
||||
scrollFlag: '0',
|
||||
startDate: '',
|
||||
q: '',
|
||||
};
|
||||
this.$apis.queryCptyPage(data).then((res) => {
|
||||
this.zdArr[1].formArr[2].options =
|
||||
res.data.result.datals.map((item) => {
|
||||
return {
|
||||
label: item.code,
|
||||
value: item.code,
|
||||
name: item.localName,
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
change: (e) => {
|
||||
const arr = this.zdArr[1].formArr[2].options.filter(
|
||||
(item) => {
|
||||
return item.value === e;
|
||||
},
|
||||
);
|
||||
this.formData.cptyName = arr[0].name;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'cptyName',
|
||||
span: 8,
|
||||
attrs: {
|
||||
disabled: true,
|
||||
placeHolder: '',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
formArr: [
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'dealFlag',
|
||||
attrs: {
|
||||
label: '交易性质',
|
||||
needStar: true,
|
||||
},
|
||||
rules: { required: true },
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'blockNo',
|
||||
span: 16,
|
||||
attrs: {
|
||||
label: '外部流水号',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'sourceName',
|
||||
span: 8,
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'pickerDateSingle',
|
||||
prop: 'transactionDate',
|
||||
span: 16,
|
||||
attrs: {
|
||||
label: '交易成交日期',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pickerTimeHHMM',
|
||||
prop: 'transactionTime',
|
||||
span: 8,
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'tacount',
|
||||
attrs: {
|
||||
label: '项目',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'tpurpose',
|
||||
attrs: {
|
||||
label: '交易背景',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'ext20',
|
||||
attrs: {
|
||||
label: '交易目的',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'comments',
|
||||
attrs: {
|
||||
label: '备注',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '拓展字段',
|
||||
formArr: [
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'ssiCodeOurBuyCcy1',
|
||||
attrs: {
|
||||
label: `我方收结算路径()`,
|
||||
},
|
||||
options: [],
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
queryId: 'stb.baseQuery.queryAllSsiInfo',
|
||||
'queryParam.pageCtrl': false,
|
||||
'queryParam.isAllCurrenciesCode': 'N',
|
||||
'queryParam.dealsId': 'NULL',
|
||||
'queryParam.sitesCode': 'BANKZB',
|
||||
'queryParam.tradeDate': this.formData.tradeDate,
|
||||
'queryParam.cptyCode': '',
|
||||
'queryParam.instrumentGrpCode': 'FXSPOT',
|
||||
'queryParam.nostroVostro': 'NOSTRO',
|
||||
'queryParam.payDirection': 'REV',
|
||||
'queryParam.currenciesCode': '',
|
||||
'queryParam.deliveryMode': '0',
|
||||
'queryParam.clrMode': '',
|
||||
};
|
||||
this.$apis.querySettle(data).then((res) => {
|
||||
this.zdArr[3].formArr[0].options =
|
||||
res.data.result.datals.map((item) => {
|
||||
return {
|
||||
label: item.ssiName,
|
||||
value: item.ssiCode,
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'ssiCodeCptyBuyCcy1',
|
||||
attrs: {
|
||||
label: `对手方收结算路径()`,
|
||||
},
|
||||
options: [],
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
queryId: 'stb.baseQuery.queryAllSsiInfo',
|
||||
'queryParam.pageCtrl': false,
|
||||
'queryParam.isAllCurrenciesCode': 'N',
|
||||
'queryParam.dealsId': 'NULL',
|
||||
'queryParam.sitesCode': 'BANKZB',
|
||||
'queryParam.tradeDate': this.formData.tradeDate,
|
||||
'queryParam.cptyCode': '',
|
||||
'queryParam.instrumentGrpCode': 'FXSPOT',
|
||||
'queryParam.nostroVostro': 'VOSTRO',
|
||||
'queryParam.payDirection': 'REV',
|
||||
'queryParam.currenciesCode': '',
|
||||
'queryParam.deliveryMode': '0',
|
||||
'queryParam.clrMode': '',
|
||||
};
|
||||
this.$apis.querySettle(data).then((res) => {
|
||||
this.zdArr[3].formArr[1].options =
|
||||
res.data.result.datals.map((item) => {
|
||||
return {
|
||||
label: item.ssiName,
|
||||
value: item.ssiCode,
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'ssiCodeOurSellCcy2',
|
||||
attrs: {
|
||||
label: `我方付结算路径(${this.ccy2 ? this.ccy2 : ''})`,
|
||||
},
|
||||
options: [],
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
queryId: 'stb.baseQuery.queryAllSsiInfo',
|
||||
'queryParam.pageCtrl': false,
|
||||
'queryParam.isAllCurrenciesCode': 'N',
|
||||
'queryParam.dealsId': 'NULL',
|
||||
'queryParam.sitesCode': 'BANKZB',
|
||||
'queryParam.tradeDate': this.formData.tradeDate,
|
||||
'queryParam.cptyCode': '',
|
||||
'queryParam.instrumentGrpCode': 'FXSPOT',
|
||||
'queryParam.nostroVostro': 'NOSTRO',
|
||||
'queryParam.payDirection': 'PAY',
|
||||
'queryParam.currenciesCode': '',
|
||||
'queryParam.deliveryMode': '0',
|
||||
'queryParam.clrMode': '',
|
||||
};
|
||||
this.$apis.querySettle(data).then((res) => {
|
||||
this.zdArr[3].formArr[2].options =
|
||||
res.data.result.datals.map((item) => {
|
||||
return {
|
||||
label: item.ssiName,
|
||||
value: item.ssiCode,
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'ssiCodeCptySellCcy2',
|
||||
attrs: {
|
||||
label: `对手方付结算路径()`,
|
||||
},
|
||||
options: [],
|
||||
events: {
|
||||
focus: () => {
|
||||
const data = {
|
||||
queryId: 'stb.baseQuery.queryAllSsiInfo',
|
||||
'queryParam.pageCtrl': false,
|
||||
'queryParam.isAllCurrenciesCode': 'N',
|
||||
'queryParam.dealsId': 'NULL',
|
||||
'queryParam.sitesCode': 'BANKZB',
|
||||
'queryParam.tradeDate': this.formData.tradeDate,
|
||||
'queryParam.cptyCode': '',
|
||||
'queryParam.instrumentGrpCode': 'FXSPOT',
|
||||
'queryParam.nostroVostro': 'VOSTRO',
|
||||
'queryParam.payDirection': 'PAY',
|
||||
'queryParam.currenciesCode': '',
|
||||
'queryParam.deliveryMode': '0',
|
||||
'queryParam.clrMode': '',
|
||||
};
|
||||
this.$apis.querySettle(data).then((res) => {
|
||||
this.zdArr[3].formArr[3].options =
|
||||
res.data.result.datals.map((item) => {
|
||||
return {
|
||||
label: item.ssiName,
|
||||
value: item.ssiCode,
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'ext1',
|
||||
attrs: {
|
||||
label: '货币1账户行',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'ext2',
|
||||
attrs: {
|
||||
label: '货币2账户行',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'settlementMode',
|
||||
attrs: {
|
||||
label: '清算方式',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'ext4',
|
||||
attrs: {
|
||||
label: '业务员',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
// 默认值
|
||||
formData: {
|
||||
tradeDate: '',
|
||||
tradeTime: '',
|
||||
transactionDate: '',
|
||||
transactionTime: '',
|
||||
maturityDate: '',
|
||||
folderName: '',
|
||||
cptyName: '',
|
||||
spotRate: '',
|
||||
quotationUnit: '', // 10的n次方
|
||||
noDecimal1: '', // 两个精度参数
|
||||
noDecimal2: '',
|
||||
amount1: '',
|
||||
amount2: '',
|
||||
dealFlag: 'INTERBANK',
|
||||
sourceName: 'RCS',
|
||||
},
|
||||
ccy1: '',
|
||||
ccy2: '',
|
||||
quickSearchVisible: false,
|
||||
attachmentVisible: false,
|
||||
handleType: '',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getOptions_ForexSpot();
|
||||
this.getSystemDate();
|
||||
},
|
||||
methods: {
|
||||
handleModal(num) {
|
||||
this.handleType = num;
|
||||
const data = {
|
||||
...this.formData,
|
||||
dbCheck: '',
|
||||
quotationUnit: '1',
|
||||
capturedAmount: '1',
|
||||
conflictFlag: 'true',
|
||||
internalTradeFlag: 'false',
|
||||
cptyType: '',
|
||||
ofEventType: '',
|
||||
versionType: 'baseVersion',
|
||||
typeOfEvent: 'BOOKING',
|
||||
siteCode: 'BANKZB',
|
||||
inputMode: 'G',
|
||||
};
|
||||
const formData = objAddPrefix(data, 'deal');
|
||||
this.$bus.$emit('bujiformData', formData);
|
||||
},
|
||||
// get汇率
|
||||
getdcsPairInfo(val) {
|
||||
this.$apis.getdcsPairInfo({ pairCode: val }).then((res) => {
|
||||
const result = res.data.result;
|
||||
this.formData.quotationUnit = result.quotationUnit;
|
||||
this.formData.noDecimal1 = result.noDecimal1;
|
||||
this.formData.noDecimal2 = result.noDecimal2;
|
||||
});
|
||||
},
|
||||
// get金额1
|
||||
getamount1() {
|
||||
const data = {
|
||||
expression: `${this.formData.amount2} / ${
|
||||
this.formData.spotRate || 1
|
||||
} * -1 / ${Math.pow(10, this.formData.quotationUnit || 0)}`,
|
||||
precision: this.formData.noDecimal1 || 2,
|
||||
};
|
||||
this.$apis.getDCSdoEvaluation(data).then((res) => {
|
||||
this.formData.amount1 = res.data.result;
|
||||
});
|
||||
},
|
||||
// get金额2
|
||||
getamount2() {
|
||||
const data = {
|
||||
expression: `${this.formData.amount1} * ${
|
||||
this.formData.spotRate || 1
|
||||
} * -1 / ${Math.pow(10, this.formData.quotationUnit || 0)}`,
|
||||
precision: this.formData.noDecimal2 || 2,
|
||||
};
|
||||
this.$apis.getDCSdoEvaluation(data).then((res) => {
|
||||
this.formData.amount2 = res.data.result;
|
||||
});
|
||||
},
|
||||
// get日期
|
||||
getSystemDate() {
|
||||
this.$apis.getDCSgetSystemDate({}).then((res) => {
|
||||
const result = res.data.result;
|
||||
this.formData.tradeDate = this.formData.transactionDate =
|
||||
result.date.toString();
|
||||
this.formData.tradeTime = this.formData.transactionTime = result.time
|
||||
.toString()
|
||||
.slice(0, 4);
|
||||
});
|
||||
},
|
||||
// 设置ccy
|
||||
setccy1ccy2(val) {
|
||||
this.ccy1 = val.substring(0, 3);
|
||||
this.ccy2 = val.substring(3, 6);
|
||||
this.zdArr[0].formArr[1].attrs.label = `金额(${this.ccy1})`;
|
||||
this.zdArr[0].formArr[3].attrs.label = `金额(${this.ccy2})`;
|
||||
this.zdArr[3].formArr[0].attrs.label = `我方收结算路径(${this.ccy1})`;
|
||||
this.zdArr[3].formArr[1].attrs.label = `对手方收结算路径(${this.ccy1})`;
|
||||
this.zdArr[3].formArr[2].attrs.label = `我方付结算路径(${this.ccy2})`;
|
||||
this.zdArr[3].formArr[3].attrs.label = `对手方付结算路径(${this.ccy2})`;
|
||||
},
|
||||
// 预submit
|
||||
handlePreSubmit() {
|
||||
if (this.$refs.publicForm.submitForm()) {
|
||||
console.log('this.formData', this.formData);
|
||||
this.handleSubmitIsHoliday();
|
||||
}
|
||||
},
|
||||
// submit前判断是否是节假日
|
||||
handleSubmitIsHoliday() {
|
||||
const data = {
|
||||
code: this.formData.underlying,
|
||||
valueDate: this.formData.tradeDate,
|
||||
type: 'PAIR',
|
||||
};
|
||||
this.$apis.getdcsisHolidayByUnderlying(data).then((res) => {
|
||||
const result = res.data?.result;
|
||||
if (result) {
|
||||
this.$alert('【交易日期】是节假日，确认执行?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
showCancelButton: true,
|
||||
cancelButtonText: '取消',
|
||||
callback: (action) => {
|
||||
if (action === 'confirm') {
|
||||
this.handleSubmit();
|
||||
}
|
||||
},
|
||||
});
|
||||
} else {
|
||||
const data = {
|
||||
code: this.formData.underlying,
|
||||
valueDate: this.formData.maturityDate,
|
||||
type: 'PAIR',
|
||||
};
|
||||
this.$apis.getdcsisHolidayByUnderlying(data).then((res) => {
|
||||
const result = res.data?.result;
|
||||
if (result) {
|
||||
this.$alert('【起息日】是节假日，确认执行?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
showCancelButton: true,
|
||||
cancelButtonText: '取消',
|
||||
callback: (action) => {
|
||||
if (action === 'confirm') {
|
||||
this.handleSubmit();
|
||||
}
|
||||
},
|
||||
});
|
||||
} else {
|
||||
this.handleSubmit();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 提交 新增
|
||||
handleSubmit() {
|
||||
const data1 = {
|
||||
instrument: this.formData.instrument,
|
||||
product: this.formData.product,
|
||||
sourceName: this.formData.sourceName,
|
||||
errorShow: false,
|
||||
};
|
||||
this.$apis.getdcsDealNo(data1).then((response) => {
|
||||
this.formData.globalId = response.data.result;
|
||||
this.formData.dbCheck = '';
|
||||
this.formData.quotationUnit = '1';
|
||||
this.formData.capturedAmount = '1'; // 1 和 2怎么区分
|
||||
this.formData.conflictFlag = 'true';
|
||||
this.formData.internalTradeFlag = 'false';
|
||||
this.formData.cptyType = '';
|
||||
this.formData.ofEventType = '';
|
||||
this.formData.versionType = 'baseVersion';
|
||||
this.formData.typeOfEvent = 'BOOKING';
|
||||
this.formData.siteCode = 'BANKZB';
|
||||
this.formData.inputMode = 'G';
|
||||
const data = objAddPrefix(this.formData, 'deal');
|
||||
this.$apis.handledcsdealActionFlow(data).then((res) => {
|
||||
this.$message.success('操作成功');
|
||||
this.handleclearForm();
|
||||
});
|
||||
});
|
||||
},
|
||||
// 删除
|
||||
handleDelete() {},
|
||||
handleCancelForm() {
|
||||
this.$refs.publicForm.resetForm();
|
||||
},
|
||||
handleclearForm() {
|
||||
this.zdArr[0].formArr[1].attrs.label = `金额()`;
|
||||
this.zdArr[0].formArr[3].attrs.label = `金额()`;
|
||||
this.zdArr[3].formArr[0].attrs.label = `我方收结算路径()`;
|
||||
this.zdArr[3].formArr[1].attrs.label = `对手方收结算路径()`;
|
||||
this.zdArr[3].formArr[2].attrs.label = `我方付结算路径()`;
|
||||
this.zdArr[3].formArr[3].attrs.label = `对手方付结算路径()`;
|
||||
this.handleCancelForm();
|
||||
this.formData = {
|
||||
underlying: null,
|
||||
tradeDate: '',
|
||||
tradeTime: '',
|
||||
transactionDate: '',
|
||||
transactionTime: '',
|
||||
folderName: '',
|
||||
cptyName: '',
|
||||
spotRate: '',
|
||||
quotationUnit: '',
|
||||
noDecimal1: '',
|
||||
noDecimal2: '',
|
||||
maturityDate: '',
|
||||
amount1: '',
|
||||
amount2: '',
|
||||
dealFlag: 'INTERBANK',
|
||||
sourceName: 'RCS',
|
||||
};
|
||||
this.getSystemDate();
|
||||
this.$bus.$off('bujiselectRow');
|
||||
},
|
||||
// 要复制交易 table row 双击事件
|
||||
handleQuickSearchdblclick(row) {
|
||||
const data = {
|
||||
'queryParam.dealId': row.dealId,
|
||||
'queryParam.instrument': row.instrument,
|
||||
'queryParam.product': row.product,
|
||||
};
|
||||
this.$bus.$emit('bujiselectRow', row); // 现金流（注意和现金流预览区分）
|
||||
this.$apis.getdealQueryQueryList(data).then((res) => {
|
||||
const result = res.data.result[0];
|
||||
// this.formData = {
|
||||
// ...this.formData,
|
||||
// ...result,
|
||||
// maturityDate: result.maturityDate.toString(),
|
||||
// tradeDate: result.tradeDate.toString(),
|
||||
// tradeTime: result.tradeTime.toString(),
|
||||
// transactionDate: result.transactionDate.toString(),
|
||||
// transactionTime: result.transactionTime.toString(),
|
||||
// // transactionTime: '',
|
||||
// };
|
||||
|
||||
this.formData = {
|
||||
folder: '',
|
||||
folderName: '',
|
||||
cptyName: '',
|
||||
spotDealId: '',
|
||||
userId: '',
|
||||
contractId: '',
|
||||
dealId: '',
|
||||
globalId: '',
|
||||
instrument: result.instrument,
|
||||
product: result.product,
|
||||
bank: result.bank,
|
||||
underlyingType: result.underlyingType,
|
||||
inputMode: result.inputMode,
|
||||
takerId: result.takerId,
|
||||
ext19: result.ext19,
|
||||
internalTradeFlag: result.internalTradeFlag,
|
||||
cpty: result.cpty,
|
||||
dbCheck: result.dbCheck,
|
||||
conflictFlag: result.conflictFlag,
|
||||
capturedAmount: result.capturedAmount,
|
||||
amount1bak: result.amount1bak,
|
||||
quotationUnit: result.quotationUnit,
|
||||
amount2bak: result.amount2bak,
|
||||
splitInfo: `{"splitRate2":${result.splitSpotRateSecond},"splitSpotRate":${result.splitSpotRateFirst},"firstDealPair":${result.underlying}}`,
|
||||
underlying: result.underlying,
|
||||
spotRate: result.spotRate,
|
||||
amount1: result.amount1,
|
||||
amount2: result.amount2,
|
||||
buySell: result.buySell,
|
||||
tradeDate: result.tradeDate?.toString(),
|
||||
tradeTime: result.tradeTime?.toString(),
|
||||
valueDate: result.valueDate?.toString(),
|
||||
dealFlag: result.dealFlag,
|
||||
sourceName: result.sourceName,
|
||||
templateCode: result.templateCode,
|
||||
transactionDate: result.transactionDate?.toString(),
|
||||
transactionTime: result.transactionTime?.toString(),
|
||||
tacount: result.tacount,
|
||||
tpurpose: result.tpurpose,
|
||||
ext20: result.ext20,
|
||||
comments: result.comments,
|
||||
ssiCodeOurBuyCcy1: result.ssiCodeOurBuyCcy1 || '',
|
||||
ssiCodeCptyBuyCcy1: result.ssiCodeCptyBuyCcy1 || '',
|
||||
ssiCodeOurSellCcy1: result.ssiCodeOurSellCcy1 || '',
|
||||
ssiCodeCptySellCcy1: result.ssiCodeCptySellCcy1 || '',
|
||||
ssiCodeOurBuyCcy2: result.ssiCodeOurBuyCcy2 || '',
|
||||
ssiCodeCptyBuyCcy2: result.ssiCodeCptyBuyCcy2 || '',
|
||||
ssiCodeOurSellCcy2: result.ssiCodeOurSellCcy2 || '',
|
||||
ssiCodeCptySellCcy2: result.ssiCodeCptySellCcy2 || '',
|
||||
ext1: result.ext1,
|
||||
ext2: result.ext2,
|
||||
ext3: result.ext3,
|
||||
ext4: result.ext4,
|
||||
settlementMode: result.settlementMode,
|
||||
isPass: result.isPass,
|
||||
isBondDuration: result.isBondDuration,
|
||||
extContent:
|
||||
'@undefined|\u8d27\u5e011\u8d26\u6237\u884c@|\u8d27\u5e012\u8d26\u6237\u884c@|\u6e05\u7b97\u65b9\u5f0f@|\u4e1a\u52a1\u5458@undefined',
|
||||
maturityDate: result.maturityDate?.toString(),
|
||||
};
|
||||
|
||||
this.setccy1ccy2(result.underlying);
|
||||
this.getdcsPairInfo(result.underlying);
|
||||
// this.getDCSqueryFolderById(result.folder);
|
||||
this.getDCSqueryCptyName(result.cpty);
|
||||
});
|
||||
|
||||
this.quickSearchVisible = false;
|
||||
},
|
||||
// 附件管理 事件
|
||||
handleAttachmentdblclick(row) {
|
||||
this.attachmentVisible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="RCSbox">
|
||||
<OperateCard
|
||||
class="cleft"
|
||||
width="220px"
|
||||
show-fold
|
||||
custom-render-content
|
||||
showSearch
|
||||
title="金融产品"
|
||||
label="text"
|
||||
:form-list="leftSelectList"
|
||||
@handleNodeClick="handleLeftNodeClick"
|
||||
:renderContent="renderLeft"
|
||||
/>
|
||||
<div class="cright">
|
||||
<CCenter :value="node" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OperateCard from '@/components/operateCard';
|
||||
import CCenter from './lineCenter/index.vue'
|
||||
const menuIds = [8010302, 801020103, 801020104, 8010308]
|
||||
export default {
|
||||
components: {
|
||||
OperateCard,
|
||||
CCenter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
leftSelectList: [],
|
||||
node:{},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getLeft();
|
||||
},
|
||||
methods: {
|
||||
handleLeftNodeClick(node) {
|
||||
this.node = node
|
||||
},
|
||||
getLeft() {
|
||||
const userApplGroups = JSON.parse(Eui.Share.get('userApplGroups'));
|
||||
const menuArr = (userApplGroups.find(e => e.groupId === 'rcs'))?.menus || [];
|
||||
const tradeMenu = menuArr.filter((item) => item.id === 801)[0]?.children || [];
|
||||
const menu = this.findNodesByIds(tradeMenu, menuIds);
|
||||
this.leftSelectList = tradeMenu;
|
||||
// console.log('tradeMenu', tradeMenu);
|
||||
},
|
||||
renderLeft(h, { node, data }) {
|
||||
return (<span style="font-size: 12px;">{this.$t(data.text)}</span>);
|
||||
},
|
||||
findNodesByIds(nodeList, targetIds) {
|
||||
let result = [];
|
||||
nodeList.forEach(node => {
|
||||
if (targetIds.includes(node.id)) {
|
||||
result.push(node);
|
||||
}
|
||||
if (node.children && node.children.length > 0) {
|
||||
result = result.concat(this.findNodesByIds(node.children, targetIds));
|
||||
}
|
||||
});
|
||||
return result;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.RCSbox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
.cright {
|
||||
width: calc(100% - 228px);
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div class="centercompBox">
|
||||
<component :is="componentTag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 外汇即期
|
||||
import menuForexSpot from '../componentMenu/menuForexSpot.vue';
|
||||
// 外汇远期
|
||||
import menuForexForward from '../componentMenu/menuForexForward.vue';
|
||||
// 外汇掉期
|
||||
import menuForexSwap from '../componentMenu/menuForexSwap.vue';
|
||||
export default {
|
||||
components: {
|
||||
menuForexSpot,
|
||||
menuForexForward,
|
||||
menuForexSwap,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 默认
|
||||
componentTag: 'menuForexSpot',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(nVal) {
|
||||
const name = nVal.chsMenuName;
|
||||
console.log(name);
|
||||
|
||||
if (name === 'menu.forexSpot') {
|
||||
this.componentTag = 'menuForexSpot';
|
||||
} else if (name === 'menu.forexForward') {
|
||||
this.componentTag = 'menuForexForward';
|
||||
} else if (name === 'menu.forexSwap') {
|
||||
this.componentTag = 'menuForexSwap';
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.centercompBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="Right_box">
|
||||
<div class="foldbox">
|
||||
<div
|
||||
class="header"
|
||||
@click="handleModalChange(0)"
|
||||
>
|
||||
<div class="header-icon">
|
||||
<icon-font
|
||||
name="icon-account"
|
||||
size="11"
|
||||
/>
|
||||
</div>
|
||||
<div class="header-title">现金流预算</div>
|
||||
<div class="header-rotate">
|
||||
<i
|
||||
v-if="!isOpen0"
|
||||
class="el-icon-arrow-right"
|
||||
/>
|
||||
<i
|
||||
v-if="isOpen0"
|
||||
class="el-icon-arrow-down"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="isOpen0"
|
||||
class="content"
|
||||
/>
|
||||
<CashPreview v-show="isOpen0" />
|
||||
</div>
|
||||
|
||||
<div class="foldbox">
|
||||
<div
|
||||
class="header"
|
||||
@click="handleModalChange(1)"
|
||||
>
|
||||
<div class="header-icon">
|
||||
<icon-font
|
||||
name="icon-operational-risk"
|
||||
size="11"
|
||||
/>
|
||||
</div>
|
||||
<div class="header-title">操作风险检查</div>
|
||||
<div class="header-rotate">
|
||||
<i
|
||||
v-if="!isOpen1"
|
||||
class="el-icon-arrow-right"
|
||||
/>
|
||||
<i
|
||||
v-if="isOpen1"
|
||||
class="el-icon-arrow-down"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="isOpen1"
|
||||
class="content"
|
||||
/>
|
||||
<Operate v-show="isOpen1" />
|
||||
</div>
|
||||
|
||||
<div class="foldbox">
|
||||
<div
|
||||
class="header"
|
||||
@click="handleModalChange(2)"
|
||||
>
|
||||
<div class="header-icon">
|
||||
<icon-font
|
||||
name="icon-credit-risk"
|
||||
size="11"
|
||||
/>
|
||||
</div>
|
||||
<div class="header-title">信用风险检查</div>
|
||||
<div class="header-rotate">
|
||||
<i
|
||||
v-if="!isOpen2"
|
||||
class="el-icon-arrow-right"
|
||||
/>
|
||||
<i
|
||||
v-if="isOpen2"
|
||||
class="el-icon-arrow-down"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="isOpen2"
|
||||
class="content"
|
||||
/>
|
||||
<Credit v-show="isOpen2" />
|
||||
</div>
|
||||
|
||||
<div class="foldbox">
|
||||
<div
|
||||
class="header"
|
||||
@click="handleModalChange(3)"
|
||||
>
|
||||
<div class="header-icon">
|
||||
<icon-font
|
||||
name="icon-market-risk"
|
||||
size="11"
|
||||
/>
|
||||
</div>
|
||||
<div class="header-title">市场风险检查</div>
|
||||
<div class="header-rotate">
|
||||
<i
|
||||
v-if="!isOpen3"
|
||||
class="el-icon-arrow-right"
|
||||
/>
|
||||
<i
|
||||
v-if="isOpen3"
|
||||
class="el-icon-arrow-down"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="isOpen3"
|
||||
class="content"
|
||||
/>
|
||||
<Market v-show="isOpen3" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CashPreview from '../component/cashFlowBudgetPreview.vue'; // 现金流预览
|
||||
// import Cash from '../component/cashFlowBudget.vue'; // 现金流
|
||||
import Operate from '../component/operaterisk.vue';
|
||||
import Credit from '../component/creditsrisk.vue';
|
||||
import Market from '../component/marketrisk.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CashPreview,
|
||||
Operate,
|
||||
Credit,
|
||||
Market,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isOpen0: false,
|
||||
isOpen1: false,
|
||||
isOpen2: false,
|
||||
isOpen3: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(nVal) {
|
||||
this.handleModalOpen(nVal);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 中间按钮传入事件
|
||||
handleModalOpen(nVal) {
|
||||
for (let index = 0; index <= 3; index++) {
|
||||
this[`isOpen${nVal}`] = true;
|
||||
if (index !== nVal) {
|
||||
this[`isOpen${index}`] = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 当前栏点击事件
|
||||
handleModalChange(num) {
|
||||
this.$emit('handleModal', num);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Right_box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
.foldbox {
|
||||
margin-bottom: 8px;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--desktop-bg-color-1);
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
font-weight: 800;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
.header-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--desktop-bg-color-1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.header-title {
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.header-rotate {
|
||||
margin-left: 14px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
margin-top: 10px;
|
||||
padding-top: 7px;
|
||||
width: 100%;
|
||||
border-top: 1px solid var(--card-border);
|
||||
}
|
||||
.fade-enter-active {
|
||||
transition: opacity 2s ease, height 2s ease;
|
||||
}
|
||||
.fade-leave-active {
|
||||
transition: opacity 0s, height 0s;
|
||||
}
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="修改预览"
|
||||
:visible.sync="visibleDialog"
|
||||
width="80%"
|
||||
@close="close"
|
||||
>
|
||||
<div
|
||||
id="jsonEditor"
|
||||
style="height:500px"
|
||||
/>
|
||||
<div
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
:size="$buttonSize"
|
||||
@click="handleSave"
|
||||
>保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSONEditor from 'jsoneditor';
|
||||
import 'jsoneditor/dist/jsoneditor.css';
|
||||
export default {
|
||||
components: {
|
||||
// JSONEditor,
|
||||
},
|
||||
props: {
|
||||
dialogShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
selectRow: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visibleDialog: false,
|
||||
editor: null,
|
||||
options: {
|
||||
mode: 'code',
|
||||
search: false,
|
||||
transform: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
dialogShow: {
|
||||
handler(nv) {
|
||||
this.visibleDialog = nv;
|
||||
if (nv) {
|
||||
this.$nextTick(() => {
|
||||
const container = document.getElementById('jsonEditor');
|
||||
this.editor = new JSONEditor(container, this.options);
|
||||
this.editor.set(JSON.parse(this.selectRow.messageContent));
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
close() {
|
||||
console.log('关闭了');
|
||||
this.visibleDialog = false;
|
||||
this.editor.destroy();
|
||||
this.$emit('update:dialogShow', false);
|
||||
},
|
||||
handleSave() {
|
||||
this.$apis
|
||||
.messageSave({
|
||||
'queryParam.moduleName': 'pubSendExceptionManager',
|
||||
'queryParam.domain': JSON.stringify({
|
||||
id: this.selectRow.id,
|
||||
messageContent: this.editor.get(),
|
||||
}),
|
||||
})
|
||||
.then((res) => {
|
||||
this.$message.success('请求成功');
|
||||
this.close();
|
||||
this.$parent.queryPage();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.jsoneditor .jsoneditor-transform),
|
||||
:deep(.jsoneditor .jsoneditor-repair),
|
||||
:deep(.jsoneditor-menu a.jsoneditor-poweredBy) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<div class="RCSbox send-exception common-page">
|
||||
<FormSearch
|
||||
:form-arr="formArr"
|
||||
:form-data="searchParams"
|
||||
@outOperation="outOperation"
|
||||
@searchSubmit="searchSubmit"
|
||||
@reset="resetForm"
|
||||
/>
|
||||
<PublicTable
|
||||
ref="table"
|
||||
class="table"
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:has-index="false"
|
||||
:need-select="true"
|
||||
:table-data="tableData"
|
||||
:table-info="tableInfo"
|
||||
:table-column="columns"
|
||||
:events="events"
|
||||
operation-width="150px"
|
||||
:btn-button="operations"
|
||||
:table-top-button="tableTopButton"
|
||||
:operation-fixed="true"
|
||||
:is-need-pagination="true"
|
||||
:current-page="searchParams.pageStart"
|
||||
:page-size="searchParams.pageLimit"
|
||||
:total="total"
|
||||
:has-operation="false"
|
||||
:is-need-customcolumn="false"
|
||||
@sizeChange="handleSizeChange"
|
||||
@currentChange="handleCurrentChange"
|
||||
@customColumnChange="handleCustomColumnChange"
|
||||
@handleTableTopColumnIconClick="handleTableTopColumnIconClick"
|
||||
@handleSelectionChange="handleSelectionChange"
|
||||
/>
|
||||
<JsonDialog
|
||||
:dialog-show.sync="dialogShow"
|
||||
:select-row="selectRow"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormSearch from '@/components/formSearch/index.vue';
|
||||
import PublicTable from '@/components/table/index.vue';
|
||||
import JsonDialog from './components/jsonDialog.vue';
|
||||
export default {
|
||||
components: {
|
||||
FormSearch,
|
||||
PublicTable,
|
||||
JsonDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogShow: false,
|
||||
selection: [],
|
||||
selectRow: {},
|
||||
tableInfo: {
|
||||
// tableHeight: document.documentElement.clientHeight - 286,
|
||||
},
|
||||
formArr: [
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'dealId',
|
||||
span: 4,
|
||||
attrs: {
|
||||
label: '交易流水号',
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
type: 'pickerDate',
|
||||
prop: 'sendDate',
|
||||
span: 4,
|
||||
attrs: {
|
||||
label: '发送日期',
|
||||
type: 'daterange',
|
||||
'value-format': 'yyyy-MM-dd',
|
||||
'range-separator': '至',
|
||||
'start-placeholder': '开始日期',
|
||||
'end-placeholder': '结束日期',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'sendStatus',
|
||||
span: 4,
|
||||
attrs: {
|
||||
label: '发送状态',
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
],
|
||||
// 默认值
|
||||
formData: {},
|
||||
loading: false,
|
||||
// table数据源
|
||||
tableData: [],
|
||||
// 表格项绑定的属性
|
||||
columns: [
|
||||
{
|
||||
prop: 'dealId',
|
||||
minWidth: '200px',
|
||||
align: 'center',
|
||||
label: this.$t('field.dealId'),
|
||||
},
|
||||
{
|
||||
prop: 'eventStr',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: this.$t('field.event'),
|
||||
},
|
||||
{
|
||||
prop: 'sendService',
|
||||
minWidth: '200px',
|
||||
align: 'center',
|
||||
label: this.$t('field.sendService'),
|
||||
},
|
||||
{
|
||||
prop: 'acceptService',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: this.$t('field.acceptService'),
|
||||
},
|
||||
{
|
||||
prop: 'sendDateStr',
|
||||
minWidth: '160px',
|
||||
align: 'center',
|
||||
label: this.$t('field.sendDate'),
|
||||
},
|
||||
{
|
||||
prop: 'sendTimeStr',
|
||||
minWidth: '160px',
|
||||
align: 'center',
|
||||
label: this.$t('field.sendingTime'),
|
||||
},
|
||||
{
|
||||
prop: 'sendStatusStr',
|
||||
minWidth: '160px',
|
||||
align: 'center',
|
||||
label: this.$t('field.sendStatus'),
|
||||
},
|
||||
{
|
||||
prop: 'exceptionCause',
|
||||
minWidth: '160px',
|
||||
align: 'center',
|
||||
label: this.$t('field.exceptionCause'),
|
||||
},
|
||||
|
||||
{
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: '报文内容',
|
||||
render: (h, params) => {
|
||||
return h('Icon', {
|
||||
attrs: {
|
||||
class: 'el-icon-edit',
|
||||
},
|
||||
style: {
|
||||
cursor: 'pointer',
|
||||
color: '#017BFF',
|
||||
fontSize: '16px',
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.dialogShow = true;
|
||||
this.selectRow = params.row;
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
// 表格行单机双击事件
|
||||
events: {
|
||||
},
|
||||
// 操作栏自定义按钮
|
||||
operations: [
|
||||
|
||||
],
|
||||
tableTopButton: [
|
||||
{
|
||||
text: this.$t('button.sendAgain'),
|
||||
type: 'primary',
|
||||
class: 'el-text-color',
|
||||
callback: (value) => {
|
||||
this.handleBatchSendAgain(value);
|
||||
},
|
||||
},
|
||||
],
|
||||
// 搜索查询的参数
|
||||
searchParams: {
|
||||
pageStart: 1,
|
||||
pageLimit: 20,
|
||||
sendStatus: '2',
|
||||
},
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
this.queryPage();
|
||||
this.getOptions();
|
||||
},
|
||||
methods: {
|
||||
resetForm() {
|
||||
this.searchParams = {
|
||||
pageStart: 1,
|
||||
pageLimit: 20,
|
||||
sendStatus: '2',
|
||||
};
|
||||
},
|
||||
searchSubmit(val) {
|
||||
console.log('search结果', val);
|
||||
this.searchParams = { ...this.searchParams, ...val };
|
||||
this.queryPage();
|
||||
},
|
||||
// 页面展示条数改变事件-pageLimit
|
||||
handleSizeChange(pageLimit) {
|
||||
this.searchParams.pageLimit = pageLimit;
|
||||
this.queryPage();
|
||||
},
|
||||
// 页面切换事件-pageStart
|
||||
handleCurrentChange(pageStart) {
|
||||
// console.log('');
|
||||
this.searchParams.pageStart = pageStart;
|
||||
this.queryPage();
|
||||
},
|
||||
// 数据列确定修改事件
|
||||
handleCustomColumnChange(val) {
|
||||
// console.log('数据列确定修改事件',val);
|
||||
// this.tableData = mockData2;
|
||||
},
|
||||
// 多选事件
|
||||
handleSelectionChange(val) {
|
||||
console.log('多选事件 ', val);
|
||||
this.selection = val;
|
||||
},
|
||||
// 自定义按钮 点击事件
|
||||
async handleBatchSendAgain(val) {
|
||||
if (!this.selection.length > 0) {
|
||||
const temp = await this.$confirmAction(
|
||||
'请至少选择一条记录！',
|
||||
'warning',
|
||||
'补发',
|
||||
);
|
||||
return temp;
|
||||
}
|
||||
const isContinue = this.$confirmAction('确定要执行该操作吗？',
|
||||
'warning',
|
||||
'提示');
|
||||
if (isContinue) {
|
||||
this.$apis
|
||||
.batchSendAgain({ 'queryParam.list': this.selection })
|
||||
.then((res) => {
|
||||
console.log(res, '确定回调---');
|
||||
this.$message.success('请求成功');
|
||||
this.queryPage();
|
||||
});
|
||||
}
|
||||
},
|
||||
async queryPage() {
|
||||
const params = {
|
||||
moduleName: 'pubSendExceptionManager',
|
||||
sendService: 'DCS',
|
||||
...this.searchParams,
|
||||
};
|
||||
if (params.sendDate && params.sendDate.length > 0) {
|
||||
params.sendDateStart = this.searchParams.sendDate[0];
|
||||
params.sendDateEnd = this.searchParams.sendDate[1];
|
||||
}
|
||||
delete params.sendDate;
|
||||
const transformedParams = {};
|
||||
for (const key in params) {
|
||||
transformedParams[`queryParam.${key}`] = params[key];
|
||||
}
|
||||
this.loading = true;
|
||||
const res = await this.$apis.getEventList(transformedParams);
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.tableData = res.data.result.datals;
|
||||
this.total = res.data.result.total;
|
||||
}
|
||||
},
|
||||
getOptions() {
|
||||
this.$apis
|
||||
.queryComboxData({ 'codifierGrpCodes': 'SendExceptionStatus' })
|
||||
.then((res) => {
|
||||
const { SendExceptionStatus } = res.data.result;
|
||||
this.formArr[2].options = SendExceptionStatus;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.send-exception{
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
+132
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-chart
|
||||
:options="chartOptions"
|
||||
style="height: 300px;"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const names = [
|
||||
'Orange',
|
||||
'Tomato',
|
||||
'Apple',
|
||||
'Sakana',
|
||||
'Banana',
|
||||
'Iwashi',
|
||||
'Snappy Fish',
|
||||
'Lemon',
|
||||
'Pasta',
|
||||
];
|
||||
const years = ['2001', '2002', '2003', '2004', '2005', '2006'];
|
||||
const shuffle = (array) => {
|
||||
let currentIndex = array.length;
|
||||
let randomIndex = 0;
|
||||
while (currentIndex > 0) {
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex--;
|
||||
[array[currentIndex], array[randomIndex]] = [
|
||||
array[randomIndex],
|
||||
array[currentIndex],
|
||||
];
|
||||
}
|
||||
return array;
|
||||
};
|
||||
const generateRankingData = () => {
|
||||
const map = new Map();
|
||||
const defaultRanking = Array.from({ length: names.length }, (_, i) => i + 1);
|
||||
for (const _ of years) {
|
||||
const shuffleArray = shuffle(defaultRanking);
|
||||
names.forEach((name, i) => {
|
||||
map.set(name, (map.get(name) || []).concat(shuffleArray[i]));
|
||||
});
|
||||
}
|
||||
return map;
|
||||
};
|
||||
const generateSeriesList = () => {
|
||||
const seriesList = [];
|
||||
const rankingMap = generateRankingData();
|
||||
rankingMap.forEach((data, name) => {
|
||||
const series = {
|
||||
name,
|
||||
symbolSize: 20,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
endLabel: {
|
||||
show: true,
|
||||
formatter: '{a}',
|
||||
distance: 20,
|
||||
},
|
||||
lineStyle: {
|
||||
width: 4,
|
||||
},
|
||||
data,
|
||||
};
|
||||
seriesList.push(series);
|
||||
});
|
||||
return seriesList;
|
||||
};
|
||||
export default {
|
||||
name: 'Chart',
|
||||
data() {
|
||||
return {
|
||||
chartOptions: {
|
||||
// ECharts 配置项...
|
||||
title: {
|
||||
text: 'Bump Chart (Ranking)',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
grid: {
|
||||
left: 30,
|
||||
right: 110,
|
||||
bottom: 30,
|
||||
containLabel: true,
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
splitLine: {
|
||||
show: true,
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 30,
|
||||
fontSize: 16,
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: years,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
margin: 30,
|
||||
fontSize: 16,
|
||||
formatter: '#{value}',
|
||||
},
|
||||
inverse: true,
|
||||
interval: 1,
|
||||
min: 1,
|
||||
max: names.length,
|
||||
},
|
||||
series: generateSeriesList(),
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
+362
@@ -0,0 +1,362 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="show">信息展示弹窗</el-button>
|
||||
<el-button @click="showNumber=!showNumber">金额组件</el-button>
|
||||
<el-button @click="showChart1=!showChart1">图表demo1</el-button>
|
||||
<el-button @click="showChart2=!showChart2">图表demo2</el-button>
|
||||
<el-button @click="showSearch=!showSearch">查询组件</el-button>
|
||||
<el-button @click="showMessage">消息提示</el-button>
|
||||
<el-button @click="showMessageBox">消息提示2</el-button>
|
||||
<infoShow
|
||||
ref="infoShow"
|
||||
:config="config"
|
||||
/>
|
||||
<v-chart
|
||||
v-if="showChart1"
|
||||
:options="chartOptions"
|
||||
style="height: 300px;"
|
||||
/>
|
||||
<v-chart
|
||||
v-if="showChart2"
|
||||
:options="chartOptions2"
|
||||
style="height: 300px;"
|
||||
/>
|
||||
<searchForm
|
||||
v-if="showSearch"
|
||||
:search="searchList"
|
||||
:is-show-expand-params="true"
|
||||
@onRemote="onRemote"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import infoShow from '@/components/infoShow';
|
||||
import searchForm from '@/components/searchForm';
|
||||
import { confirmAction } from '@/utils';
|
||||
|
||||
const names = [
|
||||
'Orange',
|
||||
'Tomato',
|
||||
'Apple',
|
||||
'Sakana',
|
||||
'Banana',
|
||||
'Iwashi',
|
||||
'Snappy Fish',
|
||||
'Lemon',
|
||||
'Pasta',
|
||||
];
|
||||
const years = ['2001', '2002', '2003', '2004', '2005', '2006'];
|
||||
const shuffle = (array) => {
|
||||
let currentIndex = array.length;
|
||||
let randomIndex = 0;
|
||||
while (currentIndex > 0) {
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex--;
|
||||
[array[currentIndex], array[randomIndex]] = [
|
||||
array[randomIndex],
|
||||
array[currentIndex],
|
||||
];
|
||||
}
|
||||
return array;
|
||||
};
|
||||
const generateRankingData = () => {
|
||||
const map = new Map();
|
||||
const defaultRanking = Array.from({ length: names.length }, (_, i) => i + 1);
|
||||
for (const _ of years) {
|
||||
const shuffleArray = shuffle(defaultRanking);
|
||||
names.forEach((name, i) => {
|
||||
map.set(name, (map.get(name) || []).concat(shuffleArray[i]));
|
||||
});
|
||||
}
|
||||
return map;
|
||||
};
|
||||
const generateSeriesList = () => {
|
||||
const seriesList = [];
|
||||
const rankingMap = generateRankingData();
|
||||
rankingMap.forEach((data, name) => {
|
||||
const series = {
|
||||
name,
|
||||
symbolSize: 20,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
endLabel: {
|
||||
show: true,
|
||||
formatter: '{a}',
|
||||
distance: 20,
|
||||
},
|
||||
lineStyle: {
|
||||
width: 4,
|
||||
},
|
||||
data,
|
||||
};
|
||||
seriesList.push(series);
|
||||
});
|
||||
return seriesList;
|
||||
};
|
||||
export default {
|
||||
name: 'Demo',
|
||||
components: {
|
||||
infoShow,
|
||||
searchForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config: {
|
||||
title: '标题',
|
||||
width: '1000px',
|
||||
height: '400px',
|
||||
lists: [
|
||||
{
|
||||
group: '分组一',
|
||||
children: [
|
||||
{
|
||||
col: 6,
|
||||
key: '标题一',
|
||||
value: '很长一串内容一',
|
||||
},
|
||||
{
|
||||
col: 6,
|
||||
key: '标题二',
|
||||
value: '很长一串内容二',
|
||||
},
|
||||
{
|
||||
col: 6,
|
||||
key: '标题三',
|
||||
value: '很长一串内容三',
|
||||
},
|
||||
{
|
||||
col: 6,
|
||||
key: '标题四',
|
||||
value: '很长一串内容四',
|
||||
},
|
||||
{
|
||||
col: 12,
|
||||
key: '标题五',
|
||||
value: '很长一串很长一串很长一串内容五',
|
||||
},
|
||||
{
|
||||
col: 12,
|
||||
key: '标题六',
|
||||
value: '很长一串很长一串很长一串内容六',
|
||||
},
|
||||
{
|
||||
col: 24,
|
||||
key: '标题七标题七',
|
||||
value: '很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串内容七',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: '分组二',
|
||||
children: [
|
||||
{
|
||||
col: 6,
|
||||
key: '标题一',
|
||||
value: '很长一串内容一',
|
||||
},
|
||||
{
|
||||
col: 6,
|
||||
key: '标题二',
|
||||
value: '很长一串内容二',
|
||||
},
|
||||
{
|
||||
col: 6,
|
||||
key: '标题三',
|
||||
value: '很长一串内容三',
|
||||
},
|
||||
{
|
||||
col: 6,
|
||||
key: '标题四',
|
||||
value: '很长一串内容四',
|
||||
},
|
||||
{
|
||||
col: 12,
|
||||
key: '标题五',
|
||||
value: '很长一串很长一串很长一串内容五',
|
||||
},
|
||||
{
|
||||
col: 12,
|
||||
key: '标题六',
|
||||
value: '很长一串很长一串很长一串内容六',
|
||||
},
|
||||
{
|
||||
col: 24,
|
||||
key: '标题七标题七',
|
||||
value: '很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串内容七',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
group: '分组三',
|
||||
children: [
|
||||
{
|
||||
col: 6,
|
||||
key: '标题一',
|
||||
value: '很长一串内容一',
|
||||
},
|
||||
{
|
||||
col: 6,
|
||||
key: '标题二',
|
||||
value: '很长一串内容二',
|
||||
},
|
||||
{
|
||||
col: 6,
|
||||
key: '标题三',
|
||||
value: '很长一串内容三',
|
||||
},
|
||||
{
|
||||
col: 6,
|
||||
key: '标题四',
|
||||
value: '很长一串内容四',
|
||||
},
|
||||
{
|
||||
col: 12,
|
||||
key: '标题五',
|
||||
value: '很长一串很长一串很长一串内容五',
|
||||
},
|
||||
{
|
||||
col: 12,
|
||||
key: '标题六',
|
||||
value: '很长一串很长一串很长一串内容六',
|
||||
},
|
||||
{
|
||||
col: 24,
|
||||
key: '标题七标题七',
|
||||
value: '很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串很长一串内容七',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
showNumber: false,
|
||||
inputValue: 11234.5,
|
||||
showChart1: false,
|
||||
chartOptions: {
|
||||
// ECharts 配置项...
|
||||
title: {
|
||||
text: '示例图表',
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
|
||||
},
|
||||
yAxis: {},
|
||||
series: [{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
data: [5, 20, 36, 10, 10, 20],
|
||||
}],
|
||||
},
|
||||
showChart2: false,
|
||||
chartOptions2: {
|
||||
// ECharts 配置项...
|
||||
title: {
|
||||
text: 'Bump Chart (Ranking)',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
grid: {
|
||||
left: 30,
|
||||
right: 110,
|
||||
bottom: 30,
|
||||
containLabel: true,
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
splitLine: {
|
||||
show: true,
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 30,
|
||||
fontSize: 16,
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: years,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
margin: 30,
|
||||
fontSize: 16,
|
||||
formatter: '#{value}',
|
||||
},
|
||||
inverse: true,
|
||||
interval: 1,
|
||||
min: 1,
|
||||
max: names.length,
|
||||
},
|
||||
series: generateSeriesList(),
|
||||
},
|
||||
showSearch: false,
|
||||
searchList: [
|
||||
{
|
||||
label: '名称',
|
||||
name: 'subsName',
|
||||
type: 'input',
|
||||
placeholder: '请输入',
|
||||
isValid: true,
|
||||
},
|
||||
{
|
||||
label: '收件人',
|
||||
name: 'addressId',
|
||||
type: 'select',
|
||||
placeholder: '请选择',
|
||||
remote: true,
|
||||
options: [
|
||||
{
|
||||
text: '测试1',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
text: '测试2',
|
||||
value: '2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '日期',
|
||||
name: 'date',
|
||||
type: 'date',
|
||||
isValid: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
console.log('this.$refs.infoShow-------', this.$refs.infoShow);
|
||||
this.$refs.infoShow.init();
|
||||
},
|
||||
onRemote(query, prop) {
|
||||
console.log('query, prop------', query, prop);
|
||||
},
|
||||
showMessage() {
|
||||
this.$message.error('提示提示提示提示提示提示');
|
||||
},
|
||||
async showMessageBox() {
|
||||
const temp = await confirmAction('确定删除吗?', 'warning', '标题');
|
||||
if (temp) {
|
||||
try {
|
||||
console.log('确定回调---');
|
||||
} catch {
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div
|
||||
ref="parent"
|
||||
class="parent-container"
|
||||
>
|
||||
<div class="draggable-box" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
// 获取父级容器
|
||||
const parent = this.$refs.parent;
|
||||
|
||||
// 获取拖动的元素
|
||||
const box = this.$el.querySelector('.draggable-box');
|
||||
|
||||
// 定义拖动的初始位置和鼠标位置
|
||||
let startX, startY, initialMouseX, initialMouseY;
|
||||
|
||||
// 绑定鼠标按下事件
|
||||
box.addEventListener('mousedown', function(event) {
|
||||
startX = box.offsetLeft;
|
||||
startY = box.offsetTop;
|
||||
initialMouseX = event.clientX;
|
||||
initialMouseY = event.clientY;
|
||||
|
||||
// 绑定鼠标移动事件
|
||||
document.addEventListener('mousemove', dragBox);
|
||||
|
||||
// 绑定鼠标抬起事件
|
||||
document.addEventListener('mouseup', stopDraggingBox);
|
||||
});
|
||||
|
||||
// 拖动函数
|
||||
function dragBox(event) {
|
||||
const currentMouseX = event.clientX;
|
||||
const currentMouseY = event.clientY;
|
||||
|
||||
const diffX = currentMouseX - initialMouseX;
|
||||
const diffY = currentMouseY - initialMouseY;
|
||||
|
||||
// 计算元素的新位置
|
||||
const newBoxLeft = startX + diffX;
|
||||
const newBoxTop = startY + diffY;
|
||||
|
||||
// 判断是否超出父级容器的范围
|
||||
if (newBoxLeft >= 0 && newBoxLeft + box.offsetWidth <= parent.offsetWidth) {
|
||||
box.style.left = newBoxLeft + 'px';
|
||||
}
|
||||
if (newBoxTop >= 0 && newBoxTop + box.offsetHeight <= parent.offsetHeight) {
|
||||
box.style.top = newBoxTop + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
// 停止拖动函数
|
||||
function stopDraggingBox() {
|
||||
document.removeEventListener('mousemove', dragBox);
|
||||
document.removeEventListener('mouseup', stopDraggingBox);
|
||||
}
|
||||
|
||||
// 绑定缩放事件
|
||||
box.addEventListener('wheel', function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const scale = event.deltaY > 0 ? 0.9 : 1.1;
|
||||
|
||||
box.style.width = box.offsetWidth * scale + 'px';
|
||||
box.style.height = box.offsetHeight * scale + 'px';
|
||||
|
||||
// 判断是否超出父级容器的范围
|
||||
if (box.offsetLeft + box.offsetWidth > parent.offsetWidth) {
|
||||
box.style.width = parent.offsetWidth - box.offsetLeft + 'px';
|
||||
}
|
||||
if (box.offsetTop + box.offsetHeight > parent.offsetHeight) {
|
||||
box.style.height = parent.offsetHeight - box.offsetTop + 'px';
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.parent-container {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.draggable-box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div class="draggable-box" :style="boxStyle">
|
||||
<div class="title-bar" @mousedown="startDrag">
|
||||
<slot name="title">Default Title</slot>
|
||||
</div>
|
||||
<div class="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="resize-handle" @mousedown="startResize"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isDragging: false,
|
||||
isResizing: false,
|
||||
startMouseX: 0,
|
||||
startMouseY: 0,
|
||||
startBoxX: 0,
|
||||
startBoxY: 0,
|
||||
startBoxWidth: 0,
|
||||
startBoxHeight: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
boxStyle() {
|
||||
return {
|
||||
left: this.startBoxX + "px",
|
||||
top: this.startBoxY + "px",
|
||||
width: this.startBoxWidth + "px",
|
||||
height: this.startBoxHeight + "px"
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startDrag(event) {
|
||||
this.isDragging = true;
|
||||
this.startMouseX = event.clientX;
|
||||
this.startMouseY = event.clientY;
|
||||
this.startBoxX = parseInt(this.$el.style.left, 10);
|
||||
this.startBoxY = parseInt(this.$el.style.top, 10);
|
||||
document.addEventListener("mousemove", this.doDrag);
|
||||
document.addEventListener("mouseup", this.stopDrag);
|
||||
},
|
||||
doDrag(event) {
|
||||
if (this.isDragging) {
|
||||
const deltaX = event.clientX - this.startMouseX;
|
||||
const deltaY = event.clientY - this.startMouseY;
|
||||
this.startBoxX += deltaX;
|
||||
this.startBoxY += deltaY;
|
||||
this.startMouseX = event.clientX;
|
||||
this.startMouseY = event.clientY;
|
||||
}
|
||||
},
|
||||
stopDrag() {
|
||||
this.isDragging = false;
|
||||
document.removeEventListener("mousemove", this.doDrag);
|
||||
document.removeEventListener("mouseup", this.stopDrag);
|
||||
},
|
||||
startResize(event) {
|
||||
this.isResizing = true;
|
||||
this.startMouseX = event.clientX;
|
||||
this.startMouseY = event.clientY;
|
||||
this.startBoxWidth = this.$el.offsetWidth;
|
||||
this.startBoxHeight = this.$el.offsetHeight;
|
||||
document.addEventListener("mousemove", this.doResize);
|
||||
document.addEventListener("mouseup", this.stopResize);
|
||||
},
|
||||
doResize(event) {
|
||||
if (this.isResizing) {
|
||||
const deltaX = event.clientX - this.startMouseX;
|
||||
const deltaY = event.clientY - this.startMouseY;
|
||||
this.startBoxWidth += deltaX;
|
||||
this.startBoxHeight += deltaY;
|
||||
this.startMouseX = event.clientX;
|
||||
this.startMouseY = event.clientY;
|
||||
}
|
||||
},
|
||||
stopResize() {
|
||||
this.isResizing = false;
|
||||
document.removeEventListener("mousemove", this.doResize);
|
||||
document.removeEventListener("mouseup", this.stopResize);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title-bar {
|
||||
position: relative;
|
||||
background-color: #ccc;
|
||||
cursor: move;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.resize-handle {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #666;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<!-- 基本用法 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always" :body-style="bodyStyle">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基本用法</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-row>
|
||||
<e-button>默认按钮</e-button>
|
||||
<e-button type="primary">主要按钮</e-button>
|
||||
<e-button type="success">成功按钮</e-button>
|
||||
<e-button type="info">信息按钮</e-button>
|
||||
<e-button type="warning">警告按钮</e-button>
|
||||
<e-button type="danger">危险按钮</e-button>
|
||||
</e-row>
|
||||
|
||||
<e-row>
|
||||
<e-button plain>朴素按钮</e-button>
|
||||
<e-button type="primary" plain>主要按钮</e-button>
|
||||
<e-button type="success" plain>成功按钮</e-button>
|
||||
<e-button type="info" plain>信息按钮</e-button>
|
||||
<e-button type="warning" plain>警告按钮</e-button>
|
||||
<e-button type="danger" plain>危险按钮</e-button>
|
||||
</e-row>
|
||||
|
||||
<e-row>
|
||||
<e-button round>圆角按钮</e-button>
|
||||
<e-button type="primary" round>主要按钮</e-button>
|
||||
<e-button type="success" round>成功按钮</e-button>
|
||||
<e-button type="info" round>信息按钮</e-button>
|
||||
<e-button type="warning" round>警告按钮</e-button>
|
||||
<e-button type="danger" round>危险按钮</e-button>
|
||||
</e-row>
|
||||
|
||||
<e-row>
|
||||
<e-button icon="el-icon-search" circle></e-button>
|
||||
<e-button type="primary" icon="el-icon-edit" circle></e-button>
|
||||
<e-button type="success" icon="el-icon-check" circle></e-button>
|
||||
<e-button type="info" icon="el-icon-message" circle></e-button>
|
||||
<e-button type="warning" icon="el-icon-star-off" circle></e-button>
|
||||
<e-button type="danger" icon="el-icon-delete" circle></e-button>
|
||||
</e-row>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 禁用状态 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always" :body-style="bodyStyle">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>禁用状态</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-row>
|
||||
<e-button disabled>默认按钮</e-button>
|
||||
<e-button type="primary" disabled>主要按钮</e-button>
|
||||
<e-button type="success" disabled>成功按钮</e-button>
|
||||
<e-button type="info" disabled>信息按钮</e-button>
|
||||
<e-button type="warning" disabled>警告按钮</e-button>
|
||||
<e-button type="danger" disabled>危险按钮</e-button>
|
||||
</e-row>
|
||||
|
||||
<e-row>
|
||||
<e-button plain disabled>朴素按钮</e-button>
|
||||
<e-button type="primary" plain disabled>主要按钮</e-button>
|
||||
<e-button type="success" plain disabled>成功按钮</e-button>
|
||||
<e-button type="info" plain disabled>信息按钮</e-button>
|
||||
<e-button type="warning" plain disabled>警告按钮</e-button>
|
||||
<e-button type="danger" plain disabled>危险按钮</e-button>
|
||||
</e-row>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 文字按钮 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always" :body-style="bodyStyle">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>文字按钮</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-button type="text">文字按钮</e-button>
|
||||
<e-button type="text" disabled>文字按钮</e-button>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 图标按钮 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always" :body-style="bodyStyle">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>图标按钮</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-button type="primary" icon="el-icon-edit"></e-button>
|
||||
<e-button type="primary" icon="el-icon-share"></e-button>
|
||||
<e-button type="primary" icon="el-icon-delete"></e-button>
|
||||
<e-button type="primary" icon="el-icon-search">搜索</e-button>
|
||||
<e-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></e-button>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 按钮组 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always" :body-style="bodyStyle">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>按钮组</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-button-group>
|
||||
<e-button type="primary" icon="el-icon-arrow-left">上一页</e-button>
|
||||
<e-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></e-button>
|
||||
</e-button-group>
|
||||
<e-button-group>
|
||||
<e-button type="primary" icon="el-icon-edit"></e-button>
|
||||
<e-button type="primary" icon="el-icon-share"></e-button>
|
||||
<e-button type="primary" icon="el-icon-delete"></e-button>
|
||||
</e-button-group>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 加载中 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always" :body-style="bodyStyle">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>加载中</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-button type="primary" :loading="true">加载中</e-button>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 不同尺寸 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always" :body-style="bodyStyle">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>不同尺寸</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-row>
|
||||
<e-button>默认按钮</e-button>
|
||||
<e-button size="medium">中等按钮</e-button>
|
||||
<e-button size="small">小型按钮</e-button>
|
||||
<e-button size="mini">超小按钮</e-button>
|
||||
</e-row>
|
||||
<e-row>
|
||||
<e-button round>默认按钮</e-button>
|
||||
<e-button size="medium" round>中等按钮</e-button>
|
||||
<e-button size="small" round>小型按钮</e-button>
|
||||
<e-button size="mini" round>超小按钮</e-button>
|
||||
</e-row>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-card .el-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.el-row{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,419 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基本用法</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="block">
|
||||
<!-- <e-button @click="getCheckedNodes('cascader')">getCheckedNodes</e-button> -->
|
||||
<span class="demonstration">默认 click 触发子菜单</span>
|
||||
<e-cascader
|
||||
ref="cascader"
|
||||
v-model="value"
|
||||
:options="options"
|
||||
@change="handleChange"></e-cascader>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">hover 触发子菜单</span>
|
||||
<e-cascader
|
||||
v-model="value"
|
||||
:options="options"
|
||||
:props="{ expandTrigger: 'hover' }"
|
||||
@change="handleChange"></e-cascader>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>禁用选项</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-cascader :options="options"></e-cascader>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>可清空</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-cascader :options="options" clearable></e-cascader>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>仅显示最后一级</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-cascader :options="options" :show-all-levels="false"></e-cascader>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>多选</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="block">
|
||||
<span class="demonstration">默认显示所有Tag</span>
|
||||
<e-cascader
|
||||
:options="options2"
|
||||
:props="props"
|
||||
clearable></e-cascader>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">折叠展示Tag</span>
|
||||
<e-cascader
|
||||
:options="options2"
|
||||
:props="props"
|
||||
collapse-tags
|
||||
clearable></e-cascader>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>选择任意一级选项</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="block">
|
||||
<span class="demonstration">单选选择任意一级选项</span>
|
||||
<e-cascader
|
||||
:options="options"
|
||||
:props="{ checkStrictly: true }"
|
||||
clearable></e-cascader>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">多选选择任意一级选项</span>
|
||||
<e-cascader
|
||||
:options="options"
|
||||
:props="{ multiple: true, checkStrictly: true }"
|
||||
clearable></e-cascader>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>动态加载</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-cascader :props="props"></e-cascader>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
let id = 0;
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
props: {
|
||||
multiple: true,
|
||||
lazy: true,
|
||||
lazyLoad (node, resolve) {
|
||||
const { level } = node;
|
||||
setTimeout(() => {
|
||||
const nodes = Array.from({ length: level + 1 })
|
||||
.map(item => ({
|
||||
value: ++id,
|
||||
label: `选项${id}`,
|
||||
leaf: level >= 2
|
||||
}));
|
||||
// 通过调用resolve将子节点数据返回，通知组件数据加载完成
|
||||
resolve(nodes);
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
options2: [{
|
||||
value: 1,
|
||||
label: '东南',
|
||||
children: [{
|
||||
value: 2,
|
||||
label: '上海',
|
||||
children: [
|
||||
{ value: 3, label: '普陀' },
|
||||
{ value: 4, label: '黄埔' },
|
||||
{ value: 5, label: '徐汇' }
|
||||
]
|
||||
}, {
|
||||
value: 7,
|
||||
label: '江苏',
|
||||
children: [
|
||||
{ value: 8, label: '南京' },
|
||||
{ value: 9, label: '苏州' },
|
||||
{ value: 10, label: '无锡' }
|
||||
]
|
||||
}, {
|
||||
value: 12,
|
||||
label: '浙江',
|
||||
children: [
|
||||
{ value: 13, label: '杭州' },
|
||||
{ value: 14, label: '宁波' },
|
||||
{ value: 15, label: '嘉兴' }
|
||||
]
|
||||
}]
|
||||
}, {
|
||||
value: 17,
|
||||
label: '西北',
|
||||
children: [{
|
||||
value: 18,
|
||||
label: '陕西',
|
||||
children: [
|
||||
{ value: 19, label: '西安' },
|
||||
{ value: 20, label: '延安' }
|
||||
]
|
||||
}, {
|
||||
value: 21,
|
||||
label: '新疆维吾尔族自治区',
|
||||
children: [
|
||||
{ value: 22, label: '乌鲁木齐' },
|
||||
{ value: 23, label: '克拉玛依' }
|
||||
]
|
||||
}]
|
||||
}],
|
||||
value: [],
|
||||
options: [{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '设计原则',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '一致'
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: '反馈'
|
||||
}, {
|
||||
value: 'xiaolv',
|
||||
label: '效率'
|
||||
}, {
|
||||
value: 'kekong',
|
||||
label: '可控'
|
||||
}]
|
||||
}, {
|
||||
value: 'daohang',
|
||||
label: '导航',
|
||||
children: [{
|
||||
value: 'cexiangdaohang',
|
||||
label: '侧向导航'
|
||||
}, {
|
||||
value: 'dingbudaohang',
|
||||
label: '顶部导航'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [{
|
||||
value: 'basic',
|
||||
label: 'Basic',
|
||||
children: [{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
}, {
|
||||
value: 'color',
|
||||
label: 'Color 色彩'
|
||||
}, {
|
||||
value: 'typography',
|
||||
label: 'Typography 字体'
|
||||
}, {
|
||||
value: 'icon',
|
||||
label: 'Icon 图标'
|
||||
}, {
|
||||
value: 'button',
|
||||
label: 'Button 按钮'
|
||||
}]
|
||||
}, {
|
||||
value: 'form',
|
||||
label: 'Form',
|
||||
children: [{
|
||||
value: 'radio',
|
||||
label: 'Radio 单选框'
|
||||
}, {
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox 多选框'
|
||||
}, {
|
||||
value: 'input',
|
||||
label: 'Input 输入框'
|
||||
}, {
|
||||
value: 'input-number',
|
||||
label: 'InputNumber 计数器'
|
||||
}, {
|
||||
value: 'select',
|
||||
label: 'Select 选择器'
|
||||
}, {
|
||||
value: 'cascader',
|
||||
label: 'Cascader 级联选择器'
|
||||
}, {
|
||||
value: 'switch',
|
||||
label: 'Switch 开关'
|
||||
}, {
|
||||
value: 'slider',
|
||||
label: 'Slider 滑块'
|
||||
}, {
|
||||
value: 'time-picker',
|
||||
label: 'TimePicker 时间选择器'
|
||||
}, {
|
||||
value: 'date-picker',
|
||||
label: 'DatePicker 日期选择器'
|
||||
}, {
|
||||
value: 'datetime-picker',
|
||||
label: 'DateTimePicker 日期时间选择器'
|
||||
}, {
|
||||
value: 'upload',
|
||||
label: 'Upload 上传'
|
||||
}, {
|
||||
value: 'rate',
|
||||
label: 'Rate 评分'
|
||||
}, {
|
||||
value: 'form',
|
||||
label: 'Form 表单'
|
||||
}]
|
||||
}, {
|
||||
value: 'data',
|
||||
label: 'Data',
|
||||
children: [{
|
||||
value: 'table',
|
||||
label: 'Table 表格'
|
||||
}, {
|
||||
value: 'tag',
|
||||
label: 'Tag 标签'
|
||||
}, {
|
||||
value: 'progress',
|
||||
label: 'Progress 进度条'
|
||||
}, {
|
||||
value: 'tree',
|
||||
label: 'Tree 树形控件'
|
||||
}, {
|
||||
value: 'pagination',
|
||||
label: 'Pagination 分页'
|
||||
}, {
|
||||
value: 'badge',
|
||||
label: 'Badge 标记'
|
||||
}]
|
||||
}, {
|
||||
value: 'notice',
|
||||
label: 'Notice',
|
||||
children: [{
|
||||
value: 'alert',
|
||||
label: 'Alert 警告'
|
||||
}, {
|
||||
value: 'loading',
|
||||
label: 'Loading 加载'
|
||||
}, {
|
||||
value: 'message',
|
||||
label: 'Message 消息提示'
|
||||
}, {
|
||||
value: 'message-box',
|
||||
label: 'MessageBox 弹框'
|
||||
}, {
|
||||
value: 'notification',
|
||||
label: 'Notification 通知'
|
||||
}]
|
||||
}, {
|
||||
value: 'navigation',
|
||||
label: 'Navigation',
|
||||
children: [{
|
||||
value: 'menu',
|
||||
label: 'NavMenu 导航菜单'
|
||||
}, {
|
||||
value: 'tabs',
|
||||
label: 'Tabs 标签页'
|
||||
}, {
|
||||
value: 'breadcrumb',
|
||||
label: 'Breadcrumb 面包屑'
|
||||
}, {
|
||||
value: 'dropdown',
|
||||
label: 'Dropdown 下拉菜单'
|
||||
}, {
|
||||
value: 'steps',
|
||||
label: 'Steps 步骤条'
|
||||
}]
|
||||
}, {
|
||||
value: 'others',
|
||||
label: 'Others',
|
||||
children: [{
|
||||
value: 'dialog',
|
||||
label: 'Dialog 对话框'
|
||||
}, {
|
||||
value: 'tooltip',
|
||||
label: 'Tooltip 文字提示'
|
||||
}, {
|
||||
value: 'popover',
|
||||
label: 'Popover 弹出框'
|
||||
}, {
|
||||
value: 'card',
|
||||
label: 'Card 卡片'
|
||||
}, {
|
||||
value: 'carousel',
|
||||
label: 'Carousel 走马灯'
|
||||
}, {
|
||||
value: 'collapse',
|
||||
label: 'Collapse 折叠面板'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
value: 'ziyuan',
|
||||
label: '资源',
|
||||
children: [{
|
||||
value: 'axure',
|
||||
label: 'Axure Components'
|
||||
}, {
|
||||
value: 'sketch',
|
||||
label: 'Sketch Templates'
|
||||
}, {
|
||||
value: 'jiaohu',
|
||||
label: '组件交互文档'
|
||||
}]
|
||||
}]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
},
|
||||
getCheckedNodes(value){
|
||||
console.info("测试数据：：：：",this.$refs[value].getCheckedNodes())
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-card .el-col{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<!-- 基本用法 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基本用法</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-checkbox v-model="checked">备选项</e-checkbox>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 禁用状态 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>禁用状态</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-checkbox v-model="checked1" disabled>备选项1</e-checkbox>
|
||||
<e-checkbox v-model="checked2" disabled>备选项</e-checkbox>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 多选框组 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>多选框组</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-checkbox-group v-model="checkList">
|
||||
<e-checkbox label="复选框 A"></e-checkbox>
|
||||
<e-checkbox label="复选框 B"></e-checkbox>
|
||||
<e-checkbox label="复选框 C"></e-checkbox>
|
||||
<e-checkbox label="禁用" disabled></e-checkbox>
|
||||
<e-checkbox label="选中且禁用" disabled></e-checkbox>
|
||||
</e-checkbox-group>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>indeterminate 状态</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</e-checkbox>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<e-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
||||
<e-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</e-checkbox>
|
||||
</e-checkbox-group>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>可选项目数量的限制</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-checkbox-group
|
||||
v-model="checkedCities1"
|
||||
:min="1"
|
||||
:max="2">
|
||||
<e-checkbox v-for="city in cities1" :label="city" :key="city">{{city}}</e-checkbox>
|
||||
</e-checkbox-group>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>按钮样式</span>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<e-checkbox-group v-model="checkboxGroup1">
|
||||
<e-checkbox-button v-for="city in cities2" :label="city" :key="city">{{city}}</e-checkbox-button>
|
||||
</e-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<e-checkbox-group v-model="checkboxGroup2" size="medium">
|
||||
<e-checkbox-button v-for="city in cities2" :label="city" :key="city">{{city}}</e-checkbox-button>
|
||||
</e-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<e-checkbox-group v-model="checkboxGroup3" size="small">
|
||||
<e-checkbox-button v-for="city in cities2" :label="city" :disabled="city === '北京'" :key="city">{{city}}</e-checkbox-button>
|
||||
</e-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<e-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
|
||||
<e-checkbox-button v-for="city in cities2" :label="city" :key="city">{{city}}</e-checkbox-button>
|
||||
</e-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>带边框</span>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<e-checkbox v-model="checked2" label="备选项1" border></e-checkbox>
|
||||
<e-checkbox v-model="checked3" label="备选项2" border></e-checkbox>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<e-checkbox v-model="checked4" label="备选项1" border size="medium"></e-checkbox>
|
||||
<e-checkbox v-model="checked5" label="备选项2" border size="medium"></e-checkbox>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<e-checkbox-group v-model="checkboxGroup2" size="small">
|
||||
<e-checkbox label="备选项1" border></e-checkbox>
|
||||
<e-checkbox label="备选项2" border disabled></e-checkbox>
|
||||
</e-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<e-checkbox-group v-model="checkboxGroup3" size="mini" disabled>
|
||||
<e-checkbox label="备选项1" border></e-checkbox>
|
||||
<e-checkbox label="备选项2" border></e-checkbox>
|
||||
</e-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const cityOptions = ['上海', '北京', '广州', '深圳'];
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
checked: true,
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
checkList: ['选中且禁用','复选框 A'],
|
||||
checkAll: false,
|
||||
checkedCities: ['上海', '北京'],
|
||||
cities: cityOptions,
|
||||
isIndeterminate: true,
|
||||
checkedCities1: ['上海', '北京'],
|
||||
cities1: cityOptions,
|
||||
checkboxGroup1: ['上海'],
|
||||
checkboxGroup2: ['上海'],
|
||||
checkboxGroup3: ['上海'],
|
||||
checkboxGroup4: ['上海'],
|
||||
cities2: cityOptions,
|
||||
checked1: true,
|
||||
checked3: false,
|
||||
checked4: false,
|
||||
checked5: true,
|
||||
checkboxGroup2: [],
|
||||
checkboxGroup3: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
handleCheckAllChange(val) {
|
||||
this.checkedCities = val ? cityOptions : [];
|
||||
this.isIndeterminate = false;
|
||||
},
|
||||
handleCheckedCitiesChange(value) {
|
||||
let checkedCount = value.length;
|
||||
this.checkAll = checkedCount === this.cities.length;
|
||||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-card .el-col{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基本用法</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="block">
|
||||
<span class="demonstration">有默认值</span>
|
||||
<e-color-picker v-model="color1"></e-color-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">无默认值</span>
|
||||
<e-color-picker v-model="color2"></e-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 选择透明度 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>选择透明度</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-color-picker v-model="color" show-alpha></e-color-picker>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 预定义颜色 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>预定义颜色</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-color-picker
|
||||
v-model="color"
|
||||
show-alpha
|
||||
:predefine="predefineColors">
|
||||
</e-color-picker>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 不同尺寸 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>不同尺寸</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="block">
|
||||
<e-color-picker v-model="color3"></e-color-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<e-color-picker v-model="color3" size="medium"></e-color-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<e-color-picker v-model="color3" size="small"></e-color-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<e-color-picker v-model="color3" size="mini"></e-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
color1: '#409EFF',
|
||||
color2: null,
|
||||
color: 'rgba(19, 206, 102, 0.8)',
|
||||
color3: '#409EFF',
|
||||
predefineColors: [
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
'rgba(255, 69, 0, 0.68)',
|
||||
'rgb(255, 120, 0)',
|
||||
'hsv(51, 100, 98)',
|
||||
'hsva(120, 40, 94, 0.5)',
|
||||
'hsl(181, 100%, 37%)',
|
||||
'hsla(209, 100%, 56%, 0.73)',
|
||||
'#c7158577'
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-card .el-col{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always" :body-style="bodyStyle">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>常见页面布局</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-container direction="vertical">
|
||||
<e-header>Header</e-header>
|
||||
<e-main>Main</e-main>
|
||||
</e-container>
|
||||
|
||||
<e-container direction="vertical">
|
||||
<e-header>Header</e-header>
|
||||
<e-main>Main</e-main>
|
||||
<e-footer>Footer</e-footer>
|
||||
</e-container>
|
||||
|
||||
<e-container direction="horizontal">
|
||||
<e-aside width="200px">Aside</e-aside>
|
||||
<e-main>Main</e-main>
|
||||
</e-container>
|
||||
|
||||
<e-container direction="vertical">
|
||||
<e-header>Header</e-header>
|
||||
<e-container direction="horizontal">
|
||||
<e-aside width="200px">Aside</e-aside>
|
||||
<e-main>Main</e-main>
|
||||
</e-container>
|
||||
</e-container>
|
||||
|
||||
<e-container direction="vertical">
|
||||
<e-header>Header</e-header>
|
||||
<e-container direction="horizontal">
|
||||
<e-aside width="200px">Aside</e-aside>
|
||||
<e-container direction="vertical">
|
||||
<e-main>Main</e-main>
|
||||
<e-footer>Footer</e-footer>
|
||||
</e-container>
|
||||
</e-container>
|
||||
</e-container>
|
||||
|
||||
<e-container direction="horizontal">
|
||||
<e-aside width="200px">Aside</e-aside>
|
||||
<e-container direction="vertical">
|
||||
<e-header>Header</e-header>
|
||||
<e-main>Main</e-main>
|
||||
</e-container>
|
||||
</e-container>
|
||||
|
||||
<e-container direction="horizontal">
|
||||
<e-aside width="200px">Aside</e-aside>
|
||||
<e-container direction="vertical">
|
||||
<e-header>Header</e-header>
|
||||
<e-main>Main</e-main>
|
||||
<e-footer>Footer</e-footer>
|
||||
</e-container>
|
||||
</e-container>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>响应式布局</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-container style="height: 500px; border: 1px solid #eee" direction="horizontal">
|
||||
<e-aside width="200px" style="background-color: rgb(238, 241, 246)">
|
||||
<e-menu :default-openeds="['1', '3']">
|
||||
<e-submenu index="1">
|
||||
<template slot="title"><i class="el-icon-message"></i>导航一</template>
|
||||
<e-menu-item-group>
|
||||
<template slot="title">分组一</template>
|
||||
<e-menu-item index="1-1">选项1</e-menu-item>
|
||||
<e-menu-item index="1-2">选项2</e-menu-item>
|
||||
</e-menu-item-group>
|
||||
<e-menu-item-group title="分组2">
|
||||
<e-menu-item index="1-3">选项3</e-menu-item>
|
||||
</e-menu-item-group>
|
||||
<e-submenu index="1-4">
|
||||
<template slot="title">选项4</template>
|
||||
<e-menu-item index="1-4-1">选项4-1</e-menu-item>
|
||||
</e-submenu>
|
||||
</e-submenu>
|
||||
<e-submenu index="2">
|
||||
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
|
||||
<e-menu-item-group>
|
||||
<template slot="title">分组一</template>
|
||||
<e-menu-item index="2-1">选项1</e-menu-item>
|
||||
<e-menu-item index="2-2">选项2</e-menu-item>
|
||||
</e-menu-item-group>
|
||||
<e-menu-item-group title="分组2">
|
||||
<e-menu-item index="2-3">选项3</e-menu-item>
|
||||
</e-menu-item-group>
|
||||
<e-submenu index="2-4">
|
||||
<template slot="title">选项4</template>
|
||||
<e-menu-item index="2-4-1">选项4-1</e-menu-item>
|
||||
</e-submenu>
|
||||
</e-submenu>
|
||||
<e-submenu index="3">
|
||||
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
|
||||
<e-menu-item-group>
|
||||
<template slot="title">分组一</template>
|
||||
<e-menu-item index="3-1">选项1</e-menu-item>
|
||||
<e-menu-item index="3-2">选项2</e-menu-item>
|
||||
</e-menu-item-group>
|
||||
<e-menu-item-group title="分组2">
|
||||
<e-menu-item index="3-3">选项3</e-menu-item>
|
||||
</e-menu-item-group>
|
||||
<e-submenu index="3-4">
|
||||
<template slot="title">选项4</template>
|
||||
<e-menu-item index="3-4-1">选项4-1</e-menu-item>
|
||||
</e-submenu>
|
||||
</e-submenu>
|
||||
</e-menu>
|
||||
</e-aside>
|
||||
|
||||
<e-container direction="vertical">
|
||||
<e-header style="text-align: right; font-size: 12px">
|
||||
<e-dropdown>
|
||||
<i class="el-icon-setting" style="margin-right: 15px"></i>
|
||||
<e-dropdown-menu slot="dropdown">
|
||||
<e-dropdown-item>查看</e-dropdown-item>
|
||||
<e-dropdown-item>新增</e-dropdown-item>
|
||||
<e-dropdown-item>删除</e-dropdown-item>
|
||||
</e-dropdown-menu>
|
||||
</e-dropdown>
|
||||
<span>王小虎</span>
|
||||
</e-header>
|
||||
|
||||
<e-main>
|
||||
<e-table :data="tableData">
|
||||
<e-table-column prop="date" label="日期" width="140">
|
||||
</e-table-column>
|
||||
<e-table-column prop="name" label="姓名" width="120">
|
||||
</e-table-column>
|
||||
<e-table-column prop="address" label="地址">
|
||||
</e-table-column>
|
||||
</e-table>
|
||||
</e-main>
|
||||
</e-container>
|
||||
</e-container>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
const item = {
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
};
|
||||
return {
|
||||
tableData: Array(20).fill(item)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
.el-aside{
|
||||
padding: 0;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-card .el-col{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
/* 样式 */
|
||||
/* .el-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
flex-basis: auto;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
} */
|
||||
.el-header, .el-footer {
|
||||
background-color: #B3C0D1;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
background-color: #D3DCE6;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 200px;
|
||||
}
|
||||
|
||||
.el-header {
|
||||
background-color: #B3C0D1;
|
||||
color: #333;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
background-color: #E9EEF3;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 160px;
|
||||
}
|
||||
|
||||
body > .el-container {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(5) .el-aside,
|
||||
.el-container:nth-child(6) .el-aside {
|
||||
line-height: 260px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(7) .el-aside {
|
||||
line-height: 320px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<!-- 选择日 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>选择日</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="block">
|
||||
<span class="demonstration">默认</span>
|
||||
<e-date-picker
|
||||
v-model="value1"
|
||||
type="date"
|
||||
placeholder="选择日期">
|
||||
</e-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">带快捷选项</span>
|
||||
<e-date-picker
|
||||
v-model="value2"
|
||||
align="right"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
:picker-options="pickerOptions">
|
||||
</e-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 其他日期单位 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>其他日期单位</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="block">
|
||||
<span class="demonstration">周</span>
|
||||
<e-date-picker
|
||||
v-model="value3"
|
||||
type="week"
|
||||
format="yyyy 第 WW 周"
|
||||
placeholder="选择周">
|
||||
</e-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">月</span>
|
||||
<e-date-picker
|
||||
v-model="value4"
|
||||
type="month"
|
||||
placeholder="选择月">
|
||||
</e-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">年</span>
|
||||
<e-date-picker
|
||||
v-model="value5"
|
||||
type="year"
|
||||
placeholder="选择年">
|
||||
</e-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">多个日期</span>
|
||||
<e-date-picker
|
||||
type="dates"
|
||||
v-model="value6"
|
||||
placeholder="选择一个或多个日期">
|
||||
</e-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">多个月</span>
|
||||
<e-date-picker
|
||||
type="months"
|
||||
v-model="value7"
|
||||
placeholder="选择一个或多个月">
|
||||
</e-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">多个年</span>
|
||||
<e-date-picker
|
||||
type="years"
|
||||
v-model="value8"
|
||||
placeholder="选择一个或多个年">
|
||||
</e-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 选择日期范围 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>选择日期范围</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="block">
|
||||
<span class="demonstration">默认</span>
|
||||
<e-date-picker
|
||||
v-model="value9"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期">
|
||||
</e-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">带快捷选项</span>
|
||||
<e-date-picker
|
||||
v-model="value10"
|
||||
type="daterange"
|
||||
align="right"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:picker-options="pickerOptions1">
|
||||
</e-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 选择月份范围 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>选择月份范围</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="block">
|
||||
<span class="demonstration">默认</span>
|
||||
<e-date-picker
|
||||
v-model="value11"
|
||||
type="monthrange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始月份"
|
||||
end-placeholder="结束月份">
|
||||
</e-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">带快捷选项</span>
|
||||
<e-date-picker
|
||||
v-model="value12"
|
||||
type="monthrange"
|
||||
align="right"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始月份"
|
||||
end-placeholder="结束月份"
|
||||
:picker-options="pickerOptions3">
|
||||
</e-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
shortcuts: [{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value4: '',
|
||||
value5: '',
|
||||
value6: '',
|
||||
value7: '',
|
||||
value8: '',
|
||||
pickerOptions1: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value9: '',
|
||||
value10: '',
|
||||
pickerOptions3: {
|
||||
shortcuts: [{
|
||||
text: '本月',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', [new Date(), new Date()]);
|
||||
}
|
||||
}, {
|
||||
text: '今年至今',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date(new Date().getFullYear(), 0);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近六个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setMonth(start.getMonth() - 6);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value11: '',
|
||||
value12: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-card .el-col{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<!-- 日期和时间点 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>日期和时间点</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="block">
|
||||
<span class="demonstration">默认</span>
|
||||
<e-date-picker
|
||||
v-model="value1"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间">
|
||||
</e-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">带快捷选项</span>
|
||||
<e-date-picker
|
||||
v-model="value2"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
align="right"
|
||||
:picker-options="pickerOptions">
|
||||
</e-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">设置默认时间</span>
|
||||
<e-date-picker
|
||||
v-model="value3"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
default-time="12:00:00">
|
||||
</e-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 日期和时间范围 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>日期和时间范围</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="block">
|
||||
<span class="demonstration">默认</span>
|
||||
<e-date-picker
|
||||
v-model="value4"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期">
|
||||
</e-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">带快捷选项</span>
|
||||
<e-date-picker
|
||||
v-model="value5"
|
||||
type="datetimerange"
|
||||
:picker-options="pickerOptions1"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
align="right">
|
||||
</e-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 默认的起始与结束时刻 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>默认的起始与结束时刻</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="block">
|
||||
<span class="demonstration">起始日期时刻为 12:00:00</span>
|
||||
<e-date-picker
|
||||
v-model="value6"
|
||||
type="datetimerange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="['12:00:00']">
|
||||
</e-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span>
|
||||
<e-date-picker
|
||||
v-model="value7"
|
||||
type="datetimerange"
|
||||
align="right"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="['12:00:00', '08:00:00']">
|
||||
</e-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
pickerOptions1: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
||||
value5: '',
|
||||
value6: '',
|
||||
value7: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-card .el-col{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
</style>
|
||||
+579
@@ -0,0 +1,579 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基础</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-form :model="form" label-width="80px">
|
||||
<e-form-item label="活动名称">
|
||||
<el-input v-model="form.name" />
|
||||
</e-form-item>
|
||||
<e-form-item label="活动区域">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai" />
|
||||
<el-option label="区域二" value="beijing" />
|
||||
</el-select>
|
||||
</e-form-item>
|
||||
<e-form-item label="活动时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker
|
||||
v-model="form.date1"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker
|
||||
v-model="form.date2"
|
||||
placeholder="选择时间"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</el-col>
|
||||
</e-form-item>
|
||||
<e-form-item label="即时配送">
|
||||
<el-switch v-model="form.delivery" />
|
||||
</e-form-item>
|
||||
<e-form-item label="活动性质">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="美食/餐厅线上活动" name="type" />
|
||||
<el-checkbox label="地推活动" name="type" />
|
||||
<el-checkbox label="线下主题活动" name="type" />
|
||||
<el-checkbox label="单纯品牌曝光" name="type" />
|
||||
</el-checkbox-group>
|
||||
</e-form-item>
|
||||
<e-form-item label="特殊资源">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="线上品牌商赞助" />
|
||||
<el-radio label="线下场地免费" />
|
||||
</el-radio-group>
|
||||
</e-form-item>
|
||||
<e-form-item label="活动形式">
|
||||
<el-input v-model="form.desc" type="textarea" />
|
||||
</e-form-item>
|
||||
<e-form-item>
|
||||
<e-button type="primary" @click="onSubmit">立即创建</e-button>
|
||||
<e-button>取消</e-button>
|
||||
</e-form-item>
|
||||
</e-form>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>行内表单</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||
<e-form-item label="审批人">
|
||||
<el-input v-model="formInline.user" placeholder="审批人" />
|
||||
</e-form-item>
|
||||
<e-form-item label="活动区域">
|
||||
<el-select v-model="formInline.region" placeholder="活动区域">
|
||||
<el-option label="区域一" value="shanghai" />
|
||||
<el-option label="区域二" value="beijing" />
|
||||
</el-select>
|
||||
</e-form-item>
|
||||
<e-form-item>
|
||||
<e-button type="primary" @click="onSubmit">查询</e-button>
|
||||
</e-form-item>
|
||||
</e-form>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>表单验证</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-form
|
||||
ref="ruleForm"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
method-type="validate"
|
||||
label-width="100px"
|
||||
class="demo-ruleForm"
|
||||
>
|
||||
<e-form-item label="活动名称" prop="name">
|
||||
<el-input v-model="ruleForm.name" />
|
||||
</e-form-item>
|
||||
<e-form-item label="活动区域" prop="region">
|
||||
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai" />
|
||||
<el-option label="区域二" value="beijing" />
|
||||
</el-select>
|
||||
</e-form-item>
|
||||
<e-form-item label="活动时间" required>
|
||||
<el-col :span="11">
|
||||
<e-form-item prop="date1">
|
||||
<el-date-picker
|
||||
v-model="ruleForm.date1"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</e-form-item>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<e-form-item prop="date2">
|
||||
<el-time-picker
|
||||
v-model="ruleForm.date2"
|
||||
placeholder="选择时间"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</e-form-item>
|
||||
</el-col>
|
||||
</e-form-item>
|
||||
<e-form-item label="即时配送" prop="delivery">
|
||||
<el-switch v-model="ruleForm.delivery" />
|
||||
</e-form-item>
|
||||
<e-form-item label="活动性质" prop="type">
|
||||
<el-checkbox-group v-model="ruleForm.type">
|
||||
<el-checkbox label="美食/餐厅线上活动" name="type" />
|
||||
<el-checkbox label="地推活动" name="type" />
|
||||
<el-checkbox label="线下主题活动" name="type" />
|
||||
<el-checkbox label="单纯品牌曝光" name="type" />
|
||||
</el-checkbox-group>
|
||||
</e-form-item>
|
||||
<e-form-item label="特殊资源" prop="resource">
|
||||
<el-radio-group v-model="ruleForm.resource">
|
||||
<el-radio label="线上品牌商赞助" />
|
||||
<el-radio label="线下场地免费" />
|
||||
</el-radio-group>
|
||||
</e-form-item>
|
||||
<e-form-item label="活动形式" prop="desc">
|
||||
<el-input v-model="ruleForm.desc" type="textarea" />
|
||||
</e-form-item>
|
||||
<e-form-item>
|
||||
<e-button type="primary" @click="submitForm('ruleForm')">立即创建</e-button>
|
||||
<e-button @click="resetForm('ruleForm')">重置</e-button>
|
||||
</e-form-item>
|
||||
</e-form>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>对齐方式</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-radio-group v-model="labelPosition" size="small">
|
||||
<el-radio-button label="left">左对齐</el-radio-button>
|
||||
<el-radio-button label="right">右对齐</el-radio-button>
|
||||
<el-radio-button label="top">顶部对齐</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div style="margin: 20px;" />
|
||||
<e-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
|
||||
<e-form-item label="名称">
|
||||
<el-input v-model="formLabelAlign.name" />
|
||||
</e-form-item>
|
||||
<e-form-item label="活动区域">
|
||||
<el-input v-model="formLabelAlign.region" />
|
||||
</e-form-item>
|
||||
<e-form-item label="活动形式">
|
||||
<el-input v-model="formLabelAlign.type" />
|
||||
</e-form-item>
|
||||
</e-form>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>自定义校验规则</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-form
|
||||
ref="ruleForm"
|
||||
:model="ruleForm1"
|
||||
status-icon
|
||||
:rules="rules1"
|
||||
label-width="100px"
|
||||
class="demo-ruleForm"
|
||||
>
|
||||
<e-form-item label="密码" prop="pass">
|
||||
<el-input v-model="ruleForm1.pass" type="password" autocomplete="off" />
|
||||
</e-form-item>
|
||||
<e-form-item label="确认密码" prop="checkPass">
|
||||
<el-input v-model="ruleForm1.checkPass" type="password" autocomplete="off" />
|
||||
</e-form-item>
|
||||
<e-form-item label="年龄" prop="age">
|
||||
<el-input v-model.number="ruleForm1.age" />
|
||||
</e-form-item>
|
||||
<e-form-item>
|
||||
<e-button type="primary" @click="submitForm('ruleForm')">提交</e-button>
|
||||
<e-button @click="resetForm('ruleForm')">重置</e-button>
|
||||
</e-form-item>
|
||||
</e-form>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>动态增减表单项</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-form
|
||||
ref="dynamicValidateForm"
|
||||
:model="dynamicValidateForm"
|
||||
label-width="100px"
|
||||
class="demo-dynamic"
|
||||
>
|
||||
<e-form-item
|
||||
prop="email"
|
||||
label="邮箱"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
|
||||
]"
|
||||
>
|
||||
<el-input v-model="dynamicValidateForm.email" />
|
||||
</e-form-item>
|
||||
<e-form-item
|
||||
v-for="(domain, index) in dynamicValidateForm.domains"
|
||||
:key="domain.key"
|
||||
:label="'域名' + index"
|
||||
:prop="'domains.' + index + '.value'"
|
||||
:rules="{
|
||||
required: true, message: '域名不能为空', trigger: 'blur'
|
||||
}"
|
||||
>
|
||||
<el-input v-model="domain.value" /><e-button
|
||||
@click.prevent="removeDomain(domain)"
|
||||
>删除</e-button>
|
||||
</e-form-item>
|
||||
<e-form-item>
|
||||
<e-button type="primary" @click="submitForm('dynamicValidateForm')">提交</e-button>
|
||||
<e-button @click="addDomain">新增域名</e-button>
|
||||
<e-button @click="resetForm('dynamicValidateForm')">重置</e-button>
|
||||
</e-form-item>
|
||||
</e-form>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>数字类型验证</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-form
|
||||
ref="numberValidateForm"
|
||||
:model="numberValidateForm"
|
||||
label-width="100px"
|
||||
class="demo-ruleForm"
|
||||
>
|
||||
<e-form-item
|
||||
label="年龄"
|
||||
prop="age"
|
||||
:rules="[
|
||||
{ required: true, message: '年龄不能为空' },
|
||||
{ type: 'number', message: '年龄必须为数字值' }
|
||||
]"
|
||||
>
|
||||
<el-input v-model.number="numberValidateForm.age" autocomplete="off" />
|
||||
</e-form-item>
|
||||
<e-form-item>
|
||||
<el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
|
||||
<el-button @click="resetForm('numberValidateForm')">重置</el-button>
|
||||
</e-form-item>
|
||||
</e-form>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="10" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>表单内组件尺寸控制</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-form ref="form" :model="sizeForm" label-width="80px" size="mini">
|
||||
<e-form-item label="活动名称">
|
||||
<el-input v-model="sizeForm.name" />
|
||||
</e-form-item>
|
||||
<e-form-item label="活动区域">
|
||||
<el-select v-model="sizeForm.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai" />
|
||||
<el-option label="区域二" value="beijing" />
|
||||
</el-select>
|
||||
</e-form-item>
|
||||
<e-form-item label="活动时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker
|
||||
v-model="sizeForm.date1"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker
|
||||
v-model="sizeForm.date2"
|
||||
placeholder="选择时间"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</el-col>
|
||||
</e-form-item>
|
||||
<e-form-item label="活动性质">
|
||||
<el-checkbox-group v-model="sizeForm.type">
|
||||
<el-checkbox-button label="美食/餐厅线上活动" name="type" />
|
||||
<el-checkbox-button label="地推活动" name="type" />
|
||||
<el-checkbox-button label="线下主题活动" name="type" />
|
||||
</el-checkbox-group>
|
||||
</e-form-item>
|
||||
<e-form-item label="特殊资源">
|
||||
<el-radio-group v-model="sizeForm.resource" size="medium">
|
||||
<el-radio border label="线上品牌商赞助" />
|
||||
<el-radio border label="线下场地免费" />
|
||||
</el-radio-group>
|
||||
</e-form-item>
|
||||
<e-form-item size="large">
|
||||
<el-button type="primary" @click="onSubmit">立即创建</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</e-form-item>
|
||||
</e-form>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
var checkAge = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('年龄不能为空'))
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (!Number.isInteger(value)) {
|
||||
callback(new Error('请输入数字值'))
|
||||
} else {
|
||||
if (value < 18) {
|
||||
callback(new Error('必须年满18岁'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
var validatePass = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入密码'))
|
||||
} else {
|
||||
if (this.ruleForm.checkPass !== '') {
|
||||
this.$refs.ruleForm.validateField('checkPass')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
var validatePass2 = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入密码'))
|
||||
} else if (value !== this.ruleForm.pass) {
|
||||
callback(new Error('两次输入密码不一致!'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
ruleForm1: {
|
||||
pass: '',
|
||||
checkPass: '',
|
||||
age: ''
|
||||
},
|
||||
numberValidateForm: {
|
||||
age: ''
|
||||
},
|
||||
sizeForm: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
rules1: {
|
||||
pass: [
|
||||
{ validator: validatePass, trigger: 'blur' }
|
||||
],
|
||||
checkPass: [
|
||||
{ validator: validatePass2, trigger: 'blur' }
|
||||
],
|
||||
age: [
|
||||
{ validator: checkAge, trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formInline: {
|
||||
user: '',
|
||||
region: ''
|
||||
},
|
||||
dynamicValidateForm: {
|
||||
domains: [{
|
||||
value: ''
|
||||
}],
|
||||
email: ''
|
||||
},
|
||||
ruleForm: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入活动名称', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
|
||||
],
|
||||
region: [
|
||||
{ required: true, message: '请选择活动区域', trigger: 'change' }
|
||||
],
|
||||
date1: [
|
||||
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
|
||||
],
|
||||
date2: [
|
||||
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
|
||||
],
|
||||
type: [
|
||||
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
|
||||
],
|
||||
resource: [
|
||||
{ required: true, message: '请选择活动资源', trigger: 'change' }
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: '请填写活动形式', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
labelPosition: 'right',
|
||||
formLabelAlign: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!')
|
||||
},
|
||||
submitForm(formRef) {
|
||||
this.$refs[formRef].validate(valid => {
|
||||
if (valid) alert('submit')
|
||||
else alert('submit error!')
|
||||
})
|
||||
// this.$refs[formRef].validateField('name');
|
||||
},
|
||||
resetForm(formRef) {
|
||||
this.$refs[formRef].resetFields()
|
||||
// this.$refs[formRef].clearValidate();
|
||||
},
|
||||
removeDomain(item) {
|
||||
var index = this.dynamicValidateForm.domains.indexOf(item)
|
||||
if (index !== -1) {
|
||||
this.dynamicValidateForm.domains.splice(index, 1)
|
||||
}
|
||||
},
|
||||
addDomain() {
|
||||
this.dynamicValidateForm.domains.push({
|
||||
value: '',
|
||||
key: Date.now()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-card .el-col{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
/* width: 400px; */
|
||||
}
|
||||
|
||||
.top {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.left .e-tooltip__popper,
|
||||
.right .e-tooltip__popper {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||||
width: 200px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.e-table .warning-row {
|
||||
background: oldlace;
|
||||
}
|
||||
|
||||
.e-table .success-row {
|
||||
background: #f0f9eb;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基本用法</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-Icon class="el-icon-video-camera-solid marginLeft" />
|
||||
<e-Icon class="el-icon-camera-solid marginLeft" />
|
||||
<e-Icon class="el-icon-s-platform marginLeft" />
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-card .el-col{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
</style>
|
||||
+598
@@ -0,0 +1,598 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<!-- 基本用法 -->
|
||||
<e-col
|
||||
:span="12"
|
||||
class="box-card"
|
||||
>
|
||||
<e-card shadow="always">
|
||||
<div
|
||||
slot="header"
|
||||
class="clearfix"
|
||||
>
|
||||
<span>基本用法</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-input
|
||||
v-model="input"
|
||||
placeholder="请输入内容"
|
||||
/>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 禁用状态 -->
|
||||
<e-col
|
||||
:span="12"
|
||||
class="box-card"
|
||||
>
|
||||
<e-card shadow="always">
|
||||
<div
|
||||
slot="header"
|
||||
class="clearfix"
|
||||
>
|
||||
<span>禁用状态</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-input
|
||||
v-model="input2"
|
||||
placeholder="请输入内容"
|
||||
:disabled="true"
|
||||
/>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 可清空 -->
|
||||
<e-col
|
||||
:span="12"
|
||||
class="box-card"
|
||||
>
|
||||
<e-card shadow="always">
|
||||
<div
|
||||
slot="header"
|
||||
class="clearfix"
|
||||
>
|
||||
<span>可清空</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-input
|
||||
v-model="input3"
|
||||
placeholder="请输入内容"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 密码框 -->
|
||||
<e-col
|
||||
:span="12"
|
||||
class="box-card"
|
||||
>
|
||||
<e-card shadow="always">
|
||||
<div
|
||||
slot="header"
|
||||
class="clearfix"
|
||||
>
|
||||
<span>密码框</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-input
|
||||
v-model="input4"
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
/>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 文本域 -->
|
||||
<e-col
|
||||
:span="24"
|
||||
class="box-card"
|
||||
>
|
||||
<e-card shadow="always">
|
||||
<div
|
||||
slot="header"
|
||||
class="clearfix"
|
||||
>
|
||||
<span>文本域</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-input
|
||||
v-model="textarea"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
placeholder="请输入内容"
|
||||
/>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 带 icon 的输入框 -->
|
||||
<e-col
|
||||
:span="24"
|
||||
class="box-card"
|
||||
>
|
||||
<e-card shadow="always">
|
||||
<div
|
||||
slot="header"
|
||||
class="clearfix"
|
||||
>
|
||||
<span>带 icon 的输入框</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demo-input-suffix">
|
||||
属性方式：
|
||||
<e-input
|
||||
v-model="input5"
|
||||
placeholder="请选择日期"
|
||||
suffix-icon="el-icon-date"
|
||||
/>
|
||||
<e-input
|
||||
v-model="input6"
|
||||
placeholder="请输入内容"
|
||||
prefix-icon="el-icon-search"
|
||||
/>
|
||||
</div>
|
||||
<div class="demo-input-suffix">
|
||||
slot 方式：
|
||||
<e-input
|
||||
v-model="input7"
|
||||
placeholder="请选择日期"
|
||||
>
|
||||
<i
|
||||
slot="suffix"
|
||||
class="e-input__icon el-icon-date"
|
||||
/>
|
||||
</e-input>
|
||||
<e-input
|
||||
v-model="input8"
|
||||
placeholder="请输入内容"
|
||||
>
|
||||
<i
|
||||
slot="prefix"
|
||||
class="e-input__icon el-icon-search"
|
||||
/>
|
||||
</e-input>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
|
||||
<!-- 可自适应文本高度的文本域 -->
|
||||
<e-col
|
||||
:span="24"
|
||||
class="box-card"
|
||||
>
|
||||
<e-card shadow="always">
|
||||
<div
|
||||
slot="header"
|
||||
class="clearfix"
|
||||
>
|
||||
<span>可自适应文本高度的文本域</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-input
|
||||
v-model="textarea1"
|
||||
type="textarea"
|
||||
autosize
|
||||
placeholder="请输入内容"
|
||||
/>
|
||||
<div style="margin: 20px 0;" />
|
||||
<e-input
|
||||
v-model="textarea2"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 4}"
|
||||
placeholder="请输入内容"
|
||||
/>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 复合型输入框 -->
|
||||
<e-col
|
||||
:span="24"
|
||||
class="box-card"
|
||||
>
|
||||
<e-card shadow="always">
|
||||
<div
|
||||
slot="header"
|
||||
class="clearfix"
|
||||
>
|
||||
<span>复合型输入框</span>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<e-input
|
||||
v-model="input9"
|
||||
placeholder="请输入内容"
|
||||
>
|
||||
<template slot="prepend">Http://</template>
|
||||
</e-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<e-input
|
||||
v-model="input10"
|
||||
placeholder="请输入内容"
|
||||
>
|
||||
<template slot="append">.com</template>
|
||||
</e-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<e-input
|
||||
v-model="input11"
|
||||
placeholder="请输入内容"
|
||||
class="input-with-select"
|
||||
>
|
||||
<e-select
|
||||
slot="prepend"
|
||||
v-model="select"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<e-option
|
||||
label="餐厅名"
|
||||
value="1"
|
||||
/>
|
||||
<e-option
|
||||
label="订单号"
|
||||
value="2"
|
||||
/>
|
||||
<e-option
|
||||
label="用户电话"
|
||||
value="3"
|
||||
/>
|
||||
</e-select>
|
||||
<e-button
|
||||
slot="append"
|
||||
icon="el-icon-search"
|
||||
/>
|
||||
</e-input>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 尺寸 -->
|
||||
<e-col
|
||||
:span="24"
|
||||
class="box-card"
|
||||
>
|
||||
<e-card shadow="always">
|
||||
<div
|
||||
slot="header"
|
||||
class="clearfix"
|
||||
>
|
||||
<span>尺寸</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="demo-input-size">
|
||||
<div class="block">
|
||||
<e-input
|
||||
v-model="input12"
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-date"
|
||||
/>
|
||||
</div>
|
||||
<div class="block">
|
||||
<e-input
|
||||
v-model="input13"
|
||||
size="medium"
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-date"
|
||||
/>
|
||||
</div>
|
||||
<div class="block">
|
||||
<e-input
|
||||
v-model="input14"
|
||||
size="small"
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-date"
|
||||
/>
|
||||
</div>
|
||||
<div class="block">
|
||||
<e-input
|
||||
v-model="input15"
|
||||
size="mini"
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-date"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 带输入建议 -->
|
||||
<e-col
|
||||
:span="24"
|
||||
class="box-card"
|
||||
>
|
||||
<e-card shadow="always">
|
||||
<div
|
||||
slot="header"
|
||||
class="clearfix"
|
||||
>
|
||||
<span>带输入建议</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-row class="demo-autocomplete">
|
||||
<e-col :span="12">
|
||||
<div class="sub-title">激活即列出输入建议</div>
|
||||
<e-autocomplete
|
||||
v-model="state1"
|
||||
class="inline-input"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="请输入内容"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
</e-col>
|
||||
<e-col :span="12">
|
||||
<div class="sub-title">输入后匹配输入建议</div>
|
||||
<e-autocomplete
|
||||
v-model="state2"
|
||||
class="inline-input"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="请输入内容"
|
||||
:trigger-on-focus="false"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 自定义模板 -->
|
||||
<e-col
|
||||
:span="12"
|
||||
class="box-card"
|
||||
>
|
||||
<e-card shadow="always">
|
||||
<div
|
||||
slot="header"
|
||||
class="clearfix"
|
||||
>
|
||||
<span>自定义模板</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-autocomplete
|
||||
v-model="state"
|
||||
popper-class="my-autocomplete"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="请输入内容"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<i
|
||||
slot="suffix"
|
||||
class="el-icon-edit e-input__icon"
|
||||
@click="handleIconClick"
|
||||
/>
|
||||
<template slot-scope="{ item }">
|
||||
<div class="name">{{ item.value }}</div>
|
||||
<span class="addr">{{ item.address }}</span>
|
||||
</template>
|
||||
</e-autocomplete>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 远程搜索 -->
|
||||
<e-col
|
||||
:span="12"
|
||||
class="box-card"
|
||||
>
|
||||
<e-card shadow="always">
|
||||
<div
|
||||
slot="header"
|
||||
class="clearfix"
|
||||
>
|
||||
<span>远程搜索</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-autocomplete
|
||||
v-model="state"
|
||||
:fetch-suggestions="querySearchAsync"
|
||||
placeholder="请输入内容"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 输入长度限制 -->
|
||||
<e-col
|
||||
:span="24"
|
||||
class="box-card"
|
||||
>
|
||||
<e-card shadow="always">
|
||||
<div
|
||||
slot="header"
|
||||
class="clearfix"
|
||||
>
|
||||
<span>输入长度限制</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-input
|
||||
v-model="text"
|
||||
type="text"
|
||||
placeholder="请输入内容"
|
||||
maxlength="10"
|
||||
show-word-limit
|
||||
/>
|
||||
<div style="margin: 20px 0;" />
|
||||
<e-input
|
||||
v-model="textarea"
|
||||
type="textarea"
|
||||
placeholder="请输入内容"
|
||||
maxlength="30"
|
||||
show-word-limit
|
||||
/>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
input: '',
|
||||
input2: '',
|
||||
input3: '',
|
||||
input4: '',
|
||||
input5: '',
|
||||
input6: '',
|
||||
input7: '',
|
||||
input8: '',
|
||||
textarea: '',
|
||||
textarea1: '',
|
||||
textarea2: '',
|
||||
input9: '',
|
||||
input10: '',
|
||||
input11: '',
|
||||
select: '',
|
||||
input12: '',
|
||||
input13: '',
|
||||
input14: '',
|
||||
input15: '',
|
||||
restaurants: [],
|
||||
state1: '',
|
||||
state2: '',
|
||||
state: '',
|
||||
timeout: null,
|
||||
text: '',
|
||||
textarea: '',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.restaurants = this.loadAll();
|
||||
},
|
||||
methods: {
|
||||
querySearch(queryString, cb) {
|
||||
var restaurants = this.restaurants;
|
||||
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
||||
// 调用 callback 返回建议列表的数据
|
||||
cb(results);
|
||||
},
|
||||
createFilter(queryString) {
|
||||
return (restaurant) => {
|
||||
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
querySearchAsync(queryString, cb) {
|
||||
var restaurants = this.restaurants;
|
||||
var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
|
||||
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
cb(results);
|
||||
}, 3000 * Math.random());
|
||||
},
|
||||
createStateFilter(queryString) {
|
||||
return (state) => {
|
||||
return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
handleIconClick(ev) {
|
||||
console.log(ev);
|
||||
},
|
||||
loadAll() {
|
||||
return [
|
||||
{ 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
|
||||
{ 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
|
||||
{ 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
|
||||
{ 'value': '泷千家(天山西路店)', 'address': '天山西路438号' },
|
||||
{ 'value': '胖仙女纸杯蛋糕（上海凌空店）', 'address': '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
|
||||
{ 'value': '贡茶', 'address': '上海市长宁区金钟路633号' },
|
||||
{ 'value': '豪大大香鸡排超级奶爸', 'address': '上海市嘉定区曹安公路曹安路1685号' },
|
||||
{ 'value': '茶芝兰（奶茶，手抓饼）', 'address': '上海市普陀区同普路1435号' },
|
||||
{ 'value': '十二泷町', 'address': '上海市北翟路1444弄81号B幢-107' },
|
||||
{ 'value': '星移浓缩咖啡', 'address': '上海市嘉定区新郁路817号' },
|
||||
{ 'value': '阿姨奶茶/豪大大', 'address': '嘉定区曹安路1611号' },
|
||||
{ 'value': '新麦甜四季甜品炸鸡', 'address': '嘉定区曹安公路2383弄55号' },
|
||||
{ 'value': 'Monica摩托主题咖啡店', 'address': '嘉定区江桥镇曹安公路2409号1F，2383弄62号1F' },
|
||||
{ 'value': '浮生若茶（凌空soho店）', 'address': '上海长宁区金钟路968号9号楼地下一层' },
|
||||
{ 'value': 'NONO JUICE 鲜榨果汁', 'address': '上海市长宁区天山西路119号' },
|
||||
{ 'value': 'CoCo都可(北新泾店）', 'address': '上海市长宁区仙霞西路' },
|
||||
{ 'value': '快乐柠檬（神州智慧店）', 'address': '上海市长宁区天山西路567号1层R117号店铺' },
|
||||
{ 'value': 'Merci Paul cafe', 'address': '上海市普陀区光复西路丹巴路28弄6号楼819' },
|
||||
{ 'value': '猫山王（西郊百联店）', 'address': '上海市长宁区仙霞西路88号第一层G05-F01-1-306' },
|
||||
{ 'value': '枪会山', 'address': '上海市普陀区棕榈路' },
|
||||
{ 'value': '纵食', 'address': '元丰天山花园(东门) 双流路267号' },
|
||||
{ 'value': '钱记', 'address': '上海市长宁区天山西路' },
|
||||
{ 'value': '壹杯加', 'address': '上海市长宁区通协路' },
|
||||
{ 'value': '唦哇嘀咖', 'address': '上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元' },
|
||||
{ 'value': '爱茜茜里(西郊百联)', 'address': '长宁区仙霞西路88号1305室' },
|
||||
{ 'value': '爱茜茜里(近铁广场)', 'address': '上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺' },
|
||||
{ 'value': '鲜果榨汁（金沙江路和美广店）', 'address': '普陀区金沙江路2239号金沙和美广场B1-10-6' },
|
||||
{ 'value': '开心丽果（缤谷店）', 'address': '上海市长宁区威宁路天山路341号' },
|
||||
{ 'value': '超级鸡车（丰庄路店）', 'address': '上海市嘉定区丰庄路240号' },
|
||||
{ 'value': '妙生活果园（北新泾店）', 'address': '长宁区新渔路144号' },
|
||||
{ 'value': '香宜度麻辣香锅', 'address': '长宁区淞虹路148号' },
|
||||
{ 'value': '凡仔汉堡（老真北路店）', 'address': '上海市普陀区老真北路160号' },
|
||||
{ 'value': '港式小铺', 'address': '上海市长宁区金钟路968号15楼15-105室' },
|
||||
{ 'value': '蜀香源麻辣香锅（剑河路店）', 'address': '剑河路443-1' },
|
||||
{ 'value': '北京饺子馆', 'address': '长宁区北新泾街道天山西路490-1号' },
|
||||
{ 'value': '饭典*新简餐（凌空SOHO店）', 'address': '上海市长宁区金钟路968号9号楼地下一层9-83室' },
|
||||
{ 'value': '焦耳·川式快餐（金钟路店）', 'address': '上海市金钟路633号地下一层甲部' },
|
||||
{ 'value': '动力鸡车', 'address': '长宁区仙霞西路299弄3号101B' },
|
||||
{ 'value': '浏阳蒸菜', 'address': '天山西路430号' },
|
||||
{ 'value': '四海游龙（天山西路店）', 'address': '上海市长宁区天山西路' },
|
||||
{ 'value': '樱花食堂（凌空店）', 'address': '上海市长宁区金钟路968号15楼15-105室' },
|
||||
{ 'value': '壹分米客家传统调制米粉(天山店)', 'address': '天山西路428号' },
|
||||
{ 'value': '福荣祥烧腊（平溪路店）', 'address': '上海市长宁区协和路福泉路255弄57-73号' },
|
||||
{ 'value': '速记黄焖鸡米饭', 'address': '上海市长宁区北新泾街道金钟路180号1层01号摊位' },
|
||||
{ 'value': '红辣椒麻辣烫', 'address': '上海市长宁区天山西路492号' },
|
||||
{ 'value': '(小杨生煎)西郊百联餐厅', 'address': '长宁区仙霞西路88号百联2楼' },
|
||||
{ 'value': '阳阳麻辣烫', 'address': '天山西路389号' },
|
||||
{ 'value': '南拳妈妈龙虾盖浇饭', 'address': '普陀区金沙江路1699号鑫乐惠美食广场A13' },
|
||||
];
|
||||
},
|
||||
handleSelect(item) {
|
||||
console.log(item);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.box-card .el-col{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.e-select .e-input {
|
||||
width: 130px;
|
||||
}
|
||||
.input-with-select .e-input-group__prepend {
|
||||
background-color: #fff;
|
||||
}
|
||||
.my-autocomplete {
|
||||
li {
|
||||
line-height: normal;
|
||||
padding: 7px;
|
||||
|
||||
.name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.addr {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
|
||||
.highlighted .addr {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基本用法</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></e-input-number>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>禁用状态</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-input-number v-model="num1" :disabled="true"></e-input-number>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>步数</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-input-number v-model="num2" :step="2"></e-input-number>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>严格步数</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-input-number v-model="num3" :step="2" step-strictly></e-input-number>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>精度</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-input-number v-model="num4" :precision="2" :step="0.1" :max="10"></e-input-number>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>尺寸</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="block">
|
||||
<e-input-number v-model="num5"></e-input-number>
|
||||
</div>
|
||||
<div class="block">
|
||||
<e-input-number size="medium" v-model="num6"></e-input-number>
|
||||
</div>
|
||||
<div class="block">
|
||||
<e-input-number size="small" v-model="num7"></e-input-number>
|
||||
</div>
|
||||
<div class="block">
|
||||
<e-input-number size="mini" v-model="num8"></e-input-number>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>按钮位置</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-input-number v-model="num9" controls-position="right" @change="handleChange" :min="1" :max="10"></e-input-number>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
num: 1,
|
||||
num1:1,
|
||||
num2:5,
|
||||
num3:2,
|
||||
num4:1,
|
||||
num5: 1,
|
||||
num6: 1,
|
||||
num7: 1,
|
||||
num8: 1,
|
||||
num9: 1,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-card .el-col{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always" :body-style="bodyStyle">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基础布局</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-row>
|
||||
<e-col :span="24">
|
||||
<div class="grid-content bg-purple-dark"></div>
|
||||
</e-col>
|
||||
</e-row>
|
||||
<e-row>
|
||||
<e-col :span="12">
|
||||
<div class="grid-content bg-purple"></div>
|
||||
</e-col>
|
||||
<e-col :span="12">
|
||||
<div class="grid-content bg-purple-light"></div>
|
||||
</e-col>
|
||||
</e-row>
|
||||
<e-row>
|
||||
<e-col :span="8">
|
||||
<div class="grid-content bg-purple"></div>
|
||||
</e-col>
|
||||
<e-col :span="8">
|
||||
<div class="grid-content bg-purple-light"></div>
|
||||
</e-col>
|
||||
<e-col :span="8">
|
||||
<div class="grid-content bg-purple"></div>
|
||||
</e-col>
|
||||
</e-row>
|
||||
<e-row>
|
||||
<e-col :span="6">
|
||||
<div class="grid-content bg-purple"></div>
|
||||
</e-col>
|
||||
<e-col :span="6">
|
||||
<div class="grid-content bg-purple-light"></div>
|
||||
</e-col>
|
||||
<e-col :span="6">
|
||||
<div class="grid-content bg-purple"></div>
|
||||
</e-col>
|
||||
<e-col :span="6">
|
||||
<div class="grid-content bg-purple-light"></div>
|
||||
</e-col>
|
||||
</e-row>
|
||||
<e-row>
|
||||
<e-col :span="4">
|
||||
<div class="grid-content bg-purple"></div>
|
||||
</e-col>
|
||||
<e-col :span="4">
|
||||
<div class="grid-content bg-purple-light"></div>
|
||||
</e-col>
|
||||
<e-col :span="4">
|
||||
<div class="grid-content bg-purple"></div>
|
||||
</e-col>
|
||||
<e-col :span="4">
|
||||
<div class="grid-content bg-purple-light"></div>
|
||||
</e-col>
|
||||
<e-col :span="4">
|
||||
<div class="grid-content bg-purple"></div>
|
||||
</e-col>
|
||||
<e-col :span="4">
|
||||
<div class="grid-content bg-purple-light"></div>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>分栏间隔</span>
|
||||
</div>
|
||||
<e-row :gutter="20">
|
||||
<e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
|
||||
<e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
|
||||
<e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
|
||||
<e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
|
||||
</e-row>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>混合布局</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-row :gutter="20">
|
||||
<e-col :span="16"><div class="grid-content bg-purple"></div></e-col>
|
||||
<e-col :span="8"><div class="grid-content bg-purple"></div></e-col>
|
||||
</e-row>
|
||||
<e-row :gutter="20">
|
||||
<e-col :span="8"><div class="grid-content bg-purple"></div></e-col>
|
||||
<e-col :span="8"><div class="grid-content bg-purple"></div></e-col>
|
||||
<e-col :span="4"><div class="grid-content bg-purple"></div></e-col>
|
||||
<e-col :span="4"><div class="grid-content bg-purple"></div></e-col>
|
||||
</e-row>
|
||||
<e-row :gutter="20">
|
||||
<e-col :span="4"><div class="grid-content bg-purple"></div></e-col>
|
||||
<e-col :span="16"><div class="grid-content bg-purple"></div></e-col>
|
||||
<e-col :span="4"><div class="grid-content bg-purple"></div></e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>分栏偏移</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-row :gutter="20">
|
||||
<e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
|
||||
<e-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></e-col>
|
||||
</e-row>
|
||||
<e-row :gutter="20">
|
||||
<e-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></e-col>
|
||||
<e-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></e-col>
|
||||
</e-row>
|
||||
<e-row :gutter="20">
|
||||
<e-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>对齐方式</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-row type="flex" class="row-bg">
|
||||
<e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
|
||||
<e-col :span="6"><div class="grid-content bg-purple-light"></div></e-col>
|
||||
<e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
|
||||
</e-row>
|
||||
<e-row type="flex" class="row-bg" justify="center">
|
||||
<e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
|
||||
<e-col :span="6"><div class="grid-content bg-purple-light"></div></e-col>
|
||||
<e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
|
||||
</e-row>
|
||||
<e-row type="flex" class="row-bg" justify="end">
|
||||
<e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
|
||||
<e-col :span="6"><div class="grid-content bg-purple-light"></div></e-col>
|
||||
<e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
|
||||
</e-row>
|
||||
<e-row type="flex" class="row-bg" justify="space-between">
|
||||
<e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
|
||||
<e-col :span="6"><div class="grid-content bg-purple-light"></div></e-col>
|
||||
<e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
|
||||
</e-row>
|
||||
<e-row type="flex" class="row-bg" justify="space-around">
|
||||
<e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
|
||||
<e-col :span="6"><div class="grid-content bg-purple-light"></div></e-col>
|
||||
<e-col :span="6"><div class="grid-content bg-purple"></div></e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>响应式布局</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-row :gutter="10">
|
||||
<e-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></e-col>
|
||||
<e-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></e-col>
|
||||
<e-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></e-col>
|
||||
<e-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
bodyStyle: {
|
||||
minHeight: '308px',
|
||||
minWidth: '368px'
|
||||
},
|
||||
circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
|
||||
squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
|
||||
sizeList: ['large', 'medium', 'small'],
|
||||
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
|
||||
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
errorHandler() {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-card .el-col{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.e-row {
|
||||
margin-bottom: 20px;
|
||||
/* &:last-child {
|
||||
margin-bottom: 0;
|
||||
} */
|
||||
}
|
||||
.e-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基本用法</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-link href="https://element.eleme.io" target="_blank">默认链接</e-link>
|
||||
<e-link type="primary">主要链接</e-link>
|
||||
<e-link type="success">成功链接</e-link>
|
||||
<e-link type="warning">警告链接</e-link>
|
||||
<e-link type="danger">危险链接</e-link>
|
||||
<e-link type="info">信息链接</e-link>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>禁用状态</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-link disabled>默认链接</e-link>
|
||||
<e-link type="primary" disabled>主要链接</e-link>
|
||||
<e-link type="success" disabled>成功链接</e-link>
|
||||
<e-link type="warning" disabled>警告链接</e-link>
|
||||
<e-link type="danger" disabled>危险链接</e-link>
|
||||
<e-link type="info" disabled>信息链接</e-link>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>下划线</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-link :underline="false">无下划线</e-link>
|
||||
<e-link>有下划线</e-link>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>图标</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-link icon="el-icon-edit">编辑</e-link>
|
||||
<e-link>查看<i class="el-icon-view el-icon--right"></i> </e-link>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-card .el-col{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
</style>
|
||||
+160
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基本用法</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-radio v-model="radio" label="1" @change="change">备选项</e-radio>
|
||||
<e-radio v-model="radio" label="2" @change="change">备选项</e-radio>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>禁用状态</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-radio disabled v-model="radio1" label="禁用">备选项</e-radio>
|
||||
<e-radio disabled v-model="radio1" label="选中且禁用">备选项</e-radio>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>单选框组</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-radio-group v-model="radio2">
|
||||
<e-radio :label="3">备选项</e-radio>
|
||||
<e-radio :label="6">备选项</e-radio>
|
||||
<e-radio :label="9">备选项</e-radio>
|
||||
</e-radio-group>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>按钮样式</span>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<e-radio-group v-model="radio3">
|
||||
<e-radio-button label="上海"></e-radio-button>
|
||||
<e-radio-button label="北京"></e-radio-button>
|
||||
<e-radio-button label="广州"></e-radio-button>
|
||||
<e-radio-button label="深圳"></e-radio-button>
|
||||
</e-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<e-radio-group v-model="radio4" size="medium">
|
||||
<e-radio-button label="上海" ></e-radio-button>
|
||||
<e-radio-button label="北京"></e-radio-button>
|
||||
<e-radio-button label="广州"></e-radio-button>
|
||||
<e-radio-button label="深圳"></e-radio-button>
|
||||
</e-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<e-radio-group v-model="radio5" size="small">
|
||||
<e-radio-button label="上海"></e-radio-button>
|
||||
<e-radio-button label="北京" disabled ></e-radio-button>
|
||||
<e-radio-button label="广州"></e-radio-button>
|
||||
<e-radio-button label="深圳"></e-radio-button>
|
||||
</e-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<e-radio-group v-model="radio6" disabled size="mini">
|
||||
<e-radio-button label="上海"></e-radio-button>
|
||||
<e-radio-button label="北京"></e-radio-button>
|
||||
<e-radio-button label="广州"></e-radio-button>
|
||||
<e-radio-button label="深圳"></e-radio-button>
|
||||
</e-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>带有边框</span>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<e-radio v-model="radio7" label="1" border>备选项1</e-radio>
|
||||
<e-radio v-model="radio7" label="2" border>备选项2</e-radio>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<e-radio v-model="radio8" label="1" border size="medium">备选项1</e-radio>
|
||||
<e-radio v-model="radio8" label="2" border size="medium">备选项2</e-radio>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<e-radio-group v-model="radio9" size="small">
|
||||
<e-radio label="1" border>备选项1</e-radio>
|
||||
<e-radio label="2" border disabled>备选项2</e-radio>
|
||||
</e-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<e-radio-group v-model="radio10" size="mini" disabled>
|
||||
<e-radio label="1" border>备选项1</e-radio>
|
||||
<e-radio label="2" border>备选项2</e-radio>
|
||||
</e-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
radio: '1',
|
||||
radio1: '选中且禁用',
|
||||
radio2: 3,
|
||||
radio3: '上海',
|
||||
radio4: '上海',
|
||||
radio5: '上海',
|
||||
radio6: '上海',
|
||||
radio7: '1',
|
||||
radio8: '1',
|
||||
radio9: '1',
|
||||
radio10: '1'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
change(e){
|
||||
console.info("切换:::::",e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-card .el-col{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
</style>
|
||||
+114
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基本用法</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="block">
|
||||
<span class="demonstration">默认不区分颜色</span>
|
||||
<e-rate v-model="value1"></e-rate>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">区分颜色</span>
|
||||
<e-rate
|
||||
v-model="value2"
|
||||
:colors="colors">
|
||||
</e-rate>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 辅助文字 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>辅助文字</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-rate
|
||||
v-model="value"
|
||||
show-text>
|
||||
</e-rate>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 其它 icon -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>其它 icon</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-rate
|
||||
v-model="value"
|
||||
:icon-classes="iconClasses"
|
||||
void-icon-class="icon-rate-face-off"
|
||||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
|
||||
</el-rate>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 只读 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>只读</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-rate
|
||||
v-model="value4"
|
||||
disabled
|
||||
show-score
|
||||
text-color="#ff9900"
|
||||
score-template="{value}">
|
||||
</e-rate>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
value: null,
|
||||
value1: null,
|
||||
value2: null,
|
||||
value3: null,
|
||||
value4: 3.7,
|
||||
iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'], // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
|
||||
colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-card .el-col{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,385 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<!-- 基本用法 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基本用法</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-select v-model="value" placeholder="请选择">
|
||||
<e-option
|
||||
ref="select1"
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</e-option>
|
||||
</e-select>
|
||||
<!-- <e-button @click="clickFocus('select1')">测试</e-button> -->
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 有禁用选项 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>有禁用选项</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-select v-model="value1" placeholder="请选择">
|
||||
<e-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled">
|
||||
</e-option>
|
||||
</e-select>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 禁用状态 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>禁用状态</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-select v-model="value2" disabled placeholder="请选择">
|
||||
<e-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</e-option>
|
||||
</e-select>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 可清空单选 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>可清空单选</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-select v-model="value4" clearable placeholder="请选择">
|
||||
<e-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</e-option>
|
||||
</e-select>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 基础多选 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基础多选</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="block">
|
||||
<e-select v-model="value5" multiple placeholder="请选择">
|
||||
<e-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</e-option>
|
||||
</e-select>
|
||||
</div>
|
||||
<div class="block">
|
||||
<e-select
|
||||
v-model="value6"
|
||||
multiple
|
||||
collapse-tags
|
||||
style="margin-left: 20px;"
|
||||
placeholder="请选择">
|
||||
<e-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</e-option>
|
||||
</e-select>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 自定义模板 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>自定义模板</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-select v-model="value7" placeholder="请选择">
|
||||
<e-option
|
||||
v-for="item in cities"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
<span style="float: left">{{ item.label }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
|
||||
</e-option>
|
||||
</e-select>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 分组 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>分组</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-select v-model="value8" placeholder="请选择">
|
||||
<e-option-group
|
||||
v-for="group in options1"
|
||||
:key="group.label"
|
||||
:label="group.label">
|
||||
<e-option
|
||||
v-for="item in group.options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</e-option>
|
||||
</e-option-group>
|
||||
</e-select>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 可搜索 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>可搜索</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-select v-model="value9" filterable placeholder="请选择">
|
||||
<e-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</e-option>
|
||||
</e-select>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 远程搜索 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>远程搜索</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-select
|
||||
v-model="value10"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="请输入关键词"
|
||||
:remote-method="remoteMethod"
|
||||
:loading="loading">
|
||||
<e-option
|
||||
v-for="item in options3"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</e-option>
|
||||
</e-select>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 创建条目 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>创建条目</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-select
|
||||
v-model="value11"
|
||||
multiple
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
placeholder="请选择文章标签">
|
||||
<e-option
|
||||
v-for="item in options4"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</e-option>
|
||||
</e-select>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '双皮奶',
|
||||
disabled: true
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
cities: [{
|
||||
value: 'Beijing',
|
||||
label: '北京'
|
||||
}, {
|
||||
value: 'Shanghai',
|
||||
label: '上海'
|
||||
}, {
|
||||
value: 'Nanjing',
|
||||
label: '南京'
|
||||
}, {
|
||||
value: 'Chengdu',
|
||||
label: '成都'
|
||||
}, {
|
||||
value: 'Shenzhen',
|
||||
label: '深圳'
|
||||
}, {
|
||||
value: 'Guangzhou',
|
||||
label: '广州'
|
||||
}],
|
||||
value: '',
|
||||
value1: '',
|
||||
value2: '',
|
||||
value4: '',
|
||||
value5: [],
|
||||
value6: [],
|
||||
value7: '',
|
||||
options1: [{
|
||||
label: '热门城市',
|
||||
options: [{
|
||||
value: 'Shanghai',
|
||||
label: '上海'
|
||||
}, {
|
||||
value: 'Beijing',
|
||||
label: '北京'
|
||||
}]
|
||||
}, {
|
||||
label: '城市名',
|
||||
options: [{
|
||||
value: 'Chengdu',
|
||||
label: '成都'
|
||||
}, {
|
||||
value: 'Shenzhen',
|
||||
label: '深圳'
|
||||
}, {
|
||||
value: 'Guangzhou',
|
||||
label: '广州'
|
||||
}, {
|
||||
value: 'Dalian',
|
||||
label: '大连'
|
||||
}]
|
||||
}],
|
||||
value8: '',
|
||||
value9: '',
|
||||
options3: [],
|
||||
value10: [],
|
||||
list: [],
|
||||
loading: false,
|
||||
states: ["Alabama", "Alaska", "Arizona",
|
||||
"Arkansas", "California", "Colorado",
|
||||
"Connecticut", "Delaware", "Florida",
|
||||
"Georgia", "Hawaii", "Idaho", "Illinois",
|
||||
"Indiana", "Iowa", "Kansas", "Kentucky",
|
||||
"Louisiana", "Maine", "Maryland",
|
||||
"Massachusetts", "Michigan", "Minnesota",
|
||||
"Mississippi", "Missouri", "Montana",
|
||||
"Nebraska", "Nevada", "New Hampshire",
|
||||
"New Jersey", "New Mexico", "New York",
|
||||
"North Carolina", "North Dakota", "Ohio",
|
||||
"Oklahoma", "Oregon", "Pennsylvania",
|
||||
"Rhode Island", "South Carolina",
|
||||
"South Dakota", "Tennessee", "Texas",
|
||||
"Utah", "Vermont", "Virginia",
|
||||
"Washington", "West Virginia", "Wisconsin",
|
||||
"Wyoming"],
|
||||
options4: [{
|
||||
value: 'HTML',
|
||||
label: 'HTML'
|
||||
}, {
|
||||
value: 'CSS',
|
||||
label: 'CSS'
|
||||
}, {
|
||||
value: 'JavaScript',
|
||||
label: 'JavaScript'
|
||||
}],
|
||||
value11: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.list = this.states.map(item => {
|
||||
return { value: `value:${item}`, label: `label:${item}` };
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
clickFocus(name){
|
||||
console.info("this:::::",this.$refs['select1'])
|
||||
this.$refs[name].focus()
|
||||
|
||||
},
|
||||
remoteMethod(query) {
|
||||
if (query !== '') {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.options3 = this.list.filter(item => {
|
||||
return item.label.toLowerCase()
|
||||
.indexOf(query.toLowerCase()) > -1;
|
||||
});
|
||||
}, 200);
|
||||
} else {
|
||||
this.options3 = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-card .el-col{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基本用法</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="">
|
||||
<span class="demonstration">默认</span>
|
||||
<e-slider v-model="value1"></e-slider>
|
||||
</div>
|
||||
<div class="">
|
||||
<span class="demonstration">自定义初始值</span>
|
||||
<e-slider v-model="value2"></e-slider>
|
||||
</div>
|
||||
<div class="">
|
||||
<span class="demonstration">隐藏 Tooltip</span>
|
||||
<e-slider v-model="value3" :show-tooltip="false"></e-slider>
|
||||
</div>
|
||||
<div class="">
|
||||
<span class="demonstration">格式化 Tooltip</span>
|
||||
<e-slider v-model="value4" :format-tooltip="formatTooltip"></e-slider>
|
||||
</div>
|
||||
<div class="">
|
||||
<span class="demonstration">禁用</span>
|
||||
<e-slider v-model="value5" disabled></e-slider>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 离散值 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>离散值</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="">
|
||||
<span class="demonstration">不显示间断点</span>
|
||||
<e-slider
|
||||
v-model="value6"
|
||||
:step="10">
|
||||
</e-slider>
|
||||
</div>
|
||||
<div class="">
|
||||
<span class="demonstration">显示间断点</span>
|
||||
<e-slider
|
||||
v-model="value7"
|
||||
:step="10"
|
||||
show-stops>
|
||||
</e-slider>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 带有输入框 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>带有输入框</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="">
|
||||
<e-slider
|
||||
v-model="value8"
|
||||
show-input>
|
||||
</e-slider>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 范围选择 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>范围选择</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="">
|
||||
<e-slider
|
||||
v-model="value9"
|
||||
range
|
||||
show-stops
|
||||
:max="10">
|
||||
</e-slider>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 竖向模式 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>竖向模式</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="">
|
||||
<e-slider
|
||||
v-model="value10"
|
||||
vertical
|
||||
height="200px">
|
||||
</e-slider>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 展示标记 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>展示标记</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="">
|
||||
<e-slider
|
||||
v-model="value11"
|
||||
range
|
||||
:marks="marks">
|
||||
</e-slider>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
value1: 0,
|
||||
value2: 50,
|
||||
value3: 36,
|
||||
value4: 48,
|
||||
value5: 42,
|
||||
value6: 0,
|
||||
value7: 0,
|
||||
value8: 0,
|
||||
value9: [4, 8],
|
||||
value10: 0,
|
||||
value11: [30, 60],
|
||||
marks: {
|
||||
0: '0°C',
|
||||
8: '8°C',
|
||||
37: '37°C',
|
||||
50: {
|
||||
style: {
|
||||
color: '#1989FA'
|
||||
},
|
||||
label: this.$createElement('strong', '50%')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
formatTooltip(val) {
|
||||
return val / 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-card .el-col{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<e-col :span="12" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基本用法</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-switch
|
||||
v-model="value"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949">
|
||||
</e-switch>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="12" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>文字描述</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-switch
|
||||
v-model="value1"
|
||||
active-text="按月付费"
|
||||
inactive-text="按年付费">
|
||||
</e-switch>
|
||||
<e-switch
|
||||
style="display: block"
|
||||
v-model="value2"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
active-text="按月付费"
|
||||
inactive-text="按年付费">
|
||||
</e-switch>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="12" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>扩展的 value 类型</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-tooltip :content="'Switch value: ' + value3" placement="top">
|
||||
<e-switch
|
||||
v-model="value3"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
active-value="100"
|
||||
inactive-value="0">
|
||||
</e-switch>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<e-col :span="12" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>禁用状态</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-switch
|
||||
v-model="value4"
|
||||
disabled>
|
||||
</e-switch>
|
||||
<e-switch
|
||||
v-model="value5"
|
||||
disabled>
|
||||
</e-switch>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
value: true,
|
||||
value1: true,
|
||||
value2: true,
|
||||
value3: '100',
|
||||
value4: true,
|
||||
value5: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-card .el-col{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<!-- 固定时间点 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>固定时间点</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-time-select
|
||||
v-model="value"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30'
|
||||
}"
|
||||
placeholder="选择时间">
|
||||
</e-time-select>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 任意时间点 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>任意时间点</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="block">
|
||||
<el-time-picker
|
||||
v-model="value1"
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
placeholder="任意时间点">
|
||||
</el-time-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<el-time-picker
|
||||
arrow-control
|
||||
v-model="value2"
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
placeholder="任意时间点">
|
||||
</el-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 固定时间范围 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>固定时间范围</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="block">
|
||||
<e-time-select
|
||||
placeholder="起始时间"
|
||||
v-model="startTime"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30'
|
||||
}">
|
||||
</e-time-select>
|
||||
</div>
|
||||
<div class="block">
|
||||
<e-time-select
|
||||
placeholder="结束时间"
|
||||
v-model="endTime"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30',
|
||||
minTime: startTime
|
||||
}">
|
||||
</e-time-select>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 任意时间范围 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>任意时间范围</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="block">
|
||||
<el-time-picker
|
||||
is-range
|
||||
v-model="value3"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
placeholder="选择时间范围">
|
||||
</el-time-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<el-time-picker
|
||||
is-range
|
||||
arrow-control
|
||||
v-model="value4"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
placeholder="选择时间范围">
|
||||
</el-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
value1: new Date(2016, 9, 10, 18, 40),
|
||||
value2: new Date(2016, 9, 10, 18, 40),
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
|
||||
value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-card .el-col{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基本用法</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-transfer v-model="value" :data="data"></e-transfer>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 可搜索 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>可搜索</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-transfer
|
||||
filterable
|
||||
:filter-method="filterMethod"
|
||||
filter-placeholder="请输入城市拼音"
|
||||
v-model="value2"
|
||||
:data="data2">
|
||||
</e-transfer>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 可自定义 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>可自定义</span>
|
||||
</div>
|
||||
<div>
|
||||
<p style="text-align: center; margin: 0 0 20px">使用 render-content 自定义数据项</p>
|
||||
<div style="text-align: center">
|
||||
<e-transfer
|
||||
style="text-align: left; display: inline-block"
|
||||
v-model="value3"
|
||||
filterable
|
||||
:left-default-checked="[2, 3]"
|
||||
:right-default-checked="[1]"
|
||||
:render-content="renderFunc3"
|
||||
:titles="['Source', 'Target']"
|
||||
:button-texts="['到左边', '到右边']"
|
||||
:format="{
|
||||
noChecked: '${total}',
|
||||
hasChecked: '${checked}/${total}'
|
||||
}"
|
||||
@change="handleChange"
|
||||
:data="data3">
|
||||
<el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
|
||||
<el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
|
||||
</e-transfer>
|
||||
</div>
|
||||
<p style="text-align: center; margin: 50px 0 20px">使用 scoped-slot 自定义数据项</p>
|
||||
<div style="text-align: center">
|
||||
<e-transfer
|
||||
style="text-align: left; display: inline-block"
|
||||
v-model="value4"
|
||||
filterable
|
||||
:left-default-checked="[2, 3]"
|
||||
:right-default-checked="[1]"
|
||||
:titles="['Source', 'Target']"
|
||||
:button-texts="['到左边', '到右边']"
|
||||
:format="{
|
||||
noChecked: '${total}',
|
||||
hasChecked: '${checked}/${total}'
|
||||
}"
|
||||
@change="handleChange"
|
||||
:data="data3">
|
||||
<span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
|
||||
<el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
|
||||
<el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
|
||||
</e-transfer>
|
||||
</div>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 数据项属性别名 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>数据项属性别名</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-transfer
|
||||
v-model="value5"
|
||||
:props="{
|
||||
key: 'value',
|
||||
label: 'desc'
|
||||
}"
|
||||
:data="data5">
|
||||
</e-transfer>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
const generateData = _ => {
|
||||
const data = [];
|
||||
for (let i = 1; i <= 15; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
label: `备选项 ${ i }`,
|
||||
disabled: i % 4 === 0
|
||||
});
|
||||
}
|
||||
return data;
|
||||
};
|
||||
const generateData2 = _ => {
|
||||
const data = [];
|
||||
const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
|
||||
const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
|
||||
cities.forEach((city, index) => {
|
||||
data.push({
|
||||
label: city,
|
||||
key: index,
|
||||
pinyin: pinyin[index]
|
||||
});
|
||||
});
|
||||
return data;
|
||||
};
|
||||
const generateData3 = _ => {
|
||||
const data = [];
|
||||
for (let i = 1; i <= 15; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
label: `备选项 ${ i }`,
|
||||
disabled: i % 4 === 0
|
||||
});
|
||||
}
|
||||
return data;
|
||||
};
|
||||
const generateData5 = _ => {
|
||||
const data = [];
|
||||
for (let i = 1; i <= 15; i++) {
|
||||
data.push({
|
||||
value: i,
|
||||
desc: `备选项 ${ i }`,
|
||||
disabled: i % 4 === 0
|
||||
});
|
||||
}
|
||||
return data;
|
||||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value: [1, 4],
|
||||
data2: generateData2(),
|
||||
value2: [],
|
||||
filterMethod(query, item) {
|
||||
return item.pinyin.indexOf(query) > -1;
|
||||
},
|
||||
data3: generateData3(),
|
||||
value3: [1],
|
||||
value4: [1],
|
||||
renderFunc3(h, option) {
|
||||
return <span>{ option.key } - { option.label }</span>;
|
||||
},
|
||||
data5: generateData5(),
|
||||
value5: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
handleChange(value, direction, movedKeys) {
|
||||
console.log(value, direction, movedKeys);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-card .el-col{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.transfer-footer {
|
||||
margin-left: 20px;
|
||||
padding: 6px 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,309 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<e-row :gutter="24">
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>点击上传</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-upload
|
||||
class="upload-demo"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-remove="beforeRemove"
|
||||
multiple
|
||||
:limit="3"
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="fileList">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" class="e-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</e-upload>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 用户头像上传 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>用户头像上传</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-upload
|
||||
class="avatar-uploader"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload">
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</e-upload>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 照片墙 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>照片墙</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-upload
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="handleRemove">
|
||||
<i class="el-icon-plus"></i>
|
||||
</e-upload>
|
||||
<el-dialog :visible.sync="dialogVisible">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 文件缩略图 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>文件缩略图</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-upload
|
||||
action="#"
|
||||
list-type="picture-card"
|
||||
:auto-upload="false">
|
||||
<i slot="default" class="el-icon-plus"></i>
|
||||
<div slot="file" slot-scope="{file}">
|
||||
<img
|
||||
class="e-upload-list__item-thumbnail"
|
||||
:src="file.url" alt=""
|
||||
>
|
||||
<span class="e-upload-list__item-actions">
|
||||
<span
|
||||
class="e-upload-list__item-preview"
|
||||
@click="handlePictureCardPreview(file)"
|
||||
>
|
||||
<i class="el-icon-zoom-in"></i>
|
||||
</span>
|
||||
<span
|
||||
v-if="!disabled"
|
||||
class="e-upload-list__item-delete"
|
||||
@click="handleDownload(file)"
|
||||
>
|
||||
<i class="el-icon-download"></i>
|
||||
</span>
|
||||
<span
|
||||
v-if="!disabled"
|
||||
class="e-upload-list__item-delete"
|
||||
@click="handleRemove(file)"
|
||||
>
|
||||
<i class="el-icon-delete"></i>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</e-upload>
|
||||
<el-dialog :visible.sync="dialogVisible1">
|
||||
<img width="100%" :src="dialogImageUrl1" alt="">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 图片列表缩略图 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>图片列表缩略图</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-upload
|
||||
class="upload-demo"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:file-list="fileList"
|
||||
list-type="picture">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" class="e-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</e-upload>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 上传文件列表控制 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>上传文件列表控制</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-upload
|
||||
class="upload-demo"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-change="handleChange"
|
||||
:file-list="fileList1">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" class="e-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</e-upload>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 拖拽上传 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>拖拽上传</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
multiple>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="e-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="e-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</e-upload>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
<!-- 手动上传 -->
|
||||
<e-col :span="24" class="box-card">
|
||||
<e-card shadow="always">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>手动上传</span>
|
||||
</div>
|
||||
<div>
|
||||
<e-upload
|
||||
class="upload-demo"
|
||||
ref="upload"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:file-list="fileList"
|
||||
:auto-upload="false">
|
||||
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
||||
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
|
||||
<div slot="tip" class="e-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</e-upload>
|
||||
</div>
|
||||
</e-card>
|
||||
</e-col>
|
||||
</e-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
|
||||
imageUrl: '',
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
dialogImageUrl1: '',
|
||||
dialogVisible1: false,
|
||||
disabled: false,
|
||||
fileList1: [{
|
||||
name: 'food.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
|
||||
}, {
|
||||
name: 'food2.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
|
||||
}]
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
submitUpload() {
|
||||
this.$refs.upload.submit();
|
||||
},
|
||||
handleChange(file, fileList) {
|
||||
this.fileList = fileList.slice(-3);
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
||||
},
|
||||
beforeRemove(file, fileList) {
|
||||
return this.$confirm(`确定移除 ${ file.name }？`);
|
||||
},
|
||||
handleAvatarSuccess(res, file) {
|
||||
this.imageUrl = URL.createObjectURL(file.raw);
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
const isJPG = file.type === 'image/jpeg';
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
|
||||
if (!isJPG) {
|
||||
this.$message.error('上传头像图片只能是 JPG 格式!');
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传头像图片大小不能超过 2MB!');
|
||||
}
|
||||
return isJPG && isLt2M;
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
handleDownload(file) {
|
||||
console.log(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.marginLeft {
|
||||
margin-left: 10px
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.box-card .el-col{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.avatar-uploader .e-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .e-upload:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,396 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="dialog = true"
|
||||
>点击打开 Dialog</el-button>
|
||||
|
||||
<el-dialog
|
||||
title="折叠表单"
|
||||
:visible.sync="dialog"
|
||||
width="630px"
|
||||
:modal-append-to-body="false"
|
||||
>
|
||||
<publicForm
|
||||
ref="publicForm"
|
||||
:form-arr="zdArr"
|
||||
:form-data="formData"
|
||||
@outOperation="outOperation"
|
||||
/>
|
||||
<span
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="setarr"
|
||||
>设置列表</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="setAttrs"
|
||||
>设置option</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="setValue(1)"
|
||||
>设置默认值</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="setValue(2)"
|
||||
>设空默认值</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="dialog = false"
|
||||
>取 消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="dialogOK"
|
||||
>取表单值</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import publicForm from '@/components/formFold/index.vue';
|
||||
import mockData from './mockData';
|
||||
import mockData1 from './mockData1';
|
||||
import mockData2 from './mockData2';
|
||||
export default {
|
||||
components: {
|
||||
publicForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 弹出框
|
||||
dialog: true,
|
||||
zdArr: [
|
||||
{
|
||||
title: '折叠1',
|
||||
isActive: true,
|
||||
formArr: [
|
||||
{
|
||||
// textarea: true,
|
||||
type: 'textarea',
|
||||
prop: 'textarea1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '文本域',
|
||||
placeholder: '请填写',
|
||||
// minRows: 1,
|
||||
// maxRows: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
// select: true,
|
||||
type: 'select',
|
||||
prop: 'select1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '静态选择',
|
||||
// multiple: true , // 多选
|
||||
},
|
||||
options: mockData,
|
||||
},
|
||||
{
|
||||
// selectApi: true,
|
||||
type: 'selectApi',
|
||||
prop: 'selectApi1',
|
||||
span: 12,
|
||||
options: [],
|
||||
attrs: {
|
||||
label: '选择接口:',
|
||||
},
|
||||
},
|
||||
{
|
||||
// selectTree: true,
|
||||
type: 'selectTree',
|
||||
prop: 'selectTree1',
|
||||
span: 12,
|
||||
options: [
|
||||
{
|
||||
label: '系统',
|
||||
// disabled: true,
|
||||
value: 1, // nodeKey 默认 value，可设置id等作为唯一标识的属性
|
||||
id: 11, // nodeKey 默认 value，可设置id等作为唯一标识的属性
|
||||
children: [
|
||||
{ label: '用户', value: 2, id: 22 },
|
||||
{ label: '用户组', value: 3, id: 33 },
|
||||
{ label: '角色', value: 4, id: 44 },
|
||||
{ label: '菜单', value: 5, id: 55 },
|
||||
{ label: '组织架构', value: 6, id: 66 },
|
||||
],
|
||||
},
|
||||
],
|
||||
attrs: {
|
||||
label: '选择树:',
|
||||
multiple: true, // 多选
|
||||
},
|
||||
},
|
||||
// {
|
||||
// selectTreeApi: true,
|
||||
// prop: "selectTreeApi2",
|
||||
// span: 12,
|
||||
// options: [
|
||||
// {
|
||||
// label: "系统",
|
||||
// value: 1,
|
||||
// children: [
|
||||
// { label: "用户", value: 2 },
|
||||
// { label: "用户组", value: 3 },
|
||||
// { label: "角色", value: 4 },
|
||||
// { label: "菜单", value: 5 },
|
||||
// { label: "组织架构", value: 6 },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// attrs: {
|
||||
// label: "接口选择树:",
|
||||
// multiple: true, // 多选
|
||||
// },
|
||||
// },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '折叠2',
|
||||
isActive: true,
|
||||
formArr: [
|
||||
{
|
||||
// inputFinance: true,
|
||||
type: 'inputFinance',
|
||||
prop: 'inputFinance1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '金额',
|
||||
},
|
||||
},
|
||||
{
|
||||
// inputDate: true,
|
||||
type: 'inputDate',
|
||||
prop: 'inputDate1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '1D1M1Y:',
|
||||
},
|
||||
},
|
||||
{
|
||||
// pickerDate: true,
|
||||
type: 'pickerDate',
|
||||
prop: 'pickerDate1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '日期',
|
||||
type: 'daterange',
|
||||
'value-format': 'yyyy-MM-dd',
|
||||
'range-separator': '至',
|
||||
'start-placeholder': '开始日期',
|
||||
'end-placeholder': '结束日期',
|
||||
},
|
||||
},
|
||||
{
|
||||
// pickerTime: true,
|
||||
type: 'pickerTime',
|
||||
prop: 'timerDate1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '时间选择',
|
||||
'value-format': 'HH:mm:ss',
|
||||
format: 'HH:mm:ss',
|
||||
},
|
||||
},
|
||||
{
|
||||
// radio: true,
|
||||
type: 'radio',
|
||||
prop: 'radio1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '单选框',
|
||||
},
|
||||
options: [
|
||||
{
|
||||
label: 0,
|
||||
value: '11',
|
||||
},
|
||||
{
|
||||
label: 1,
|
||||
value: '22',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
// checkbox: true,
|
||||
type: 'checkbox',
|
||||
prop: 'checkbox1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '多选框',
|
||||
},
|
||||
options: [
|
||||
{
|
||||
label: 0,
|
||||
value: '11',
|
||||
},
|
||||
{
|
||||
label: 1,
|
||||
value: '22',
|
||||
},
|
||||
{
|
||||
label: 2,
|
||||
value: '33',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '折叠3',
|
||||
isActive: false,
|
||||
formArr: [
|
||||
{
|
||||
// inputNumber: true,
|
||||
type: 'inputNumber',
|
||||
prop: 'inputNumber1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '计数器:',
|
||||
},
|
||||
},
|
||||
{
|
||||
// switch: true,
|
||||
type: 'switch',
|
||||
prop: 'switch1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '开关:',
|
||||
},
|
||||
},
|
||||
{
|
||||
// cascader: true,
|
||||
type: 'cascader',
|
||||
prop: 'cascader1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '级联:',
|
||||
},
|
||||
options: mockData,
|
||||
},
|
||||
{
|
||||
// transfer: true,
|
||||
type: 'transfer',
|
||||
prop: 'transfer1',
|
||||
span: 24,
|
||||
attrs: {
|
||||
label: '穿梭框:',
|
||||
titles: ['选择项', '选择值'],
|
||||
},
|
||||
options: mockData1,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
// zdArr:[
|
||||
// {
|
||||
// title:'折叠1'
|
||||
// },{
|
||||
// title:'折叠2'
|
||||
// }
|
||||
// ],
|
||||
// 默认值
|
||||
formData: {
|
||||
input: '1',
|
||||
// textarea1: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
dialog(newVal) {
|
||||
if (!newVal) {
|
||||
this.$refs.publicForm.resetForm(); // 窗口关闭清空表单
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
outOperation(val, index, prop) {
|
||||
console.log(prop, index, val);
|
||||
if (val) {
|
||||
if (prop === 'selectApi1') {
|
||||
setTimeout(() => {
|
||||
this.formArr[index].options = [
|
||||
{
|
||||
value: 'select1',
|
||||
label: 'select11',
|
||||
},
|
||||
{
|
||||
value: 'select2',
|
||||
label: 'select22',
|
||||
},
|
||||
];
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
},
|
||||
setValue(val) {
|
||||
if (val == 1) {
|
||||
this.formData = {
|
||||
input1: '1',
|
||||
textarea1: '11',
|
||||
// select1: "select1",
|
||||
// select1:[ 'select1'],
|
||||
inputNumber1: 4,
|
||||
radio1: 0,
|
||||
checkbox1: [1, 2],
|
||||
switch1: false,
|
||||
};
|
||||
} else {
|
||||
this.formData = {};
|
||||
}
|
||||
},
|
||||
setAttrs() {
|
||||
this.zdArr[0].formArr[2].options = mockData2;
|
||||
},
|
||||
|
||||
setarr() {
|
||||
this.zdArr = [
|
||||
{
|
||||
title: '折叠1',
|
||||
isActive: true,
|
||||
formArr: [
|
||||
{
|
||||
input: true, // 组件类型
|
||||
prop: 'input1', // 字段名
|
||||
span: 12, // 参考el-col
|
||||
attrs: {
|
||||
label: '文本:', // 字段
|
||||
placeholder: '请填写111',
|
||||
needStar: true,
|
||||
// disabled: false,
|
||||
// type: 'textarea', // input类型
|
||||
// prepend: "$", // 前文字
|
||||
// "prefix-icon": "el-icon-search", // 前icon
|
||||
// append: ".com", // 后文字
|
||||
// 'suffix-icon': "el-icon-date", // 后icon
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入联系方式',
|
||||
},
|
||||
], // 验证
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
},
|
||||
dialogOK() {
|
||||
// 判断表单验证是否通过
|
||||
if (this.$refs.publicForm.submitForm()) {
|
||||
console.log('success');
|
||||
console.log(this.formData);
|
||||
} else {
|
||||
console.log('error');
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,196 @@
|
||||
|
||||
export default [{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '设计原则',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '一致'
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: '反馈'
|
||||
}, {
|
||||
value: 'xiaolv',
|
||||
label: '效率'
|
||||
}, {
|
||||
value: 'kekong',
|
||||
label: '可控'
|
||||
}]
|
||||
}, {
|
||||
value: 'daohang',
|
||||
label: '导航',
|
||||
children: [{
|
||||
value: 'cexiangdaohang',
|
||||
label: '侧向导航'
|
||||
}, {
|
||||
value: 'dingbudaohang',
|
||||
label: '顶部导航'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [{
|
||||
value: 'basic',
|
||||
label: 'Basic',
|
||||
children: [{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
}, {
|
||||
value: 'color',
|
||||
label: 'Color 色彩'
|
||||
}, {
|
||||
value: 'typography',
|
||||
label: 'Typography 字体'
|
||||
}, {
|
||||
value: 'icon',
|
||||
label: 'Icon 图标'
|
||||
}, {
|
||||
value: 'button',
|
||||
label: 'Button 按钮'
|
||||
}]
|
||||
}, {
|
||||
value: 'form',
|
||||
label: 'Form',
|
||||
children: [{
|
||||
value: 'radio',
|
||||
label: 'Radio 单选框'
|
||||
}, {
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox 多选框'
|
||||
}, {
|
||||
value: 'input',
|
||||
label: 'Input 输入框'
|
||||
}, {
|
||||
value: 'input-number',
|
||||
label: 'InputNumber 计数器'
|
||||
}, {
|
||||
value: 'select',
|
||||
label: 'Select 选择器'
|
||||
}, {
|
||||
value: 'cascader',
|
||||
label: 'Cascader 级联选择器'
|
||||
}, {
|
||||
value: 'switch',
|
||||
label: 'Switch 开关'
|
||||
}, {
|
||||
value: 'slider',
|
||||
label: 'Slider 滑块'
|
||||
}, {
|
||||
value: 'time-picker',
|
||||
label: 'TimePicker 时间选择器'
|
||||
}, {
|
||||
value: 'date-picker',
|
||||
label: 'DatePicker 日期选择器'
|
||||
}, {
|
||||
value: 'datetime-picker',
|
||||
label: 'DateTimePicker 日期时间选择器'
|
||||
}, {
|
||||
value: 'upload',
|
||||
label: 'Upload 上传'
|
||||
}, {
|
||||
value: 'rate',
|
||||
label: 'Rate 评分'
|
||||
}, {
|
||||
value: 'form',
|
||||
label: 'Form 表单'
|
||||
}]
|
||||
}, {
|
||||
value: 'data',
|
||||
label: 'Data',
|
||||
children: [{
|
||||
value: 'table',
|
||||
label: 'Table 表格'
|
||||
}, {
|
||||
value: 'tag',
|
||||
label: 'Tag 标签'
|
||||
}, {
|
||||
value: 'progress',
|
||||
label: 'Progress 进度条'
|
||||
}, {
|
||||
value: 'tree',
|
||||
label: 'Tree 树形控件'
|
||||
}, {
|
||||
value: 'pagination',
|
||||
label: 'Pagination 分页'
|
||||
}, {
|
||||
value: 'badge',
|
||||
label: 'Badge 标记'
|
||||
}]
|
||||
}, {
|
||||
value: 'notice',
|
||||
label: 'Notice',
|
||||
children: [{
|
||||
value: 'alert',
|
||||
label: 'Alert 警告'
|
||||
}, {
|
||||
value: 'loading',
|
||||
label: 'Loading 加载'
|
||||
}, {
|
||||
value: 'message',
|
||||
label: 'Message 消息提示'
|
||||
}, {
|
||||
value: 'message-box',
|
||||
label: 'MessageBox 弹框'
|
||||
}, {
|
||||
value: 'notification',
|
||||
label: 'Notification 通知'
|
||||
}]
|
||||
}, {
|
||||
value: 'navigation',
|
||||
label: 'Navigation',
|
||||
children: [{
|
||||
value: 'menu',
|
||||
label: 'NavMenu 导航菜单'
|
||||
}, {
|
||||
value: 'tabs',
|
||||
label: 'Tabs 标签页'
|
||||
}, {
|
||||
value: 'breadcrumb',
|
||||
label: 'Breadcrumb 面包屑'
|
||||
}, {
|
||||
value: 'dropdown',
|
||||
label: 'Dropdown 下拉菜单'
|
||||
}, {
|
||||
value: 'steps',
|
||||
label: 'Steps 步骤条'
|
||||
}]
|
||||
}, {
|
||||
value: 'others',
|
||||
label: 'Others',
|
||||
children: [{
|
||||
value: 'dialog',
|
||||
label: 'Dialog 对话框'
|
||||
}, {
|
||||
value: 'tooltip',
|
||||
label: 'Tooltip 文字提示'
|
||||
}, {
|
||||
value: 'popover',
|
||||
label: 'Popover 弹出框'
|
||||
}, {
|
||||
value: 'card',
|
||||
label: 'Card 卡片'
|
||||
}, {
|
||||
value: 'carousel',
|
||||
label: 'Carousel 走马灯'
|
||||
}, {
|
||||
value: 'collapse',
|
||||
label: 'Collapse 折叠面板'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
value: 'ziyuan',
|
||||
label: '资源',
|
||||
children: [{
|
||||
value: 'axure',
|
||||
label: 'Axure Components'
|
||||
}, {
|
||||
value: 'sketch',
|
||||
label: 'Sketch Templates'
|
||||
}, {
|
||||
value: 'jiaohu',
|
||||
label: '组件交互文档'
|
||||
}]
|
||||
}]
|
||||
@@ -0,0 +1,26 @@
|
||||
|
||||
export default [{
|
||||
key: '1',
|
||||
label: '选项1',
|
||||
}, {
|
||||
key: '2',
|
||||
label: '选项2',
|
||||
}, {
|
||||
key: '3',
|
||||
label: '选项3',
|
||||
}, {
|
||||
key: '4',
|
||||
label: '选项4',
|
||||
}, {
|
||||
key: '5',
|
||||
label: '选项5',
|
||||
}, {
|
||||
key: '6',
|
||||
label: '选项6',
|
||||
}, {
|
||||
key: '7',
|
||||
label: '选项7',
|
||||
}, {
|
||||
key: '8',
|
||||
label: '选项8',
|
||||
}]
|
||||
@@ -0,0 +1,17 @@
|
||||
|
||||
export default [{
|
||||
value: 'alert',
|
||||
label: 'Alert 警告'
|
||||
}, {
|
||||
value: 'loading',
|
||||
label: 'Loading 加载'
|
||||
}, {
|
||||
value: 'message',
|
||||
label: 'Message 消息提示'
|
||||
}, {
|
||||
value: 'message-box',
|
||||
label: 'MessageBox 弹框'
|
||||
}, {
|
||||
value: 'notification',
|
||||
label: 'Notification 通知'
|
||||
}]
|
||||
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="container">
|
||||
<publicForm
|
||||
ref="publicForm"
|
||||
:form-arr="formArr"
|
||||
:form-data="formData"
|
||||
@outOperation="outOperation"
|
||||
/>
|
||||
</div>
|
||||
<el-button
|
||||
style="margin-top: 40px;margin-left: 700px;"
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="dialogOK"
|
||||
>取表单值</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import publicForm from '@/components/formLinkage';
|
||||
import mockData from './mockData';
|
||||
import mockData1 from './mockData1';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
publicForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mockData1: mockData1,
|
||||
// form 配置
|
||||
formArr: [
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'select1',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '静态选择',
|
||||
},
|
||||
options: mockData,
|
||||
onchange:
|
||||
`
|
||||
const params = {
|
||||
q: '',
|
||||
'queryParam.loginId': Eui.Share.get('loginId'),
|
||||
'queryParam.bankId': Eui.Share.get('bankId'),
|
||||
};
|
||||
this.$apis.queryCptyPage1(params).then((res) => {
|
||||
console.log(res.data.result.datals);
|
||||
const arr = res.data.result.datals;
|
||||
this.formArr[0].options = arr.map((item) => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
};
|
||||
});
|
||||
});
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'input1',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '文本',
|
||||
needStar: true,
|
||||
placeholder: '请填写',
|
||||
'prefix-icon': 'el-icon-date',
|
||||
},
|
||||
rules: { required: true, message: '请输入文本' },
|
||||
},
|
||||
{
|
||||
type: 'radio',
|
||||
prop: 'radio1',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '单选框',
|
||||
},
|
||||
options: [
|
||||
{
|
||||
label: 0,
|
||||
value: '11',
|
||||
},
|
||||
{
|
||||
label: 1,
|
||||
value: '22',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'checkbox',
|
||||
prop: 'checkbox1',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '多选框',
|
||||
},
|
||||
options: [
|
||||
{
|
||||
label: 0,
|
||||
value: '11',
|
||||
},
|
||||
{
|
||||
label: 1,
|
||||
value: '22',
|
||||
},
|
||||
{
|
||||
label: 2,
|
||||
value: '33',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
prop: 'switch1',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '开关',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'cascader',
|
||||
prop: 'cascader1',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '级联',
|
||||
},
|
||||
options: mockData,
|
||||
},
|
||||
{
|
||||
type: 'selectSelect',
|
||||
prop: 'selectSelect',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '单选-单选',
|
||||
// multiple: true , // 多选
|
||||
},
|
||||
attrs2: {
|
||||
// disabled:true
|
||||
},
|
||||
options1: mockData,
|
||||
options2: JSON.parse(JSON.stringify(mockData)),
|
||||
},
|
||||
{
|
||||
type: 'inputSelect',
|
||||
prop: 'inputSelect',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '文本-单选',
|
||||
placeholder: '请填写',
|
||||
},
|
||||
attrs2: {
|
||||
// disabled:true
|
||||
},
|
||||
options: mockData,
|
||||
},
|
||||
],
|
||||
// 默认值
|
||||
formData: {
|
||||
input1: '1',
|
||||
},
|
||||
//
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
outOperation(val, num1, num2, num3, formItems) {},
|
||||
dialogOK() {
|
||||
// 判断表单验证是否通过
|
||||
if (this.$refs.publicForm.submitForm()) {
|
||||
console.log('success');
|
||||
console.log(this.formData);
|
||||
} else {
|
||||
console.log('error');
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,196 @@
|
||||
|
||||
export default [{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '设计原则',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '一致',
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: '反馈',
|
||||
}, {
|
||||
value: 'xiaolv',
|
||||
label: '效率',
|
||||
}, {
|
||||
value: 'kekong',
|
||||
label: '可控',
|
||||
}],
|
||||
}, {
|
||||
value: 'daohang',
|
||||
label: '导航',
|
||||
children: [{
|
||||
value: 'cexiangdaohang',
|
||||
label: '侧向导航',
|
||||
}, {
|
||||
value: 'dingbudaohang',
|
||||
label: '顶部导航',
|
||||
}],
|
||||
}],
|
||||
}, {
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [{
|
||||
value: 'basic',
|
||||
label: 'Basic',
|
||||
children: [{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局',
|
||||
}, {
|
||||
value: 'color',
|
||||
label: 'Color 色彩',
|
||||
}, {
|
||||
value: 'typography',
|
||||
label: 'Typography 字体',
|
||||
}, {
|
||||
value: 'icon',
|
||||
label: 'Icon 图标',
|
||||
}, {
|
||||
value: 'button',
|
||||
label: 'Button 按钮',
|
||||
}],
|
||||
}, {
|
||||
value: 'form',
|
||||
label: 'Form',
|
||||
children: [{
|
||||
value: 'radio',
|
||||
label: 'Radio 单选框',
|
||||
}, {
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox 多选框',
|
||||
}, {
|
||||
value: 'input',
|
||||
label: 'Input 输入框',
|
||||
}, {
|
||||
value: 'input-number',
|
||||
label: 'InputNumber 计数器',
|
||||
}, {
|
||||
value: 'select',
|
||||
label: 'Select 选择器',
|
||||
}, {
|
||||
value: 'cascader',
|
||||
label: 'Cascader 级联选择器',
|
||||
}, {
|
||||
value: 'switch',
|
||||
label: 'Switch 开关',
|
||||
}, {
|
||||
value: 'slider',
|
||||
label: 'Slider 滑块',
|
||||
}, {
|
||||
value: 'time-picker',
|
||||
label: 'TimePicker 时间选择器',
|
||||
}, {
|
||||
value: 'date-picker',
|
||||
label: 'DatePicker 日期选择器',
|
||||
}, {
|
||||
value: 'datetime-picker',
|
||||
label: 'DateTimePicker 日期时间选择器',
|
||||
}, {
|
||||
value: 'upload',
|
||||
label: 'Upload 上传',
|
||||
}, {
|
||||
value: 'rate',
|
||||
label: 'Rate 评分',
|
||||
}, {
|
||||
value: 'form',
|
||||
label: 'Form 表单',
|
||||
}],
|
||||
}, {
|
||||
value: 'data',
|
||||
label: 'Data',
|
||||
children: [{
|
||||
value: 'table',
|
||||
label: 'Table 表格',
|
||||
}, {
|
||||
value: 'tag',
|
||||
label: 'Tag 标签',
|
||||
}, {
|
||||
value: 'progress',
|
||||
label: 'Progress 进度条',
|
||||
}, {
|
||||
value: 'tree',
|
||||
label: 'Tree 树形控件',
|
||||
}, {
|
||||
value: 'pagination',
|
||||
label: 'Pagination 分页',
|
||||
}, {
|
||||
value: 'badge',
|
||||
label: 'Badge 标记',
|
||||
}],
|
||||
}, {
|
||||
value: 'notice',
|
||||
label: 'Notice',
|
||||
children: [{
|
||||
value: 'alert',
|
||||
label: 'Alert 警告',
|
||||
}, {
|
||||
value: 'loading',
|
||||
label: 'Loading 加载',
|
||||
}, {
|
||||
value: 'message',
|
||||
label: 'Message 消息提示',
|
||||
}, {
|
||||
value: 'message-box',
|
||||
label: 'MessageBox 弹框',
|
||||
}, {
|
||||
value: 'notification',
|
||||
label: 'Notification 通知',
|
||||
}],
|
||||
}, {
|
||||
value: 'navigation',
|
||||
label: 'Navigation',
|
||||
children: [{
|
||||
value: 'menu',
|
||||
label: 'NavMenu 导航菜单',
|
||||
}, {
|
||||
value: 'tabs',
|
||||
label: 'Tabs 标签页',
|
||||
}, {
|
||||
value: 'breadcrumb',
|
||||
label: 'Breadcrumb 面包屑',
|
||||
}, {
|
||||
value: 'dropdown',
|
||||
label: 'Dropdown 下拉菜单',
|
||||
}, {
|
||||
value: 'steps',
|
||||
label: 'Steps 步骤条',
|
||||
}],
|
||||
}, {
|
||||
value: 'others',
|
||||
label: 'Others',
|
||||
children: [{
|
||||
value: 'dialog',
|
||||
label: 'Dialog 对话框',
|
||||
}, {
|
||||
value: 'tooltip',
|
||||
label: 'Tooltip 文字提示',
|
||||
}, {
|
||||
value: 'popover',
|
||||
label: 'Popover 弹出框',
|
||||
}, {
|
||||
value: 'card',
|
||||
label: 'Card 卡片',
|
||||
}, {
|
||||
value: 'carousel',
|
||||
label: 'Carousel 走马灯',
|
||||
}, {
|
||||
value: 'collapse',
|
||||
label: 'Collapse 折叠面板',
|
||||
}],
|
||||
}],
|
||||
}, {
|
||||
value: 'ziyuan',
|
||||
label: '资源',
|
||||
children: [{
|
||||
value: 'axure',
|
||||
label: 'Axure Components',
|
||||
}, {
|
||||
value: 'sketch',
|
||||
label: 'Sketch Templates',
|
||||
}, {
|
||||
value: 'jiaohu',
|
||||
label: '组件交互文档',
|
||||
}],
|
||||
}];
|
||||
@@ -0,0 +1,26 @@
|
||||
|
||||
export default [{
|
||||
key: '1',
|
||||
label: '选项1',
|
||||
}, {
|
||||
key: '2',
|
||||
label: '选项2',
|
||||
}, {
|
||||
key: '3',
|
||||
label: '选项3',
|
||||
}, {
|
||||
key: '4',
|
||||
label: '选项4',
|
||||
}, {
|
||||
key: '5',
|
||||
label: '选项5',
|
||||
}, {
|
||||
key: '6',
|
||||
label: '选项6',
|
||||
}, {
|
||||
key: '7',
|
||||
label: '选项7',
|
||||
}, {
|
||||
key: '8',
|
||||
label: '选项8',
|
||||
}]
|
||||
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div>
|
||||
<FormSearch
|
||||
:form-arr="formArr"
|
||||
:form-data="formData"
|
||||
@outOperation="outOperation"
|
||||
@searchSubmit="searchSubmit"
|
||||
@reset="resetForm"
|
||||
/>
|
||||
|
||||
<div style="margin: 100px;">
|
||||
<span
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="setarr"
|
||||
>改搜索列表</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="setAttrs"
|
||||
>设置option</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="setValue(1)"
|
||||
>设置默认值</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="setValue(2)"
|
||||
>设空默认值</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormSearch from '@/components/formSearch/index.vue';
|
||||
import mockData from '@/components/mockData';
|
||||
export default {
|
||||
components: {
|
||||
FormSearch,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// form 配置
|
||||
formArr: [
|
||||
{
|
||||
// input: true,
|
||||
type: 'input',
|
||||
prop: 'input1',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '文本:',
|
||||
},
|
||||
options: mockData,
|
||||
},
|
||||
{
|
||||
// selectApi: true,
|
||||
type: 'selectApi',
|
||||
prop: 'selectApi1',
|
||||
span: 6,
|
||||
options: [],
|
||||
attrs: {
|
||||
label: '选择接口:',
|
||||
},
|
||||
},
|
||||
{
|
||||
// pickerDate: true,
|
||||
type: 'pickerDate',
|
||||
prop: 'pickerDate1',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '日期:',
|
||||
type: 'daterange',
|
||||
'value-format': 'yyyy-MM-dd',
|
||||
'range-separator': '至',
|
||||
'start-placeholder': '开始日期',
|
||||
'end-placeholder': '结束日期',
|
||||
},
|
||||
},
|
||||
{
|
||||
// selectTree: true,
|
||||
type: 'selectTree',
|
||||
prop: 'selectTree1',
|
||||
span: 6,
|
||||
options: mockData,
|
||||
attrs: {
|
||||
label: '选择树:',
|
||||
multiple: true, // 多选
|
||||
},
|
||||
},
|
||||
{
|
||||
// input: true,
|
||||
type: 'input',
|
||||
prop: 'input1',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '文本:',
|
||||
},
|
||||
options: mockData,
|
||||
},
|
||||
{
|
||||
// input: true,
|
||||
type: 'input',
|
||||
prop: 'input1',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '文本:',
|
||||
},
|
||||
options: mockData,
|
||||
},
|
||||
{
|
||||
// input: true,
|
||||
type: 'input',
|
||||
prop: 'input1',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '文本:',
|
||||
},
|
||||
options: mockData,
|
||||
},
|
||||
{
|
||||
// input: true,
|
||||
type: 'input',
|
||||
prop: 'input1',
|
||||
span: 6,
|
||||
attrs: {
|
||||
label: '文本:',
|
||||
},
|
||||
options: mockData,
|
||||
},
|
||||
],
|
||||
// 默认值
|
||||
formData: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
searchSubmit(val) {
|
||||
console.log('search结果', val);
|
||||
},
|
||||
resetForm() {
|
||||
this.formData = {};
|
||||
},
|
||||
outOperation(val, index, prop, num) {
|
||||
console.log(val, index, prop, num);
|
||||
},
|
||||
|
||||
// 以下为设置项方法
|
||||
setValue(val) {
|
||||
if (val == 1) {
|
||||
this.formData = {
|
||||
input1: '1',
|
||||
};
|
||||
} else {
|
||||
this.formData = {};
|
||||
}
|
||||
},
|
||||
setAttrs() {
|
||||
this.formArr[1].options = mockData;
|
||||
},
|
||||
setarr() {
|
||||
this.formArr = [
|
||||
{
|
||||
input: true, // 组件类型
|
||||
prop: 'input1', // 字段名
|
||||
span: 12, // 参考el-col
|
||||
attrs: {
|
||||
label: '文本:', // 字段
|
||||
placeholder: '请填写111',
|
||||
needStar: true,
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入联系方式',
|
||||
},
|
||||
], // 验证
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
+599
@@ -0,0 +1,599 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="dialog = true"
|
||||
>点击打开 Dialog</el-button>
|
||||
|
||||
<el-dialog
|
||||
title="表单"
|
||||
:visible.sync="dialog"
|
||||
width="60%"
|
||||
:modal-append-to-body="false"
|
||||
>
|
||||
<publicForm
|
||||
ref="publicForm"
|
||||
:form-arr="formArr"
|
||||
:form-data="formData"
|
||||
@outOperation="outOperation"
|
||||
@getRequestData="getRequestData"
|
||||
/>
|
||||
<span
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="setarr"
|
||||
>设置列表</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="setAttrs"
|
||||
>设置option</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="setValue(1)"
|
||||
>设置默认值</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="setValue(2)"
|
||||
>设空默认值</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="dialog = false"
|
||||
>取 消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="dialogOK"
|
||||
>取表单值</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import publicForm from '@/components/form/index.vue';
|
||||
import mockData from './mockData';
|
||||
import mockData1 from './mockData1';
|
||||
import mockData2 from './mockData2';
|
||||
export default {
|
||||
components: {
|
||||
publicForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 弹出框
|
||||
dialog: true,
|
||||
// form 配置
|
||||
|
||||
formArr: [
|
||||
{
|
||||
type: 'inputFinance',
|
||||
prop: 'inputFinance1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '金额',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'input1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '文本',
|
||||
needStar: true,
|
||||
placeholder: '请填写',
|
||||
'prefix-icon': 'el-icon-date',
|
||||
},
|
||||
// rules: { required: true, message: '请输入文本' },
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
prop: 'textarea1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '文本域',
|
||||
placeholder: '请填写',
|
||||
// minRows: 1,
|
||||
// maxRows: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
prop: 'select1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '静态选择',
|
||||
// multiple: true , // 多选
|
||||
},
|
||||
options: mockData,
|
||||
},
|
||||
{
|
||||
type: 'selectLabel',
|
||||
prop: 'select2',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '自定义列选择',
|
||||
},
|
||||
options: mockData,
|
||||
},
|
||||
{
|
||||
// selectLazyLoading: true,
|
||||
type: 'selectLazyLoading',
|
||||
prop: 'selectLazyLoading',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '下拉懒加载',
|
||||
placeholder: '请选择',
|
||||
api: this.$apis.getEventList,
|
||||
optionLabel: 'dealId',
|
||||
optionValue: 'id',
|
||||
params: {
|
||||
'queryParam.moduleName': 'pubSendExceptionManager',
|
||||
'queryParam.sendService': 'DCS',
|
||||
'queryParam.pageStart': 1,
|
||||
'queryParam.pageLimit': 10,
|
||||
},
|
||||
},
|
||||
options: [],
|
||||
},
|
||||
{
|
||||
// selectLazyLoading: true,
|
||||
type: 'selectTable',
|
||||
prop: 'selectTable',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '下拉表格',
|
||||
placeholder: '请选择',
|
||||
api: this.$apis.getEventList,
|
||||
optionLabel: 'dealId',
|
||||
optionValue: 'eventId',
|
||||
// multiple: true,
|
||||
columns: [
|
||||
{
|
||||
prop: 'dealId',
|
||||
minWidth: '200px',
|
||||
align: 'center',
|
||||
label: this.$t('field.dealId'),
|
||||
},
|
||||
{
|
||||
prop: 'productStr',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: this.$t('field.product'),
|
||||
},
|
||||
{
|
||||
prop: 'typeOfEventStr',
|
||||
minWidth: '200px',
|
||||
align: 'center',
|
||||
label: this.$t('field.typeOfEvent'),
|
||||
},
|
||||
{
|
||||
prop: 'eventStatusStr',
|
||||
minWidth: '100px',
|
||||
align: 'center',
|
||||
label: this.$t('field.eventStatus'),
|
||||
},
|
||||
{
|
||||
prop: 'eventId',
|
||||
minWidth: '160px',
|
||||
align: 'center',
|
||||
label: this.$t('field.eventId'),
|
||||
},
|
||||
{
|
||||
prop: 'blockNo',
|
||||
minWidth: '160px',
|
||||
align: 'center',
|
||||
label: this.$t('field.blockNo'),
|
||||
},
|
||||
{
|
||||
prop: 'eventDate',
|
||||
minWidth: '160px',
|
||||
align: 'center',
|
||||
label: this.$t('field.eventDate'),
|
||||
},
|
||||
],
|
||||
params: {
|
||||
'queryParam.pageStart': 1,
|
||||
'queryParam.pageLimit': 10,
|
||||
'queryParam.moduleName': 'dcsEventManager',
|
||||
},
|
||||
},
|
||||
options: mockData1,
|
||||
},
|
||||
{
|
||||
type: 'selectApi',
|
||||
prop: 'selectApi1',
|
||||
span: 12,
|
||||
options: [],
|
||||
attrs: {
|
||||
label: '选择接口',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'selectTree',
|
||||
prop: 'selectTree1',
|
||||
span: 12,
|
||||
options: mockData,
|
||||
attrs: {
|
||||
label: '选择树:',
|
||||
multiple: true, // 多选
|
||||
},
|
||||
},
|
||||
// {
|
||||
// prop: "selectTreeApi2",
|
||||
// span: 12,
|
||||
// options: [
|
||||
// {
|
||||
// label: "系统",
|
||||
// value: 1,
|
||||
// children: [
|
||||
// { label: "用户", value: 2 },
|
||||
// { label: "用户组", value: 3 },
|
||||
// { label: "角色", value: 4 },
|
||||
// { label: "菜单", value: 5 },
|
||||
// { label: "组织架构", value: 6 },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// attrs: {
|
||||
// label: "接口选择树:",
|
||||
// multiple: true, // 多选
|
||||
// },
|
||||
// },
|
||||
{
|
||||
type: 'inputNumber',
|
||||
prop: 'inputNumber1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '计数器',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'inputNumber2',
|
||||
prop: 'inputNumber2',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '计数器2',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'inputDate',
|
||||
prop: 'inputDate1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '1D1M1Y',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pickerWeek',
|
||||
prop: 'pickerWeek',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '选择周',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pickerMonth',
|
||||
prop: 'pickerMonth',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '选择月',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pickerYear',
|
||||
prop: 'pickerYear',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '选择年',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pickerDateSingle',
|
||||
prop: 'pickerDateSingle',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '日期',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pickerDate',
|
||||
prop: 'pickerDate1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '日期范围',
|
||||
type: 'daterange',
|
||||
'value-format': 'yyyy-MM-dd',
|
||||
'range-separator': '至',
|
||||
'start-placeholder': '开始日期',
|
||||
'end-placeholder': '结束日期',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pickerTime',
|
||||
prop: 'timerDate1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '时间选择',
|
||||
'value-format': 'HH:mm:ss',
|
||||
format: 'HH:mm:ss',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pickerTimeRange',
|
||||
prop: 'timeRange',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '时间范围',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pickerDateTime',
|
||||
prop: 'dateTime',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '日期时间',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pickerDateTimeRange',
|
||||
prop: 'dateTimeRange',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '日期时间范围',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'radio',
|
||||
prop: 'radio1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '单选框',
|
||||
},
|
||||
options: [
|
||||
{
|
||||
label: 0,
|
||||
value: '11',
|
||||
},
|
||||
{
|
||||
label: 1,
|
||||
value: '22',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'checkbox',
|
||||
prop: 'checkbox1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '多选框',
|
||||
},
|
||||
options: [
|
||||
{
|
||||
label: 0,
|
||||
value: '11',
|
||||
},
|
||||
{
|
||||
label: 1,
|
||||
value: '22',
|
||||
},
|
||||
{
|
||||
label: 2,
|
||||
value: '33',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
prop: 'switch1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '开关',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'cascader',
|
||||
prop: 'cascader1',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '级联',
|
||||
},
|
||||
options: mockData,
|
||||
},
|
||||
{
|
||||
type: 'transfer',
|
||||
prop: 'transfer1',
|
||||
span: 24,
|
||||
attrs: {
|
||||
label: '穿梭框',
|
||||
titles: ['选择项', '选择值'],
|
||||
},
|
||||
options: mockData1,
|
||||
},
|
||||
{
|
||||
type: 'selectSelect',
|
||||
prop: 'selectSelect',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '单选-单选',
|
||||
// multiple: true , // 多选
|
||||
},
|
||||
attrs2: {
|
||||
// disabled:true
|
||||
},
|
||||
options1: mockData,
|
||||
options2: JSON.parse(JSON.stringify(mockData)),
|
||||
},
|
||||
{
|
||||
type: 'inputSelect',
|
||||
prop: 'inputSelect',
|
||||
span: 12,
|
||||
attrs: {
|
||||
label: '文本-单选',
|
||||
placeholder: '请填写',
|
||||
},
|
||||
attrs2: {
|
||||
// disabled:true
|
||||
},
|
||||
options: mockData,
|
||||
},
|
||||
|
||||
],
|
||||
// 默认值
|
||||
formData: {
|
||||
input1: '1',
|
||||
// textarea1: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
dialog(newVal) {
|
||||
if (!newVal) {
|
||||
this.$refs.publicForm.resetForm(); // 窗口关闭清空表单
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
outOperation(val, index, prop, num) {
|
||||
if (val) {
|
||||
if (prop === 'selectApi1') {
|
||||
setTimeout(() => {
|
||||
this.formArr[index].options = [
|
||||
{
|
||||
value: 'select1',
|
||||
label: 'select11',
|
||||
},
|
||||
{
|
||||
value: 'select2',
|
||||
label: 'select22',
|
||||
},
|
||||
];
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
},
|
||||
setValue(val) {
|
||||
if (val == 1) {
|
||||
this.formData = {
|
||||
input1: '1',
|
||||
textarea1: '11',
|
||||
// select1: "select1",
|
||||
// select1:[ 'select1'],
|
||||
inputNumber1: 4,
|
||||
radio1: 0,
|
||||
checkbox1: [1, 2],
|
||||
switch1: false,
|
||||
};
|
||||
} else {
|
||||
this.formData = {};
|
||||
}
|
||||
},
|
||||
setAttrs() {
|
||||
this.formArr[2].options = mockData2;
|
||||
},
|
||||
|
||||
setarr() {
|
||||
this.formArr = [
|
||||
{
|
||||
input: true, // 组件类型
|
||||
prop: 'input1', // 字段名
|
||||
span: 12, // 参考el-col
|
||||
attrs: {
|
||||
label: '文本:', // 字段
|
||||
placeholder: '请填写111',
|
||||
needStar: true,
|
||||
// disabled: false,
|
||||
// type: 'textarea', // input类型
|
||||
// prepend: "$", // 前文字
|
||||
// "prefix-icon": "el-icon-search", // 前icon
|
||||
// append: ".com", // 后文字
|
||||
// 'suffix-icon': "el-icon-date", // 后icon
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入联系方式',
|
||||
},
|
||||
], // 验证
|
||||
},
|
||||
];
|
||||
},
|
||||
dialogOK() {
|
||||
// 判断表单验证是否通过
|
||||
if (this.$refs.publicForm.submitForm()) {
|
||||
console.log('success');
|
||||
console.log(this.formData);
|
||||
} else {
|
||||
console.log('error');
|
||||
}
|
||||
},
|
||||
// 加载数据
|
||||
async getRequestData(index, isLoadMore = false) {
|
||||
this.formArr[index].attrs.pageNum++;
|
||||
if (isLoadMore) {
|
||||
this.formArr[index].attrs.loadingMore = true;
|
||||
} else {
|
||||
this.formArr[index].attrs.loading = true;
|
||||
}
|
||||
|
||||
try {
|
||||
const { data, total } = await this.fetchData({
|
||||
pageNum: this.formArr[index].attrs.pageNum,
|
||||
pageSize: this.formArr[index].attrs.pageSize,
|
||||
});
|
||||
|
||||
this.formArr[index].attrs.total = total;
|
||||
|
||||
// 关键点4：合并数据
|
||||
if (isLoadMore) {
|
||||
this.formArr[index].options = [
|
||||
...this.formArr[index].options,
|
||||
...data,
|
||||
];
|
||||
} else {
|
||||
this.formArr[index].options = data;
|
||||
}
|
||||
|
||||
// 判断是否还有更多数据
|
||||
if (
|
||||
this.formArr[index].options.length >= this.formArr[index].attrs.total
|
||||
) {
|
||||
this.formArr[index].attrs.noMore = true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载数据失败:', error);
|
||||
if (isLoadMore) {
|
||||
this.formArr[index].attrs.pageNum--; // 加载失败回退页码
|
||||
}
|
||||
} finally {
|
||||
if (isLoadMore) {
|
||||
this.formArr[index].attrs.loadingMore = false;
|
||||
} else {
|
||||
this.formArr[index].attrs.loading = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
fetchData(params) {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
// const { query, page, pageSize } = params
|
||||
// const start = (page - 1) * pageSize
|
||||
// const data = Array.from({ length: pageSize }, (_, i) => ({
|
||||
// value: start + i,
|
||||
// label: query ? `${query} 选项 ${start + i + 1}` : `选项 ${start + i + 1}`
|
||||
// }))
|
||||
const data = mockData;
|
||||
resolve({
|
||||
data,
|
||||
total: 20, // 假设总共有100条数据
|
||||
});
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,196 @@
|
||||
|
||||
export default [{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '设计原则',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '一致',
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: '反馈',
|
||||
}, {
|
||||
value: 'xiaolv',
|
||||
label: '效率',
|
||||
}, {
|
||||
value: 'kekong',
|
||||
label: '可控',
|
||||
}],
|
||||
}, {
|
||||
value: 'daohang',
|
||||
label: '导航',
|
||||
children: [{
|
||||
value: 'cexiangdaohang',
|
||||
label: '侧向导航',
|
||||
}, {
|
||||
value: 'dingbudaohang',
|
||||
label: '顶部导航',
|
||||
}],
|
||||
}],
|
||||
}, {
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [{
|
||||
value: 'basic',
|
||||
label: 'Basic',
|
||||
children: [{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局',
|
||||
}, {
|
||||
value: 'color',
|
||||
label: 'Color 色彩',
|
||||
}, {
|
||||
value: 'typography',
|
||||
label: 'Typography 字体',
|
||||
}, {
|
||||
value: 'icon',
|
||||
label: 'Icon 图标',
|
||||
}, {
|
||||
value: 'button',
|
||||
label: 'Button 按钮',
|
||||
}],
|
||||
}, {
|
||||
value: 'form',
|
||||
label: 'Form',
|
||||
children: [{
|
||||
value: 'radio',
|
||||
label: 'Radio 单选框',
|
||||
}, {
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox 多选框',
|
||||
}, {
|
||||
value: 'input',
|
||||
label: 'Input 输入框',
|
||||
}, {
|
||||
value: 'input-number',
|
||||
label: 'InputNumber 计数器',
|
||||
}, {
|
||||
value: 'select',
|
||||
label: 'Select 选择器',
|
||||
}, {
|
||||
value: 'cascader',
|
||||
label: 'Cascader 级联选择器',
|
||||
}, {
|
||||
value: 'switch',
|
||||
label: 'Switch 开关',
|
||||
}, {
|
||||
value: 'slider',
|
||||
label: 'Slider 滑块',
|
||||
}, {
|
||||
value: 'time-picker',
|
||||
label: 'TimePicker 时间选择器',
|
||||
}, {
|
||||
value: 'date-picker',
|
||||
label: 'DatePicker 日期选择器',
|
||||
}, {
|
||||
value: 'datetime-picker',
|
||||
label: 'DateTimePicker 日期时间选择器',
|
||||
}, {
|
||||
value: 'upload',
|
||||
label: 'Upload 上传',
|
||||
}, {
|
||||
value: 'rate',
|
||||
label: 'Rate 评分',
|
||||
}, {
|
||||
value: 'form',
|
||||
label: 'Form 表单',
|
||||
}],
|
||||
}, {
|
||||
value: 'data',
|
||||
label: 'Data',
|
||||
children: [{
|
||||
value: 'table',
|
||||
label: 'Table 表格',
|
||||
}, {
|
||||
value: 'tag',
|
||||
label: 'Tag 标签',
|
||||
}, {
|
||||
value: 'progress',
|
||||
label: 'Progress 进度条',
|
||||
}, {
|
||||
value: 'tree',
|
||||
label: 'Tree 树形控件',
|
||||
}, {
|
||||
value: 'pagination',
|
||||
label: 'Pagination 分页',
|
||||
}, {
|
||||
value: 'badge',
|
||||
label: 'Badge 标记',
|
||||
}],
|
||||
}, {
|
||||
value: 'notice',
|
||||
label: 'Notice',
|
||||
children: [{
|
||||
value: 'alert',
|
||||
label: 'Alert 警告',
|
||||
}, {
|
||||
value: 'loading',
|
||||
label: 'Loading 加载',
|
||||
}, {
|
||||
value: 'message',
|
||||
label: 'Message 消息提示',
|
||||
}, {
|
||||
value: 'message-box',
|
||||
label: 'MessageBox 弹框',
|
||||
}, {
|
||||
value: 'notification',
|
||||
label: 'Notification 通知',
|
||||
}],
|
||||
}, {
|
||||
value: 'navigation',
|
||||
label: 'Navigation',
|
||||
children: [{
|
||||
value: 'menu',
|
||||
label: 'NavMenu 导航菜单',
|
||||
}, {
|
||||
value: 'tabs',
|
||||
label: 'Tabs 标签页',
|
||||
}, {
|
||||
value: 'breadcrumb',
|
||||
label: 'Breadcrumb 面包屑',
|
||||
}, {
|
||||
value: 'dropdown',
|
||||
label: 'Dropdown 下拉菜单',
|
||||
}, {
|
||||
value: 'steps',
|
||||
label: 'Steps 步骤条',
|
||||
}],
|
||||
}, {
|
||||
value: 'others',
|
||||
label: 'Others',
|
||||
children: [{
|
||||
value: 'dialog',
|
||||
label: 'Dialog 对话框',
|
||||
}, {
|
||||
value: 'tooltip',
|
||||
label: 'Tooltip 文字提示',
|
||||
}, {
|
||||
value: 'popover',
|
||||
label: 'Popover 弹出框',
|
||||
}, {
|
||||
value: 'card',
|
||||
label: 'Card 卡片',
|
||||
}, {
|
||||
value: 'carousel',
|
||||
label: 'Carousel 走马灯',
|
||||
}, {
|
||||
value: 'collapse',
|
||||
label: 'Collapse 折叠面板',
|
||||
}],
|
||||
}],
|
||||
}, {
|
||||
value: 'ziyuan',
|
||||
label: '资源',
|
||||
children: [{
|
||||
value: 'axure',
|
||||
label: 'Axure Components',
|
||||
}, {
|
||||
value: 'sketch',
|
||||
label: 'Sketch Templates',
|
||||
}, {
|
||||
value: 'jiaohu',
|
||||
label: '组件交互文档',
|
||||
}],
|
||||
}];
|
||||
@@ -0,0 +1,26 @@
|
||||
|
||||
export default [{
|
||||
key: '1',
|
||||
label: '选项1',
|
||||
}, {
|
||||
key: '2',
|
||||
label: '选项2',
|
||||
}, {
|
||||
key: '3',
|
||||
label: '选项3',
|
||||
}, {
|
||||
key: '4',
|
||||
label: '选项4',
|
||||
}, {
|
||||
key: '5',
|
||||
label: '选项5',
|
||||
}, {
|
||||
key: '6',
|
||||
label: '选项6',
|
||||
}, {
|
||||
key: '7',
|
||||
label: '选项7',
|
||||
}, {
|
||||
key: '8',
|
||||
label: '选项8',
|
||||
}]
|
||||
@@ -0,0 +1,17 @@
|
||||
|
||||
export default [{
|
||||
value: 'alert',
|
||||
label: 'Alert 警告'
|
||||
}, {
|
||||
value: 'loading',
|
||||
label: 'Loading 加载'
|
||||
}, {
|
||||
value: 'message',
|
||||
label: 'Message 消息提示'
|
||||
}, {
|
||||
value: 'message-box',
|
||||
label: 'MessageBox 弹框'
|
||||
}, {
|
||||
value: 'notification',
|
||||
label: 'Notification 通知'
|
||||
}]
|
||||
@@ -0,0 +1,34 @@
|
||||
|
||||
export default [{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
}, {
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
}, {
|
||||
value: 'ziyuan',
|
||||
label: '资源',
|
||||
}, {
|
||||
value: 'shuru',
|
||||
label: '输入',
|
||||
}, {
|
||||
value: 'shuchu',
|
||||
label: '输出',
|
||||
}, {
|
||||
value: 'diannao',
|
||||
label: '电脑',
|
||||
}, {
|
||||
value: 'shubiao',
|
||||
label: '鼠标',
|
||||
}, {
|
||||
value: 'jianpan',
|
||||
label: '键盘',
|
||||
},
|
||||
{
|
||||
value: 'jianpan',
|
||||
label: '键盘',
|
||||
},
|
||||
{
|
||||
value: 'jianpan',
|
||||
label: '键盘',
|
||||
},]
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div style="height: 1000px">
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane>
|
||||
<span slot="label"><i class="el-icon-date" /> 我的行程</span>
|
||||
我的行程
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="消息中心">消息中心</el-tab-pane>
|
||||
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
|
||||
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Directive',
|
||||
mounted() {
|
||||
console.log('----directive---mounted');
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div ref="withScopeId">
|
||||
<div>page</div>
|
||||
<p>{{ $t('name', ['Jack', 'Job']) }}</p>
|
||||
<p @click="onTest">{{ $t('home') }}</p>
|
||||
<el-input
|
||||
v-model="input"
|
||||
placeholder="请输入内容"
|
||||
/>
|
||||
<!-- <WrapRole /> -->
|
||||
<!-- <HelloWorld/> -->
|
||||
<!-- <role /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import hoc from '../../utils/hoc';
|
||||
// import Role from './role.vue';
|
||||
// const hocc = hoc();
|
||||
// const WrapRole = hoc(Role);
|
||||
import ScopeIdMixin from '@/layouts/mixin/ScopeIdMixin';
|
||||
export default {
|
||||
name: 'Page',
|
||||
components: {
|
||||
// WrapRole,
|
||||
// Role,
|
||||
},
|
||||
mixins: [ScopeIdMixin],
|
||||
props: {
|
||||
options: Object,
|
||||
},
|
||||
// computed: {
|
||||
// loadOptions() {
|
||||
// // const { extraData = {} } = this.$route.meta || {};
|
||||
// // const params = filterOptions(transformOptions(extraData));
|
||||
// // return this.options || this.loadOptions;
|
||||
// },
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
input: '',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
mounted() {
|
||||
// console.log('----load--------1111', this.$route);
|
||||
// const { scopeId } = this.loadOptions;
|
||||
// this.getData();
|
||||
// Eui.Ipc.addSubscribes(
|
||||
// {
|
||||
// 'test:message': (e, data) => {
|
||||
// console.log('---test---message', data)
|
||||
// }
|
||||
// },
|
||||
// { scopeId },
|
||||
// );
|
||||
},
|
||||
methods: {
|
||||
// @log(),
|
||||
getData: function() {
|
||||
console.log('获取数据');
|
||||
},
|
||||
onTest: function() {
|
||||
// console.log('------acopr---1111', this.loadOptions.scopeId)
|
||||
// Eui.Ipc.send('test:message', 2)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-input
|
||||
v-model="input"
|
||||
placeholder="请输入内容"
|
||||
/>
|
||||
<div @click="onTest">testMessage</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ScopeIdMixin from '../../layouts/mixin/ScopeIdMixin';
|
||||
export default {
|
||||
name: 'Role',
|
||||
mixins: [ScopeIdMixin],
|
||||
props: {
|
||||
// loadOptions: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
input: '',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.input = 1;
|
||||
// console.log('---role-mounted--', this);
|
||||
|
||||
// console.log('---scopId---role', this)
|
||||
// const { scopeId } = this.loadOptions;
|
||||
// Eui.Ipc.addSubscribes(
|
||||
// {
|
||||
// 'test:message': (e, data) => {
|
||||
// console.log('---test---message---222', data)
|
||||
// }
|
||||
// },
|
||||
// { scopeId },
|
||||
// );
|
||||
},
|
||||
methods: {
|
||||
// onTest: function(){
|
||||
// Eui.Ipc.send('test:message', 1)
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user