This commit is contained in:
2021-05-21 11:28:30 +08:00
11 changed files with 109 additions and 267 deletions

View File

@@ -14,7 +14,7 @@
<br />
<a-card class="yo-form-page--body">
<template v-for="(part, index) in parts">
<section :id="`form-${index}`" :key="index">
<section :id="`form-${index}-${id}`" :key="index">
<h5 v-if="part.title">{{part.title}}</h5>
<component
:is="part.component"
@@ -36,7 +36,7 @@
@click.prevent
>
<a-anchor-link
:href="`#form-${index}`"
:href="`#form-${index}-${id}`"
:key="index"
:title="part.title"
v-for="(part, index) in parts"
@@ -65,7 +65,7 @@
</template>
<script>
export default {
props: ['param'],
props: ['id', 'param'],
data() {
return {

View File

@@ -43,6 +43,7 @@
>
<component
:frame="self"
:id="id"
:is="tab.component"
:param="param"
ref="forms"
@@ -56,7 +57,7 @@
</template>
<script>
export default {
props: ['param'],
props: ['id', 'param'],
data() {
return {

View File

@@ -12,7 +12,7 @@
<br />
<a-card class="yo-form-page--body">
<template v-for="(part, index) in parts">
<section :id="`form-${index}`" :key="index">
<section :id="`form-${index}-${id}`" :key="index">
<h5 v-if="part.title">{{part.title}}</h5>
<component
:is="part.component"
@@ -35,7 +35,7 @@
@click.prevent
>
<a-anchor-link
:href="`#form-${index}`"
:href="`#form-${index}-${id}`"
:key="index"
:title="part.title"
v-for="(part, index) in parts"
@@ -47,7 +47,7 @@
</template>
<script>
export default {
props: ['param'],
props: ['id', 'param'],
data() {
return {

View File

@@ -20,7 +20,7 @@
</div>
<a-card class="yo-form-page--body">
<template v-for="(part, index) in parts">
<section :id="`form-${index}`" :key="index">
<section :id="`form-${index}-${id}`" :key="index">
<h5 v-if="part.title">{{part.title}}</h5>
<component
:is="part.component"
@@ -56,7 +56,7 @@
</template>
<script>
export default {
props: ['param'],
props: ['id', 'param'],
data() {
return {
@@ -103,8 +103,8 @@ export default {
this.$message.success('保存成功');
this.$confirm({
content: '已添加成功,是否继续添加?',
onOk() {
console.log('OK');
onOk: () => {
this.$refs.forms[0].onProjectChange();
},
onCancel: () => {
this.closeContentWindow();

View File

@@ -35,8 +35,8 @@
</a-radio-group>
</a-form-model-item>
<a-form-model-item class="ant-row-flex" label="房屋编码" prop="no">
<a-row align="top" type="flex">
<a-col flex="50px">
<a-row :gutter="8" align="top" type="flex">
<a-col>
<span>宁波市 -</span>
</a-col>
<a-col flex="1">
@@ -52,7 +52,7 @@
/>
</a-form-model-item>
</a-col>
<a-col class="text-center" flex="20px">
<a-col>
<span>-</span>
</a-col>
<a-col flex="1">
@@ -66,7 +66,7 @@
</a-select>
</a-form-model-item>
</a-col>
<a-col class="text-center" flex="20px">
<a-col>
<span>-</span>
</a-col>
<a-col flex="1">
@@ -83,8 +83,14 @@
/>
</a-form-model-item>
</a-col>
<a-col v-if="codeSuffix">
<span>- {{ codeSuffix }}</span>
</a-col>
</a-row>
</a-form-model-item>
<a-form-model-item :colon="false" :label="true" class="ant-row-flex" v-if="houseCode">
<a-tag :key="index" color="purple" v-for="(item, index) in houseCode">{{ item}}</a-tag>
</a-form-model-item>
<a-form-model-item class="ant-row-flex" label="房屋地址" prop="address">
<a-input placeholder="请输入房屋地址或在地图上选择地点" v-model="form.address" />
</a-form-model-item>
@@ -161,7 +167,7 @@ export default {
type: [{ required: true, message: '请选择房屋性质' }],
industry: [{ validator: validatorIndustry }],
areaCode: [{ required: true, message: '请选择房屋所在区域' }],
projectId: [{ required: true, message: '请选择项目', trigger: 'blur' }],
projectId: [{ required: true, message: '请选择项目' }],
no: [{ required: true, message: '请输入房屋序号', trigger: 'blur' }],
address: [{ required: true, message: '请输入房屋地址', trigger: 'blur' }],
lng: [{ required: true, message: '请在地图中选择坐标' }],
@@ -185,6 +191,58 @@ export default {
};
},
computed: {
/**
* 房屋完整编号,仅展示
*/
houseCode() {
const houseCode = [];
if (this.form.areaCode && this.form.areaCode.length === 4) {
let deep = this.$_.cloneDeep(this.options.areaTree);
this.form.areaCode.forEach((p, i) => {
const _deep = deep.find((m) => m.code === p);
if (i === 3) {
deep = _deep;
} else {
deep = _deep.children;
}
});
houseCode.push(...deep.adCode.split(''));
} else {
houseCode.push(...'XXXXXXXXXXXX'.split(''));
}
if (this.form.projectId) {
const project = this.options.projects.find((p) => p.id === this.form.projectId);
houseCode.push(...`000${project.sort}`.slice(-3).split(''));
} else {
houseCode.push(...'XXX'.split(''));
}
if (this.form.no) {
houseCode.push(...`000${this.form.no}`.slice(-3).split(''));
} else {
houseCode.push(...'XXX'.split(''));
}
if (this.codeSuffix) {
houseCode.push(this.codeSuffix);
}
return houseCode;
},
/**
* 非住宅编号后缀,仅展示
*/
codeSuffix() {
if (this.form.industry) {
const houseIndustry = this.codes.houseIndustry.find((p) => p.code == this.form.industry);
return houseIndustry.extCode.tag;
}
return '';
},
},
async created() {
await this.onInit();
this.onFillData();

View File

@@ -6,7 +6,7 @@
<br />
<a-card class="yo-form-page--body">
<template v-for="(part, index) in parts">
<section :id="`form-${index}`" :key="index">
<section :id="`form-${index}-${id}`" :key="index">
<h5 v-if="part.title">{{part.title}}</h5>
<component
:frame="frame"
@@ -30,7 +30,7 @@
@click.prevent
>
<a-anchor-link
:href="`#form-${index}`"
:href="`#form-${index}-${id}`"
:key="index"
:title="part.title"
v-for="(part, index) in parts"
@@ -42,7 +42,7 @@
</template>
<script>
export default {
props: ['param', 'frame'],
props: ['id', 'param', 'frame'],
data() {
return {

View File

@@ -12,7 +12,7 @@
<br />
<a-card class="yo-form-page--body">
<template v-for="(part, index) in parts">
<section :id="`form-curtainwall-${index}`" :key="index">
<section :id="`form-curtainwall-${index}-${id}`" :key="index">
<h5 v-if="part.title">{{part.title}}</h5>
<component
:is="part.component"
@@ -35,7 +35,7 @@
@click.prevent
>
<a-anchor-link
:href="`#form-curtainwall-${index}`"
:href="`#form-curtainwall-${index}-${id}`"
:key="index"
:title="part.title"
v-for="(part, index) in parts"
@@ -47,7 +47,7 @@
</template>
<script>
export default {
props: ['param'],
props: ['id', 'param'],
data() {
return {

View File

@@ -14,7 +14,7 @@
<br />
<a-card class="yo-form-page--body">
<template v-for="(part, index) in parts">
<section :id="`form-facebrick-${index}`" :key="index">
<section :id="`form-facebrick-${index}-${id}`" :key="index">
<h5 v-if="part.title">{{part.title}}</h5>
<component
:is="part.component"
@@ -37,7 +37,7 @@
@click.prevent
>
<a-anchor-link
:href="`#form-facebrick-${index}`"
:href="`#form-facebrick-${index}-${id}`"
:key="index"
:title="part.title"
v-for="(part, index) in parts"
@@ -49,7 +49,7 @@
</template>
<script>
export default {
props: ['param'],
props: ['id', 'param'],
data() {
return {

View File

@@ -52,6 +52,7 @@
>
<component
:frame="self"
:id="id"
:is="tab.component"
:param="param"
ref="forms"
@@ -66,7 +67,7 @@
</template>
<script>
export default {
props: ['param'],
props: ['id', 'param'],
data() {
return {

View File

@@ -1,232 +0,0 @@
<template>
<container>
<br />
<a-card :bordered="false">
<yo-table
:columns="columns"
:load-data="loadData"
@query="onQuery"
@resetQuery="onResetQuery"
ref="table"
>
<Auth auth="sysDictType:page" slot="query">
<a-form-model-item label="类型名称">
<a-input placeholder="请输入类型名称" v-model="query.name" />
</a-form-model-item>
<a-form-model-item label="唯一编码">
<a-input placeholder="请输入唯一编码" v-model="query.code" />
</a-form-model-item>
</Auth>
<Auth auth="sysDictType:add" slot="operator">
<a-button @click="onOpen('add-form')" icon="plus">新增字典类型</a-button>
</Auth>
<!-- 格式化字段内容 -->
<span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
<!-- 添加操作控件 -->
<span slot="action" slot-scope="text, record">
<yo-table-actions>
<Auth auth="sysDictType:edit">
<a @click="onOpen('edit-form', record)">编辑</a>
</Auth>
<Auth auth="sysDictType:delete">
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
<a>删除</a>
</a-popconfirm>
</Auth>
<!-- 可在此处添加其他操作控件 -->
</yo-table-actions>
</span>
<div slot="expandedRowRender" slot-scope="record">
<dict-data :codes="codes" :type="record" />
</div>
</yo-table>
</a-card>
<br />
<yo-modal-form :action="$api.sysDictTypeAdd" @ok="onReloadData" ref="add-form" title="新增字典类型">
<form-body />
</yo-modal-form>
<yo-modal-form :action="$api.sysDictTypeEdit" @ok="onReloadData" ref="edit-form" title="编辑字典类型">
<form-body />
</yo-modal-form>
</container>
</template>
<script>
import DictData from './dictdata';
import FormBody from './form';
export default {
components: {
DictData,
FormBody,
},
data() {
return {
query: {},
columns: [
{
title: '类型名称',
dataIndex: 'name',
sorter: true,
},
{
title: '唯一编码',
dataIndex: 'code',
sorter: true,
},
{
title: '排序',
dataIndex: 'sort',
sorter: true,
},
{
title: '备注',
dataIndex: 'remark',
width: 200,
sorter: true,
},
{
title: '状态',
dataIndex: 'status',
scopedSlots: { customRender: 'status' },
sorter: true,
},
],
codes: {
commonStatus: [],
},
};
},
created() {
this.onLoadCodes();
/** 根据权限添加操作列 */
const flag = this.$auth({ sysDictType: [['edit'], ['delete']] });
if (flag) {
this.columns.push({
title: '操作',
width: '150px',
dataIndex: 'action',
scopedSlots: { customRender: 'action' },
});
}
},
methods: {
/**
* 必要的方法
* 传给yo-table以示意数据接口及其参数和返回的数据结构
*/
loadData(params) {
return (
this.$api
/** !!此处必须修改调用的接口方法 */
.sysDictTypePage({
...params,
...this.query,
})
.then((res) => {
const data = res.data;
data.rows = data.rows.map(
(p) =>
(p = {
...p,
data: [],
query: {},
})
);
return data;
})
);
},
/**
* 有查询功能时的必要方法
* 加载数据时初始化分页信息
*/
onQuery() {
this.$refs.table.onReloadData(true);
},
/**
* 有查询功能时的必要方法
* 重置查询条件
*/
onResetQuery() {
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
this.query = {};
this.onQuery();
},
/**
* 必要方法
* 重新列表数据
*/
onReloadData() {
this.$refs.table.onReloadData();
},
/**
* 必要方法
* 加载字典数据
* 如果不需要获取相应的字典数据,此方法内容可空
*/
onLoadCodes() {
this.$api.$queue([this.$api.sysDictTypeDropDownAwait({ code: 'common_status' })]).then(([commonStatus]) => {
this.codes.commonStatus = commonStatus.data;
});
},
/**
* 必要方法
* 绑定数据字典值
*/
bindCodeValue(code, name) {
const c = this.codes[name].find((p) => p.code == code);
if (c) {
return c.value;
}
return null;
},
/**
* 必要方法
* 从列表页调用窗口的打开方法
*/
onOpen(formName, record) {
this.$refs[formName].onOpen({
record,
});
},
/**
* 必要方法
* 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
*/
onResult(success, successMessage) {
if (success) {
this.$message.success(successMessage);
this.onReloadData();
}
},
/**
* 必要方法
* 删除时调用
*/
onDelete(record) {
this.$refs.table.onLoading();
this.$api
/** !!此处必须修改调用的接口方法 */
.sysDictTypeDelete(record)
.then(({ success }) => {
this.onResult(success, '删除成功');
})
.finally(() => {
this.$refs.table.onLoaded();
});
},
},
};
</script>

View File

@@ -40,7 +40,7 @@
<a-input placeholder="请输入字典值" v-model="record.code" />
</Auth>
<Auth auth="sysDictData:edit" slot="extCode" slot-scope="text, record">
<a @click="onOpen('ext-code-form', record)">编辑</a>
<a @click="onOpen('ext-code-form', record)" class="json-editor">JSON</a>
</Auth>
<Auth auth="sysDictData:edit" slot="sort" slot-scope="text, record">
<a-input-number
@@ -85,14 +85,28 @@
</yo-modal-form>
</a-card>
</template>
<style scoped>
.ant-card>>>.ant-table-footer {
<style lang="less" scoped>
@import (reference) '~@/assets/style/app.less';
.ant-card {
/deep/.ant-table-footer {
border-width: 1px 0 0 !important;
background-color: transparent;
}
.ant-card>>>.yo-table .ant-table-content .ant-table-body>table>.ant-table-thead>tr>th:last-child,
.ant-card>>>.yo-table .ant-table-content .ant-table-body>table>.ant-table-tbody>tr>td:last-child {
}
/deep/.yo-table .ant-table-content .ant-table-body>table>.ant-table-thead>tr>th:last-child,
/deep/.yo-table .ant-table-content .ant-table-body>table>.ant-table-tbody>tr>td:last-child {
border-right-width: 0 !important;
}
.json-editor {
font-weight: bold;
display: inline-block;
transform: scaleY(.85);
color: transparent;
background-image: linear-gradient(135deg, @primary-color, @success-color);
-webkit-background-clip: text;
}
}
</style>