opencode/vben-web
1
0
Fork 0
forked from gitee/vben-web
Code Pull Requests Activity

修改DEMO示例

Browse Source
This commit is contained in:
zsvg
2022-06-15 18:48:17 +08:00
parent 180e8172de
commit 7fd5f90b85
22 changed files with 1412 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/comps/gen/GenModal.vue
+4 -1
View File
@@ -1,5 +1,4 @@
<template>
<el-dialog v-model='dialogVisible' title='弹框选择' draggable width='500px' :before-close='handleClose'>
<el-card class='box-card' style='height: 500px;' body-style='height: 100%;overflow: auto'>
<template #header>
@@ -97,6 +96,10 @@ const handleCommand = (command: string | number | object) => {
ElMessage(`click on item ${command}`);
};
const handleClose=()=>{
}
// // 初始化表格数据
const initTreeData = async () => {
src/comps/gen/GenUpload.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<el-dialog v-model='dialogVisible' title='文件上传' draggable width='500px' :before-close='handleClose'>
<el-dialog v-model='dialogVisible' title='文件上传' draggable width='500px'>
<el-upload
class="upload-demo"
drag ref="upload"
src/pages/ass/dict/data/edit.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<el-dialog v-model='state.show' title='字典值编辑' draggable width='500px' :before-close='handleClose'>
<el-dialog v-model='state.show' title='字典值编辑' draggable width='500px'>
<el-form ref='formRef' :model='form' label-width='120px'>
<el-form-item label='字典值编码：' prop='code' :rules="[{ required: true, message: '编码不能为空'}]">
<el-input v-model='form.code'></el-input>
src/pages/ass/dict/main/edit.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<el-dialog v-model='state.show' title='字典编辑' draggable width='500px' :before-close='handleClose'>
<el-dialog v-model='state.show' title='字典编辑' draggable width='500px'>
<el-form ref='formRef' :model='form' label-width='120px'>
<el-form-item label='字典类型：' prop='id' :rules="[{ required: true, message: '类型不能为空'}]">
<el-input v-model='form.id' placeholder="字母编码" :disabled='form.crtim?true:false'></el-input>
src/pages/mon/log/oper/view.vue
+3
View File
@@ -19,6 +19,9 @@
<el-form-item label='浏览器：' style="width: 45%;">
{{ form.agbro }}
</el-form-item>
<el-form-item label='请求参数：' style="width: 100%;">
{{ form.params }}
</el-form-item>
</el-form>
<template #footer>
<span class='dialog-footer'>
src/pages/sa/agent/cate/edit.vue
+63
View File
@@ -0,0 +1,63 @@
<template>
<el-dialog v-model='state.show' title='代理商分类' draggable width='500px'>
<el-form ref='formRef' :model='form' label-width='120px'>
<el-form-item label='分类名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
<el-input v-model='form.name'></el-input>
</el-form-item>
<el-form-item label='排序号：' prop='ornum'>
<el-input-number v-model='form.ornum' controls-position='right' style='width: 100%' />
</el-form-item>
<el-form-item label='是否可用：' prop='avtag'>
<el-switch v-model='form.avtag'>
</el-switch>
</el-form-item>
<el-form-item label='备注：' prop='notes'>
<el-input type='textarea' :rows='4' v-model='form.notes'>
</el-input>
</el-form-item>
</el-form>
<template #footer>
<span class='dialog-footer'>
<el-button type='primary' @click='handleConfirm'>确 认</el-button>
<el-button @click='state.show = false'>取 消</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang='ts' setup>
import { defineExpose, reactive, ref, toRefs } from 'vue';
import { modalSave } from '/@/comps/page/edit';
import request from '/@/utils/request';
const state = reactive({
url: '/sa/agent/cate', show: false,
form: { avtag: true } as any,
});
const { form } = toRefs(state);
const formRef = ref();
const openModal = async (data: any) => {
if (data && data.id) {
state.form = await request({
url: state.url + '/one/' + data.id,
method: 'get',
});
} else {
state.form = { avtag: true };
if (formRef.value) {
formRef.value.resetFields();
}
}
state.show = true;
};
defineExpose({ openModal });
const emits = defineEmits(['close']);
const handleConfirm = async () => {
await modalSave({ formRef: formRef.value, state });
emits('close');
};
</script>
src/pages/sa/agent/cate/index.vue
+62
View File
@@ -0,0 +1,62 @@
<template>
<div>
<el-card class='box-card'>
<template #header>
<el-row>
<el-col :span='14'>
<el-input v-model='state.form.name' placeholder='输入名称回车查询' class='list-search' clearable @keyup.enter='listQuery(state)' />
<el-button type='primary' @click='listQuery(state)' plain>查 询</el-button>
</el-col>
<el-col :span='10' style='text-align: right'>
<el-button type='success' :icon='Plus' @click='editRef.openModal()' plain>新增</el-button>
<el-button type='danger' :icon='Delete' :disabled='state.multiple' @click='listDelete(state)' plain>删除</el-button>
</el-col>
</el-row>
</template>
<el-table height='400' :cell-style="{padding:'2px'}" :row-style="{height: '36px'}"
v-loading='state.loading' :data='state.list'
border stripe @selection-change='listSelect($event,state)'>
<el-table-column type='selection' width='55' align='center' />
<el-table-column label='序号' type='index' width='55' align='center' />
<el-table-column label='分类名称' width='140'>
<template #default='scope'>
<span style='cursor:pointer;color: #3e9ece' @click='editRef.openModal({id:scope.row.id})'>
{{ scope.row.name }}
</span>
</template>
</el-table-column>
<el-table-column label='创建时间' prop='crtim' width='150' />
<el-table-column label='创建人' prop='crman' width='60' />
<el-table-column label='更新时间' prop='uptim' width='150' />
<el-table-column label='更新人' prop='upman' width='60' />
<el-table-column label='备注' prop='notes' />
</el-table>
<el-pagination
@size-change='listQuery(state)' @current-change='listQuery(state)'
class='mt8' :pager-count='5' :page-sizes='[10, 20, 30]' background
:total='state.total' v-model:current-page='state.form.page'
v-model:page-size='state.form.pageSize'
layout='total, sizes, prev, pager, next, jumper'
/>
</el-card>
<CateEdit ref='editRef' @close='listQuery(state)' />
</div>
</template>
<script lang='ts' setup>
import { Plus, Delete } from '@element-plus/icons-vue';
import { onMounted, reactive, ref } from 'vue';
import { listQuery, listDelete, listSelect } from '/@/comps/page/index';
import CateEdit from './edit.vue';
const state = reactive({
url: '/sa/agent/cate', loading: true, ids: [],
form: {}, single: true, multiple: true, list: [], total: 0,
});
onMounted(() => {
listQuery(state);
});
const editRef = ref() as any;
</script>
src/pages/sa/agent/main/edit.vue
+157 -140
View File
@@ -1,104 +1,112 @@
<template>
<el-card class='box-card' :body-style="{padding:'2px 8px'}" shadow='never'>
<template #header>
<el-row>
<el-col :span='10'>
<div style='line-height: 32px'>代理商维护</div>
</el-col>
<el-col :span='14' style='text-align: right'>
<el-button type='success' @click='tabSave({formRef,state,proxy,route})' plain>保 存</el-button>
<el-button type='info' @click='tabClose({proxy,route})' plain>关 闭</el-button>
</el-col>
</el-row>
</template>
<div style='margin-top: 8px;margin-bottom: 8px'>
<el-form ref="formRef" :inline="true" class='yform' :model='form' label-width='140px'>
<el-tabs type='card' v-model='activeName'>
<el-tab-pane label='基本信息' name='tab1'>
<div class="yform-div">
<el-form-item label='代理商名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
<el-input v-model='form.name'></el-input>
</el-form-item>
<el-form-item label='代理商编号：'>
<span v-show="form.id" style="margin-left: 5px;color: green">{{ form.senum }}</span>
<span v-show="!form.id" style="margin-left: 5px;color: #b9abab">提交后自动生成</span>
</el-form-item>
<el-form-item label='代理商地址：' style="width: 100%">
<el-input v-model='form.addre' readonly @click="chooseAddr"></el-input>
</el-form-item>
<el-form-item label='代理商资质：'>
<el-select v-model='form.level' placeholder='请选择' style="width: 100%">
<el-option v-for='item in state.levels' :key='item.id' :value='item.id' :label="item.name"/>
</el-select>
</el-form-item>
<el-form-item label='代理商经办人：'>
<el-input v-model='opmna' @click='openOrgModal' readonly></el-input>
</el-form-item>
<el-form-item label='可查看者：' style="width: 100%">
<el-input type='textarea' :rows='4' v-model='viewersName' readonly @click='openOrgsModal'>
</el-input>
</el-form-item>
</div>
</el-tab-pane>
<el-tab-pane label='其他信息' name='tab9'>
<div class="yform-div">
<el-form-item label='备注：' style="width: 100%">
<el-input type='textarea' :rows='4' v-model='form.notes'/>
</el-form-item>
<el-form-item label='创建人：' style="width: 25%">
<div class='zinput'> {{ form.crman ? form.crman.name : '' }}</div>
</el-form-item>
<el-form-item label='创建时间：' style="width: 25%">
<div class='zinput'> {{ form.crtim }}</div>
</el-form-item>
<el-form-item label='更新人：' style="width: 25%">
<div class='zinput'> {{ form.upman ? form.upman.name : '' }}</div>
</el-form-item>
<el-form-item label='更新时间：' style="width: 25%">
<div class='zinput'> {{ form.uptim }}</div>
</el-form-item>
</div>
</el-tab-pane>
</el-tabs>
</el-form>
</div>
<div id="simpleSquare"></div>
<OrgModal ref='orgModal' @close='closeOrgModal'/>
<Amap ref='amapRef' @close='closeAmap'/>
</el-card>
<el-card class='box-card' :body-style="{padding:'2px 8px'}" shadow='never'>
<template #header>
<el-row>
<el-col :span='10'>
<div style='line-height: 32px'>代理商编辑</div>
</el-col>
<el-col :span='14' style='text-align: right'>
<el-button type='success' @click='tabSave({formRef,state,proxy,route})' plain>保 存</el-button>
<el-button type='info' @click='tabClose({proxy,route})' plain>关 闭</el-button>
</el-col>
</el-row>
</template>
<div style='margin-top: 8px;margin-bottom: 8px'>
<el-form ref='formRef' :inline='true' class='yform' :model='form' label-width='140px'>
<el-tabs type='card' v-model='activeName'>
<el-tab-pane label='基本信息' name='tab1'>
<div class='yform-div'>
<el-form-item label='代理商名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
<el-input v-model='form.name'></el-input>
</el-form-item>
<el-form-item label='代理商分类：' prop='catid' :rules="[{ required: true, message: '分类不能为空'}]" style='width: 25%'>
<el-select v-model='form.catid' style='width: 100%'>
<el-option v-for='item in state.cates' :key='item.id' :label='item.name' :value='item.id' />
</el-select>
</el-form-item>
<el-form-item label='代理商编号：' style='width: 25%'>
<span v-show='form.id' style='margin-left: 5px;color: green'>{{ form.senum }}</span>
<span v-show='!form.id' style='margin-left: 5px;color: #b9abab'>提交后自动生成</span>
</el-form-item>
<el-form-item label='代理商地址：' style='width: 100%'>
<el-input v-model='form.addre' readonly @click='chooseAddr'></el-input>
</el-form-item>
<el-form-item label='代理商资质：'>
<el-select v-model='form.level' placeholder='请选择' style='width: 100%'>
<el-option v-for='item in state.levels' :key='item.id' :value='item.id' :label='item.name' />
</el-select>
</el-form-item>
</div>
</el-tab-pane>
<el-tab-pane label='权限信息' name='tab9'>
<div class='yform-div'>
<el-form-item label='备注：' style='width: 100%'>
<el-input type='textarea' :rows='4' v-model='form.notes' />
</el-form-item>
<el-form-item label='可查看者：' style='width: 50%'>
<el-input type='textarea' :rows='4' v-model='viewersName' readonly @click='openViewersModal'>
</el-input>
</el-form-item>
<el-form-item label='可编辑者：' style='width: 50%'>
<el-input type='textarea' :rows='4' v-model='editorsName' readonly @click='openEditorsModal'>
</el-input>
</el-form-item>
<el-form-item label='创建人：' style='width: 25%'>
<div class='zinput'> {{ form.crman ? form.crman.name : '' }}</div>
</el-form-item>
<el-form-item label='创建时间：' style='width: 25%'>
<div class='zinput'> {{ form.crtim }}</div>
</el-form-item>
<el-form-item label='更新人：' style='width: 25%'>
<div class='zinput'> {{ form.upman ? form.upman.name : '' }}</div>
</el-form-item>
<el-form-item label='更新时间：' style='width: 25%'>
<div class='zinput'> {{ form.uptim }}</div>
</el-form-item>
</div>
</el-tab-pane>
</el-tabs>
</el-form>
</div>
<div id='simpleSquare'></div>
<OrgModal ref='orgModal' @close='closeOrgModal' />
<Amap ref='amapRef' @close='closeAmap' />
</el-card>
</template>
<script lang='ts'>
export default {name: 'SaAgentMainEdit'};
export default { name: 'SaAgentMainEdit' };
</script>
<script lang='ts' setup>
import {computed, getCurrentInstance, onMounted, reactive, ref, toRaw, toRefs} from 'vue';
import {editInit, tabSave, tabClose} from '/@/comps/page/edit';
import {useRoute} from 'vue-router';
import { computed, getCurrentInstance, onMounted, reactive, ref, toRaw, toRefs } from 'vue';
import { editInit, tabSave, tabClose } from '/@/comps/page/edit';
import { useRoute } from 'vue-router';
import OrgModal from '/@/comps/sys/OrgModal.vue';
import Amap from '/@/comps/ass/amap.vue';
import {FormInstance} from "element-plus";
import request from "/@/utils/request";
import { SVG } from "@svgdotjs/svg.js"
import { FormInstance } from 'element-plus';
import request from '/@/utils/request';
import { SVG } from '@svgdotjs/svg.js';
const route = useRoute();
const formRef = ref<FormInstance>();
const {proxy} = getCurrentInstance() as any;
const { proxy } = getCurrentInstance() as any;
const activeName = ref('tab1');
const state = reactive({
url: '/sa/agent/main',
params: {path: '', query: ''}, levels: [] as any,
form: {avtag: true, items: [] as any} as any,
url: '/sa/agent/main',
params: { path: '', query: '' }, levels: [] as any, cates: [] as any,
form: { avtag: true, items: [] as any } as any,
});
const {form} = toRefs(state);
const { form } = toRefs(state);
onMounted(async () => {
await editInit({state, route});
await levelsInit();
let shapeModel = SVG().addTo("#simpleSquare").size("100%", "100%");
shapeModel.rect(100, 100).attr({ fill: "#00B1B6" });
await editInit({ state, route });
await catesInit();
await levelsInit();
let shapeModel = SVG().addTo('#simpleSquare').size('100%', '100%');
shapeModel.rect(100, 100).attr({ fill: '#00B1B6' });
//http://t.zoukankan.com/onesea-p-15292991.html
});
@@ -106,84 +114,93 @@ onMounted(async () => {
//region 经办人与可查看者选择逻辑
const orgModal = ref();
const openOrgModal = () => {
orgModal.value.openModal({
opener: 'opman',
orgType: 8,
});
const openViewersModal = () => {
orgModal.value.openModal({
opener: 'viewers',
orgType: 11,
selectMode: 2,
orgs: toRaw(form.value.viewers),
});
};
const openOrgsModal = () => {
orgModal.value.openModal({
opener: 'viewers',
orgType: 11,
selectMode: 2,
orgs: toRaw(form.value.viewers),
});
const openEditorsModal = () => {
orgModal.value.openModal({
opener: 'editors',
orgType: 11,
selectMode: 2,
orgs: toRaw(form.value.editors),
});
};
const closeOrgModal = (data: any) => {
if (data.opener == "opman") {
if (data.orgs && data.orgs.length > 0) {
form.value.opman = {id: data.orgs[0].id, name: data.orgs[0].name};
form.value.opmid = data.orgs[0].id;
} else {
form.value.opman = null;
form.value.opmid = null;
}
} else if (data.opener == "viewers") {
if (data.orgs && data.orgs.length > 0) {
form.value.viewers = data.orgs;
} else {
form.value.viewers = null;
}
}
if (data.opener == 'viewers') {
if (data.orgs && data.orgs.length > 0) {
form.value.viewers = data.orgs;
} else {
form.value.viewers = null;
}
} else if (data.opener == 'editors') {
if (data.orgs && data.orgs.length > 0) {
form.value.editors = data.orgs;
} else {
form.value.editors = null;
}
}
};
const opmna = computed(() => {
let name = '';
if (form.value.opman) {
name = form.value.opman.name;
}
return name;
const viewersName = computed(() => {
let names = '';
if (form.value.viewers && form.value.viewers.length > 0) {
for (const user of form.value.viewers) {
names += user.name + '；';
}
}
return names;
});
const viewersName = computed(() => {
let names = '';
if (form.value.viewers && form.value.viewers.length > 0) {
for (const user of form.value.viewers) {
names += user.name + '；';
}
}
return names;
const editorsName = computed(() => {
let names = '';
if (form.value.editors && form.value.editors.length > 0) {
for (const user of form.value.editors) {
names += user.name + '；';
}
}
return names;
});
//endregion
//region 地址选择逻辑
const amapRef = ref();
const chooseAddr = () => {
amapRef.value.openModal({adcoo: form.value.adcoo, adreg: form.value.adreg, addet: form.value.addet, adzoo: ''});
}
amapRef.value.openModal({ adcoo: form.value.adcoo, adreg: form.value.adreg, addet: form.value.addet, adzoo: '' });
};
const closeAmap = (data: any) => {
if (data) {
form.value.addre = data.adreg + data.addet;
form.value.adcoo = data.adcoo;
form.value.adreg = data.adreg;
form.value.addet = data.addet;
form.value.adpro = data.adpro;
form.value.adcit = data.adcit;
form.value.addis = data.addis;
}
}
if (data) {
form.value.addre = data.adreg + data.addet;
form.value.adcoo = data.adcoo;
form.value.adreg = data.adreg;
form.value.addet = data.addet;
form.value.adpro = data.adpro;
form.value.adcit = data.adcit;
form.value.addis = data.addis;
}
};
//endregion
//region 业务字典逻辑
const levelsInit = async () => {
state.levels = await request({
url: '/ass/dict/data/list?maiid=AG_LEVEL',
method: 'get',
});
state.levels = await request({
url: '/ass/dict/data/list?maiid=AG_LEVEL',
method: 'get',
});
};
const catesInit = async () => {
state.cates = await request({
url: '/sa/agent/cate/list',
method: 'get',
});
};
//endregion
src/pages/sa/agent/main/index.vue
+2 -2
View File
@@ -5,7 +5,7 @@
<el-row>
<el-col :span='14'>
<el-input v-model='state.form.name' placeholder='输入名称回车查询' class='list-search' clearable @keyup.enter='listQuery(state)' />
<el-button type='primary' @click='listQuery(state)' plain v-waves='purple'>查 询</el-button>
<el-button type='primary' @click='listQuery(state)' plain>查 询</el-button>
<el-button class='more-button' :icon='state.moreParams?ArrowUp:ArrowDown' plain @click='state.moreParams=!state.moreParams' />
</el-col>
<el-col :span='10' style='text-align: right'>
@@ -56,7 +56,7 @@
layout='total, sizes, prev, pager, next, jumper'
/>
</el-card>
<GenUpload ref='uploadModal' @close='closeOrgModal'/>
<GenUpload ref='uploadModal'/>
</div>
</template>
src/pages/sa/cust/cate/edit.vue
+63
View File
@@ -0,0 +1,63 @@
<template>
<el-dialog v-model='state.show' title='客户分类' draggable width='500px'>
<el-form ref='formRef' :model='form' label-width='120px'>
<el-form-item label='分类名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
<el-input v-model='form.name'></el-input>
</el-form-item>
<el-form-item label='排序号：' prop='ornum'>
<el-input-number v-model='form.ornum' controls-position='right' style='width: 100%' />
</el-form-item>
<el-form-item label='是否可用：' prop='avtag'>
<el-switch v-model='form.avtag'>
</el-switch>
</el-form-item>
<el-form-item label='备注：' prop='notes'>
<el-input type='textarea' :rows='4' v-model='form.notes'>
</el-input>
</el-form-item>
</el-form>
<template #footer>
<span class='dialog-footer'>
<el-button type='primary' @click='handleConfirm'>确 认</el-button>
<el-button @click='state.show = false'>取 消</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang='ts' setup>
import { defineExpose, reactive, ref, toRefs } from 'vue';
import { modalSave } from '/@/comps/page/edit';
import request from '/@/utils/request';
const state = reactive({
url: '/sa/cust/cate', show: false,
form: { avtag: true } as any,
});
const { form } = toRefs(state);
const formRef = ref();
const openModal = async (data: any) => {
if (data && data.id) {
state.form = await request({
url: state.url + '/one/' + data.id,
method: 'get',
});
} else {
state.form = { avtag: true };
if (formRef.value) {
formRef.value.resetFields();
}
}
state.show = true;
};
defineExpose({ openModal });
const emits = defineEmits(['close']);
const handleConfirm = async () => {
await modalSave({ formRef: formRef.value, state });
emits('close');
};
</script>
src/pages/sa/cust/cate/index.vue
+62
View File
@@ -0,0 +1,62 @@
<template>
<div>
<el-card class='box-card'>
<template #header>
<el-row>
<el-col :span='14'>
<el-input v-model='state.form.name' placeholder='输入名称回车查询' class='list-search' clearable @keyup.enter='listQuery(state)' />
<el-button type='primary' @click='listQuery(state)' plain>查 询</el-button>
</el-col>
<el-col :span='10' style='text-align: right'>
<el-button type='success' :icon='Plus' @click='editRef.openModal()' plain>新增</el-button>
<el-button type='danger' :icon='Delete' :disabled='state.multiple' @click='listDelete(state)' plain>删除</el-button>
</el-col>
</el-row>
</template>
<el-table height='400' :cell-style="{padding:'2px'}" :row-style="{height: '36px'}"
v-loading='state.loading' :data='state.list'
border stripe @selection-change='listSelect($event,state)'>
<el-table-column type='selection' width='55' align='center' />
<el-table-column label='序号' type='index' width='55' align='center' />
<el-table-column label='分类名称' width='140'>
<template #default='scope'>
<span style='cursor:pointer;color: #3e9ece' @click='editRef.openModal({id:scope.row.id})'>
{{ scope.row.name }}
</span>
</template>
</el-table-column>
<el-table-column label='创建时间' prop='crtim' width='150' />
<el-table-column label='创建人' prop='crman' width='60' />
<el-table-column label='更新时间' prop='uptim' width='150' />
<el-table-column label='更新人' prop='upman' width='60' />
<el-table-column label='备注' prop='notes' />
</el-table>
<el-pagination
@size-change='listQuery(state)' @current-change='listQuery(state)'
class='mt8' :pager-count='5' :page-sizes='[10, 20, 30]' background
:total='state.total' v-model:current-page='state.form.page'
v-model:page-size='state.form.pageSize'
layout='total, sizes, prev, pager, next, jumper'
/>
</el-card>
<CateEdit ref='editRef' @close='listQuery(state)' />
</div>
</template>
<script lang='ts' setup>
import { Plus, Delete } from '@element-plus/icons-vue';
import { onMounted, reactive, ref } from 'vue';
import { listQuery, listDelete, listSelect } from '/@/comps/page/index';
import CateEdit from './edit.vue';
const state = reactive({
url: '/sa/cust/cate', loading: true, ids: [],
form: {}, single: true, multiple: true, list: [], total: 0,
});
onMounted(() => {
listQuery(state);
});
const editRef = ref() as any;
</script>
src/pages/sa/cust/main/edit.vue
+102 -66
View File
@@ -1,86 +1,122 @@
<template>
<el-card class='box-card' :body-style="{padding:'2px 8px'}" shadow='never'>
<template #header>
<el-row>
<el-col :span='10'>
<div style='line-height: 32px'>客户维护</div>
</el-col>
<el-col :span='14' style='text-align: right'>
<el-button type='success' @click='tabSave({formRef,state,proxy,route})' plain>保 存</el-button>
<el-button type='info' @click='tabClose({proxy,route})' plain>关 闭</el-button>
</el-col>
</el-row>
</template>
<div style='margin-top: 8px;margin-bottom: 8px'>
<el-form ref="formRef" :inline="true" class='yform' :model='form' label-width='140px'>
<el-tabs type='card' v-model='activeName'>
<el-tab-pane label='基本信息' name='tab1'>
<div class="yform-div">
<el-form-item label='客户名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]" style="width: 100%">
<el-input v-model='form.name'></el-input>
</el-form-item>
<el-form-item label='客户地址：'>
<el-input v-model='form.addre'></el-input>
</el-form-item>
<el-form-item label='是否可用：'>
<el-switch v-model='form.avtag'>
</el-switch>
</el-form-item>
</div>
</el-tab-pane>
<el-tab-pane label='其他信息' name='tab9'>
<div class="yform-div">
<el-form-item label='备注：' style="width: 100%">
<el-input style="font-family: 'Courier New', Helvetica, Arial, sans-serif; font-size:16px"
type='textarea' :rows='4' v-model='form.notes'>
</el-input>
</el-form-item>
<el-form-item label='创建人：' style="width: 25%">
{{ form.crman ? form.crman.name : '' }}
</el-form-item>
<el-form-item label='创建时间：' style="width: 25%">
<div class='zinput'> {{ form.crtim }}</div>
</el-form-item>
<el-form-item label='更新人：' style="width: 25%">
{{ form.upman ? form.upman.name : '' }}
</el-form-item>
<el-form-item label='更新时间：' style="width: 25%">
<div class='zinput'> {{ form.uptim }}</div>
</el-form-item>
</div>
</el-tab-pane>
</el-tabs>
</el-form>
</div>
</el-card>
<el-card class='box-card' :body-style="{padding:'2px 8px'}" shadow='never'>
<template #header>
<el-row>
<el-col :span='10'>
<div style='line-height: 32px'>客户编辑</div>
</el-col>
<el-col :span='14' style='text-align: right'>
<el-button type='success' @click='tabSave({formRef,state,proxy,route})' plain>保 存</el-button>
<el-button type='info' @click='tabClose({proxy,route})' plain>关 闭</el-button>
</el-col>
</el-row>
</template>
<div style='margin-top: 8px;margin-bottom: 8px'>
<el-form ref='formRef' :inline='true' class='yform' :model='form' label-width='140px'>
<el-tabs type='card' v-model='activeName'>
<el-tab-pane label='基本信息' name='tab1'>
<div class='yform-div'>
<el-form-item label='客户名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
<el-input v-model='form.name'></el-input>
</el-form-item>
<el-form-item label='客户分类：' prop='catid' :rules="[{ required: true, message: '分类不能为空'}]" style='width: 25%'>
<el-select v-model='form.catid' style='width: 100%'>
<el-option v-for='item in state.cates' :key='item.id' :label='item.name' :value='item.id' />
</el-select>
</el-form-item>
<el-form-item label='客户编号：' style='width: 25%'>
<span v-show='form.id' style='margin-left: 5px;color: green'>{{ form.senum }}</span>
<span v-show='!form.id' style='margin-left: 5px;color: #b9abab'>提交后自动生成</span>
</el-form-item>
<el-form-item label='客户地址：' style='width: 100%'>
<el-input v-model='form.addre' readonly @click='chooseAddr'></el-input>
</el-form-item>
</div>
</el-tab-pane>
<el-tab-pane label='权限信息' name='tab9'>
<Perm ref='permRef' :form='form' v-if='state.permShow' @update='update' :orgModal='orgModal' />
</el-tab-pane>
</el-tabs>
</el-form>
</div>
<div id='simpleSquare'></div>
<OrgModal ref='orgModal' @close='closeOrgModal' />
<Amap ref='amapRef' @close='closeAmap' />
</el-card>
</template>
<script lang='ts'>
export default {name: 'SaCustMainEdit'};
export default { name: 'SaCustMainEdit' };
</script>
<script lang='ts' setup>
import {getCurrentInstance, onMounted, reactive, ref, toRefs} from 'vue';
import {editInit, tabSave, tabClose} from '/@/comps/page/edit';
import {useRoute} from 'vue-router';
import {FormInstance} from "element-plus";
import {getCurrentInstance, onMounted, reactive, ref, toRaw, toRefs } from 'vue';
import { editInit, tabSave, tabClose } from '/@/comps/page/edit';
import { useRoute } from 'vue-router';
import OrgModal from '/@/comps/sys/OrgModal.vue';
import Amap from '/@/comps/ass/amap.vue';
import { FormInstance } from 'element-plus';
import request from '/@/utils/request';
import Perm from './perm.vue';
const route = useRoute();
const formRef = ref<FormInstance>();
const {proxy} = getCurrentInstance() as any;
const { proxy } = getCurrentInstance() as any;
const activeName = ref('tab1');
const state = reactive({
url: '/sa/cust/main',
params: {path: '', query: ''}, checks: [] as any,
form: {avtag: true, items: [] as any} as any,
url: '/sa/cust/main',permShow: false,
params: { path: '', query: '' }, levels: [] as any, cates: [] as any,
form: { avtag: true, items: [] as any } as any,
});
const {form} = toRefs(state);
const { form } = toRefs(state);
onMounted(async () => {
await editInit({state, route});
await editInit({ state, route });
await catesInit();
state.permShow=true;
});
//region 组织架构选择逻辑
const orgModal = ref();
const permRef = ref();
const closeOrgModal = (data: any) => {
permRef.value.closeOrgModal(data);
};
const update = (props: any) => {
for (const prop in props) {
form.value[prop] = toRaw(props[prop]);
}
};
//endregion
//region 地址选择逻辑
const amapRef = ref();
const chooseAddr = () => {
amapRef.value.openModal({ adcoo: form.value.adcoo, adreg: form.value.adreg, addet: form.value.addet, adzoo: '' });
};
const closeAmap = (data: any) => {
if (data) {
form.value.addre = data.adreg + data.addet;
form.value.adcoo = data.adcoo;
form.value.adreg = data.adreg;
form.value.addet = data.addet;
form.value.adpro = data.adpro;
form.value.adcit = data.adcit;
form.value.addis = data.addis;
}
};
//endregion
//region 业务字典逻辑
const catesInit = async () => {
state.cates = await request({
url: '/sa/agent/cate/list',
method: 'get',
});
};
//endregion
</script>
src/pages/sa/cust/main/index.vue
+11 -16
View File
@@ -10,7 +10,8 @@
</el-col>
<el-col :span='10' style='text-align: right'>
<el-button type='success' :icon='Plus' @click='tabAdd(state.url)' plain>新增</el-button>
<el-button type='success' :icon='Plus' @click='test()' plain>事务测试</el-button>
<el-button type='info' :icon='Upload' @click='listImp' plain>导入</el-button>
<el-button type='info' :icon='Download' plain @click='listExp3' >导出</el-button>
<el-button type='danger' :icon='Delete' :disabled='state.multiple' @click='listDelete(state)' plain>删除</el-button>
</el-col>
</el-row>
@@ -32,16 +33,19 @@
border stripe @selection-change='listSelect($event,state)'>
<el-table-column type='selection' width='55' align='center' />
<el-table-column label='序号' type='index' width='55' align='center' />
<el-table-column label='客户名称' width='180'>
<el-table-column label='客户编号' width='140'>
<template #default='scope'>
<span style='cursor:pointer;color: #3e9ece' @click='tabEdit(state.url,scope.row.id)'>
{{ scope.row.name }}
{{ scope.row.senum }}
</span>
</template>
</el-table-column>
<el-table-column label='客户名称' prop='name' width='250' />
<el-table-column label='客户地址' prop='addre' />
<el-table-column label='创建时间' prop='crtim' width='160' />
<el-table-column label='更新时间' prop='uptim' width='160' />
<el-table-column label='创建时间' prop='crtim' width='150' />
<el-table-column label='创建人' prop='crman' width='60' />
<el-table-column label='更新时间' prop='uptim' width='150' />
<el-table-column label='更新人' prop='upman' width='60' />
</el-table>
<el-pagination
@@ -56,10 +60,9 @@
</template>
<script lang='ts' setup>
import { Plus, Delete, ArrowDown, ArrowUp } from '@element-plus/icons-vue';
import { onMounted, reactive } from 'vue';
import { Plus, Delete, ArrowDown, ArrowUp,Upload,Download } from '@element-plus/icons-vue';
import {onMounted, reactive} from 'vue';
import { listQuery, listDelete, tabAdd, tabEdit, listSelect } from '/@/comps/page/index';
import request from '/@/utils/request';
const state = reactive({
url: '/sa/cust/main', loading: true, ids: [], cates: [] as any,
@@ -70,14 +73,6 @@ onMounted(() => {
listQuery(state);
});
const test =async () => {
await request({
url: state.url + '/test',
method: 'post',
});
};
</script>
<style scoped>
src/pages/sa/cust/main/perm.vue
+119
View File
@@ -0,0 +1,119 @@
<template>
<div class='yform-div'>
<el-form-item label='备注：' style='width: 100%'>
<el-input type='textarea' :rows='4' v-model='cform.notes' />
</el-form-item>
<el-form-item label='可查看者：' style='width: 50%'>
<el-input type='textarea' :rows='4' v-model='viewersName' readonly @click='openViewersModal'>
</el-input>
</el-form-item>
<el-form-item label='可编辑者：' style='width: 50%'>
<el-input type='textarea' :rows='4' v-model='editorsName' readonly @click='openEditorsModal'>
</el-input>
</el-form-item>
<el-form-item label='创建人：' style='width: 25%'>
<div class='zinput'> {{ form.crman ? form.crman.name : '' }}</div>
</el-form-item>
<el-form-item label='创建时间：' style='width: 25%'>
<div class='zinput'> {{ form.crtim }}</div>
</el-form-item>
<el-form-item label='更新人：' style='width: 25%'>
<div class='zinput'> {{ form.upman ? form.upman.name : '' }}</div>
</el-form-item>
<el-form-item label='更新时间：' style='width: 25%'>
<div class='zinput'> {{ form.uptim }}</div>
</el-form-item>
</div>
</template>
<script lang='ts' setup>
import { computed, ref, toRaw, watch } from 'vue';
const props: any = defineProps({
form: Object,
orgModal: Object,
});
const cform = ref({
notes: props.form.notes,
viewers: props.form.viewers,
editors: props.form.editors,
}) as any;
const emit = defineEmits(['update']);
watch(
cform,
(newValue) => {
emit('update', newValue);
},
{
deep: true,
},
);
const openViewersModal = () => {
props.orgModal.openModal({
opener: 'viewers',
orgType: 11,
selectMode: 2,
orgs: toRaw(cform.value.viewers),
});
};
const openEditorsModal = () => {
props.orgModal.openModal({
opener: 'editors',
orgType: 11,
selectMode: 2,
orgs: toRaw(cform.value.editors),
});
};
const closeOrgModal = (data: any) => {
let flag = false;
if (data.opener == 'viewers') {
if (data.orgs && data.orgs.length > 0) {
cform.value.viewers = data.orgs;
} else {
cform.value.viewers = null;
}
flag = true;
} else if (data.opener == 'editors') {
if (data.orgs && data.orgs.length > 0) {
cform.value.editors = data.orgs;
} else {
cform.value.editors = null;
}
flag = true;
}
return flag;
};
const viewersName = computed(() => {
let names = '';
if (cform.value.viewers && cform.value.viewers.length > 0) {
for (const user of cform.value.viewers) {
names += user.name + '；';
}
}
return names;
});
const editorsName = computed(() => {
let names = '';
if (cform.value.editors && cform.value.editors.length > 0) {
for (const user of cform.value.editors) {
names += user.name + '；';
}
}
return names;
});
defineExpose({ closeOrgModal });
</script>
<style scoped>
</style>
src/pages/sa/prod/main/index.vue
+80
View File
@@ -0,0 +1,80 @@
<template>
<div>
<el-card class='box-card'>
<template #header>
<el-row>
<el-col :span='14'>
<el-input v-model='state.form.name' placeholder='输入名称回车查询' class='list-search' clearable @keyup.enter='listQuery(state)' />
<el-button type='primary' @click='listQuery(state)' plain >查 询</el-button>
<el-button class='more-button' :icon='state.moreParams?ArrowUp:ArrowDown' plain @click='state.moreParams=!state.moreParams' />
</el-col>
<el-col :span='10' style='text-align: right'>
<el-button type='success' :icon='Plus' @click='tabAdd(state.url)' plain>新增</el-button>
<!-- <el-button type='info' :icon='Upload' @click='listImp' plain>导入</el-button>-->
<!-- <el-button type='info' :icon='Download' plain @click='listExp3' >导出</el-button>-->
<el-button type='danger' :icon='Delete' :disabled='state.multiple' @click='listDelete(state)' plain>删除</el-button>
</el-col>
</el-row>
<div v-show='state.moreParams' class='more-params'>
<el-form :inline='true' label-width='100px'>
<el-form-item label='备注'>
<el-input v-model='state.form.notes' placeholder='输入备注' />
</el-form-item>
<el-form-item label='xxxxx'>
<el-input v-model='state.form.xx' />
</el-form-item>
<el-form-item />
</el-form>
</div>
</template>
<el-table height='400' :cell-style="{padding:'2px'}" :row-style="{height: '36px'}"
v-loading='state.loading' :data='state.list'
border stripe @selection-change='listSelect($event,state)'>
<el-table-column type='selection' width='55' align='center' />
<el-table-column label='序号' type='index' width='55' align='center' />
<el-table-column label='项目编号' width='140'>
<template #default='scope'>
<span style='cursor:pointer;color: #3e9ece' @click='tabView(state.url,scope.row.id)'>
{{ scope.row.senum }}
</span>
</template>
</el-table-column>
<el-table-column label='项目名称' prop='name' width='250' />
<el-table-column label='项目地址' prop='addre' />
<el-table-column label='创建时间' prop='crtim' width='150' />
<el-table-column label='创建人' prop='crman' width='60' />
<el-table-column label='更新时间' prop='uptim' width='150' />
<el-table-column label='更新人' prop='upman' width='60' />
</el-table>
<el-pagination
@size-change='listQuery(state)' @current-change='listQuery(state)'
class='mt8' :pager-count='5' :page-sizes='[10, 20, 30]' background
:total='state.total' v-model:current-page='state.form.page'
v-model:page-size='state.form.pageSize'
layout='total, sizes, prev, pager, next, jumper'
/>
</el-card>
</div>
</template>
<script lang='ts' setup>
import { Plus, Delete, ArrowDown, ArrowUp} from '@element-plus/icons-vue';
import {onMounted, reactive} from 'vue';
import { listQuery, listDelete, tabAdd,tabView, listSelect } from '/@/comps/page/index';
const state = reactive({
url: '/sa/proj/main', loading: true, ids: [],
form: {}, single: true, multiple: true, list: [], total: 0,
});
onMounted(() => {
listQuery(state);
});
</script>
<style scoped>
</style>
src/pages/sa/proj/main/edit.vue
+194
View File
@@ -0,0 +1,194 @@
<template>
<el-card class='box-card' :body-style="{padding:'2px 8px'}" shadow='never'>
<template #header>
<el-row>
<el-col :span='10'>
<div style='line-height: 32px'>项目编辑</div>
</el-col>
<el-col :span='14' style='text-align: right'>
<el-button type='success' @click='tabSave({formRef,state,proxy,route})' plain>保 存</el-button>
<el-button type='info' @click='tabClose({proxy,route})' plain>关 闭</el-button>
</el-col>
</el-row>
</template>
<div style='margin-top: 8px;margin-bottom: 8px'>
<el-form ref='formRef' :inline='true' class='yform' :model='form' label-width='140px'>
<el-tabs type='card' v-model='activeName'>
<el-tab-pane label='基本信息' name='tab1'>
<div class='yform-div'>
<el-form-item label='项目名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
<el-input v-model='form.name'></el-input>
</el-form-item>
<el-form-item label='项目类型：' style='width: 25%'>
<el-select v-model='form.type' placeholder='请选择' style='width: 100%'>
<el-option value='1' label='代销（买断合同）' />
<el-option value='2' label='直销有代理' />
<el-option value='3' label='直销无代理' />
</el-select>
</el-form-item>
<el-form-item label='项目编号：' style='width: 25%'>
<span class='zinput' v-show='form.id' style='margin-left: 5px;color: green'>{{ form.senum }}</span>
<span class='zinput' v-show='!form.id' style='margin-left: 5px;color: #b9abab'>提交后自动生成</span>
</el-form-item>
<el-form-item label='客户：' prop='cusna' :rules="[{ required: form.type==3, message: '客户不能为空'}]"
style='width: 100%' v-show='form.type==2||form.type==3'>
<el-input v-model='form.cusna' readonly @click='chooseCust'></el-input>
</el-form-item>
<el-form-item label='代理商：' prop='agena' :rules="[{ required: form.type==1||form.type==2, message: '代理商不能为空'}]"
style='width:100%' v-show='form.type==1||form.type==2'>
<el-input v-model='form.agena' readonly @click='chooseAgent'></el-input>
</el-form-item>
<el-form-item label='项目地址：' prop='addre' :rules="[{ required: true, message: '地址不能为空'}]" style='width: 100%'>
<el-input v-model='form.addre' readonly @click='chooseAddr'></el-input>
</el-form-item>
<el-form-item label='项目经办人：' style='width: 100%'>
<el-input v-model='opmanName' @click='openOrgModal' readonly></el-input>
</el-form-item>
</div>
</el-tab-pane>
<el-tab-pane label='权限信息' name='tab9'>
<Perm ref='permRef' :form='form' v-if='state.permShow' @update='update' :orgModal='orgModal' />
</el-tab-pane>
</el-tabs>
</el-form>
</div>
<div id='simpleSquare'></div>
<Amap ref='amapRef' @close='closeAmap' />
<OrgModal ref='orgModal' @close='closeOrgModal' />
<CustModal url='sa/cust/main/list' ref='custModal' @close='custModalChoose' />
<AgentModal url='sa/agent/main/list' ref='agentModal' @close='agentModalChoose' />
</el-card>
</template>
<script lang='ts'>
export default { name: 'SaProjMainEdit' };
</script>
<script lang='ts' setup>
import { computed, getCurrentInstance, onMounted, reactive, ref, toRaw, toRefs } from 'vue';
import { useRoute } from 'vue-router';
import Cookies from 'js-cookie';
import { FormInstance } from 'element-plus';
import request from '/@/utils/request';
import { tabSave, tabClose } from '/@/comps/page/edit';
import Amap from '/@/comps/ass/amap.vue';
import OrgModal from '/@/comps/sys/OrgModal.vue';
import CustModal from '/@/comps/gen/GenModal.vue';
import AgentModal from '/@/comps/gen/GenModal.vue';
import Perm from './perm.vue';
const route = useRoute();
const formRef = ref<FormInstance>();
const { proxy } = getCurrentInstance() as any;
const activeName = ref('tab1');
const state = reactive({
url: '/sa/proj/main', permShow: false,
params: { path: '', query: '' }, levels: [] as any,
form: { avtag: true, items: [] as any } as any,
});
const { form } = toRefs(state);
onMounted(async () => {
await editInit();
});
const editInit = async () => {
let id = route.query?.id;
if (id) {
form.value = await request({
url: state.url + '/one/' + id,
method: 'get',
});
} else {
state.form.avtag = true;
const userName = Cookies.get('userName');
const userId = Cookies.get('userId');
form.value.opman = { id: userId, name: userName };
}
state.permShow = true;
};
//region ------客户与代理商选择逻辑------
const agentModal = ref();
const chooseAgent = () => {
agentModal.value.openModal();
};
const agentModalChoose = (data:any) => {
form.value.ageid=data?data.id:null;
form.value.agena=data?data.name:null;
};
const custModal = ref();
const chooseCust = () => {
custModal.value.openModal();
};
const custModalChoose = (data: any) => {
form.value.cusid=data.id;
form.value.cusna=data.name;
};
//endregion
//region ------组织架构选择逻辑------
const orgModal = ref();
const openOrgModal = () => {
orgModal.value.openModal({
opener: 'opman',
orgType: 8,
});
};
const opmanName = computed(() => {
return form.value.opman ? form.value.opman.name : '';
});
const permRef = ref();
const closeOrgModal = (data: any) => {
if (!permRef.value.closeOrgModal(data)) {
if (data.opener == 'opman') {
if (data.orgs && data.orgs.length > 0) {
form.value.opman = {};
form.value.opman = { id: data.orgs[0].id, name: data.orgs[0].name };
form.value.opmid = data.orgs[0].id;
} else {
form.value.opman = null;
form.value.opmid = null;
}
}
}
};
const update = (props: any) => {
for (const prop in props) {
form.value[prop] = toRaw(props[prop]);
}
};
//endregion
//region 地址选择逻辑
const amapRef = ref();
const chooseAddr = () => {
amapRef.value.openModal({ adcoo: form.value.adcoo, adreg: form.value.adreg, addet: form.value.addet, adzoo: '' });
};
const closeAmap = (data: any) => {
if (data) {
form.value.addre = data.adreg + data.addet;
form.value.adcoo = data.adcoo;
form.value.adreg = data.adreg;
form.value.addet = data.addet;
form.value.adpro = data.adpro;
form.value.adcit = data.adcit;
form.value.addis = data.addis;
}
};
//endregion
</script>
<style scoped>
</style>
src/pages/sa/proj/main/index.vue
+80
View File
@@ -0,0 +1,80 @@
<template>
<div>
<el-card class='box-card'>
<template #header>
<el-row>
<el-col :span='14'>
<el-input v-model='state.form.name' placeholder='输入名称回车查询' class='list-search' clearable @keyup.enter='listQuery(state)' />
<el-button type='primary' @click='listQuery(state)' plain >查 询</el-button>
<el-button class='more-button' :icon='state.moreParams?ArrowUp:ArrowDown' plain @click='state.moreParams=!state.moreParams' />
</el-col>
<el-col :span='10' style='text-align: right'>
<el-button type='success' :icon='Plus' @click='tabAdd(state.url)' plain>新增</el-button>
<!-- <el-button type='info' :icon='Upload' @click='listImp' plain>导入</el-button>-->
<!-- <el-button type='info' :icon='Download' plain @click='listExp3' >导出</el-button>-->
<el-button type='danger' :icon='Delete' :disabled='state.multiple' @click='listDelete(state)' plain>删除</el-button>
</el-col>
</el-row>
<div v-show='state.moreParams' class='more-params'>
<el-form :inline='true' label-width='100px'>
<el-form-item label='备注'>
<el-input v-model='state.form.notes' placeholder='输入备注' />
</el-form-item>
<el-form-item label='xxxxx'>
<el-input v-model='state.form.xx' />
</el-form-item>
<el-form-item />
</el-form>
</div>
</template>
<el-table height='400' :cell-style="{padding:'2px'}" :row-style="{height: '36px'}"
v-loading='state.loading' :data='state.list'
border stripe @selection-change='listSelect($event,state)'>
<el-table-column type='selection' width='55' align='center' />
<el-table-column label='序号' type='index' width='55' align='center' />
<el-table-column label='项目编号' width='140'>
<template #default='scope'>
<span style='cursor:pointer;color: #3e9ece' @click='tabView(state.url,scope.row.id)'>
{{ scope.row.senum }}
</span>
</template>
</el-table-column>
<el-table-column label='项目名称' prop='name' width='250' />
<el-table-column label='项目地址' prop='addre' />
<el-table-column label='创建时间' prop='crtim' width='150' />
<el-table-column label='创建人' prop='crman' width='60' />
<el-table-column label='更新时间' prop='uptim' width='150' />
<el-table-column label='更新人' prop='upman' width='60' />
</el-table>
<el-pagination
@size-change='listQuery(state)' @current-change='listQuery(state)'
class='mt8' :pager-count='5' :page-sizes='[10, 20, 30]' background
:total='state.total' v-model:current-page='state.form.page'
v-model:page-size='state.form.pageSize'
layout='total, sizes, prev, pager, next, jumper'
/>
</el-card>
</div>
</template>
<script lang='ts' setup>
import { Plus, Delete, ArrowDown, ArrowUp} from '@element-plus/icons-vue';
import {onMounted, reactive} from 'vue';
import { listQuery, listDelete, tabAdd,tabView, listSelect } from '/@/comps/page/index';
const state = reactive({
url: '/sa/proj/main', loading: true, ids: [],
form: {}, single: true, multiple: true, list: [], total: 0,
});
onMounted(() => {
listQuery(state);
});
</script>
<style scoped>
</style>
src/pages/sa/proj/main/perm.vue
+120
View File
@@ -0,0 +1,120 @@
<template>
<div class='yform-div'>
<!-- <el-form-item label='备注：' style='width: 100%' prop='notes' :rules="[{ required: true, message: '备注不能为空'}]">-->
<el-form-item label='备注：' style='width: 100%'>
<el-input type='textarea' :rows='4' v-model='cform.notes' />
</el-form-item>
<el-form-item label='可查看者：' style='width: 50%'>
<el-input type='textarea' :rows='4' v-model='viewersName' readonly @click='openViewersModal'>
</el-input>
</el-form-item>
<el-form-item label='可编辑者：' style='width: 50%'>
<el-input type='textarea' :rows='4' v-model='editorsName' readonly @click='openEditorsModal'>
</el-input>
</el-form-item>
<el-form-item label='创建人：' style='width: 25%'>
<div class='zinput'> {{ form.crman ? form.crman.name : '' }}</div>
</el-form-item>
<el-form-item label='创建时间：' style='width: 25%'>
<div class='zinput'> {{ form.crtim }}</div>
</el-form-item>
<el-form-item label='更新人：' style='width: 25%'>
<div class='zinput'> {{ form.upman ? form.upman.name : '' }}</div>
</el-form-item>
<el-form-item label='更新时间：' style='width: 25%'>
<div class='zinput'> {{ form.uptim }}</div>
</el-form-item>
</div>
</template>
<script lang='ts' setup>
import { computed, ref, toRaw, watch } from 'vue';
const props: any = defineProps({
form: Object,
orgModal: Object,
});
const cform = ref({
notes: props.form.notes,
viewers: props.form.viewers,
editors: props.form.editors,
}) as any;
const emit = defineEmits(['update']);
watch(
cform,
(newValue) => {
emit('update', newValue);
},
{
deep: true,
},
);
const openViewersModal = () => {
props.orgModal.openModal({
opener: 'viewers',
orgType: 11,
selectMode: 2,
orgs: toRaw(cform.value.viewers),
});
};
const openEditorsModal = () => {
props.orgModal.openModal({
opener: 'editors',
orgType: 11,
selectMode: 2,
orgs: toRaw(cform.value.editors),
});
};
const closeOrgModal = (data: any) => {
let flag = false;
if (data.opener == 'viewers') {
if (data.orgs && data.orgs.length > 0) {
cform.value.viewers = data.orgs;
} else {
cform.value.viewers = null;
}
flag = true;
} else if (data.opener == 'editors') {
if (data.orgs && data.orgs.length > 0) {
cform.value.editors = data.orgs;
} else {
cform.value.editors = null;
}
flag = true;
}
return flag;
};
const viewersName = computed(() => {
let names = '';
if (cform.value.viewers && cform.value.viewers.length > 0) {
for (const user of cform.value.viewers) {
names += user.name + '；';
}
}
return names;
});
const editorsName = computed(() => {
let names = '';
if (cform.value.editors && cform.value.editors.length > 0) {
for (const user of cform.value.editors) {
names += user.name + '；';
}
}
return names;
});
defineExpose({ closeOrgModal });
</script>
<style scoped>
</style>
src/pages/sa/proj/main/view.vue
+163
View File
@@ -0,0 +1,163 @@
<template>
<el-card class='box-card' :body-style="{padding:'2px 8px'}" shadow='never'>
<template #header>
<el-row>
<el-col :span='10'>
<div style='line-height: 32px'>项目查看</div>
</el-col>
<el-col :span='14' style='text-align: right'>
<el-button type='success' @click='viewToEdit({proxy,route,state})' plain>编 辑</el-button>
<el-button type='success' @click='editProd' plain>产品维护</el-button>
<el-button type='info' @click='tabClose({proxy,route})' plain>关 闭</el-button>
</el-col>
</el-row>
</template>
<div style='margin-top: 8px;margin-bottom: 8px'>
<el-form ref='formRef' :inline='true' class='yform' :model='form' label-width='140px'>
<el-tabs type='card' v-model='activeName'>
<el-tab-pane label='基本信息' name='tab1'>
<div class='yform-div'>
<el-form-item label='项目名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
<span class='zinput'>{{ form.name }}</span>
</el-form-item>
<el-form-item label='项目编号：'>
<span class='zinput'>{{ form.senum }}</span>
</el-form-item>
<el-form-item label='项目地址：' style='width: 100%'>
<span class='zinput'>{{ form.addre }}</span>
</el-form-item>
<el-form-item label='代理商经办人：'>
<span class='zinput'>{{ form.opmna }}</span>
</el-form-item>
</div>
</el-tab-pane>
<el-tab-pane label='产品信息' name='tab2'>
</el-tab-pane>
<el-tab-pane label='权限信息' name='tab9'>
<div class='yform-div'>
<el-form-item label='备注：' style='width: 100%'>
<el-input type='textarea' :rows='4' v-model='form.notes' readonly />
</el-form-item>
<el-form-item label='可查看者：' style='width: 50%'>
<el-input type='textarea' :rows='4' v-model='viewersName' readonly />
</el-form-item>
<el-form-item label='可编辑者：' style='width: 50%'>
<el-input type='textarea' :rows='4' v-model='editorsName' readonly />
</el-form-item>
<el-form-item label='创建人：' style='width: 25%'>
<div class='zinput'> {{ form.crman ? form.crman.name : '' }}</div>
</el-form-item>
<el-form-item label='创建时间：' style='width: 25%'>
<div class='zinput'> {{ form.crtim }}</div>
</el-form-item>
<el-form-item label='更新人：' style='width: 25%'>
<div class='zinput'> {{ form.upman ? form.upman.name : '' }}</div>
</el-form-item>
<el-form-item label='更新时间：' style='width: 25%'>
<div class='zinput'> {{ form.uptim }}</div>
</el-form-item>
</div>
</el-tab-pane>
</el-tabs>
</el-form>
</div>
<div id='simpleSquare'></div>
<OrgModal ref='orgModal' @close='closeOrgModal' />
<Amap ref='amapRef' @close='closeAmap' />
</el-card>
</template>
<script lang='ts' setup>
import { computed, getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue';
import { viewInit, tabClose, viewToEdit } from '/@/comps/page/view';
import { useRoute } from 'vue-router';
import OrgModal from '/@/comps/sys/OrgModal.vue';
import Amap from '/@/comps/ass/amap.vue';
import { FormInstance } from 'element-plus';
import request from '/@/utils/request';
import router from '/@/router';
const route = useRoute();
const formRef = ref<FormInstance>();
const { proxy } = getCurrentInstance() as any;
const activeName = ref('tab1');
const state = reactive({
url: '/sa/proj/main',
params: { path: '', query: '' }, levels: [] as any,
form: { avtag: true, items: [] as any } as any,
});
const { form } = toRefs(state);
onMounted(async () => {
await viewInit({ state, route });
await levelsInit();
});
const editProd = async () => {
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
await router.push({
path: '/sa/prod/main',
query: { proj:state.form.id },
});
};
//region 经办人与可查看者选择逻辑
const viewersName = computed(() => {
let names = '';
if (form.value.viewers && form.value.viewers.length > 0) {
for (const user of form.value.viewers) {
names += user.name + '；';
}
}
return names;
});
const editorsName = computed(() => {
let names = '';
if (form.value.editors && form.value.editors.length > 0) {
for (const user of form.value.editors) {
names += user.name + '；';
}
}
return names;
});
//endregion
//region 地址选择逻辑
const amapRef = ref();
const chooseAddr = () => {
amapRef.value.openModal({ adcoo: form.value.adcoo, adreg: form.value.adreg, addet: form.value.addet, adzoo: '' });
};
const closeAmap = (data: any) => {
if (data) {
form.value.addre = data.adreg + data.addet;
form.value.adcoo = data.adcoo;
form.value.adreg = data.adreg;
form.value.addet = data.addet;
form.value.adpro = data.adpro;
form.value.adcit = data.adcit;
form.value.addis = data.addis;
}
};
//endregion
//region 业务字典逻辑
const levelsInit = async () => {
state.levels = await request({
url: '/ass/dict/data/list?maiid=AG_LEVEL',
method: 'get',
});
};
//endregion
</script>
<style scoped>
</style>
src/router/sysRoute.ts
+121 -1
View File
@@ -805,6 +805,81 @@ export const sysRoutes: Array<RouteRecordRaw> = [
icon: 'ele-GobletSquare',
},
children: [
{
path: '/sa/proj/main',
name: 'SaProjMain',
component: () => import('/@/pages/sa/proj/main/index.vue'),
meta: {
title: '项目清单',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'ele-Tickets',
},
},
{
path: '/sa/proj/main/edit',
name: 'SaProjMainEdit',
component: () => import('/@/pages/sa/proj/main/edit.vue'),
meta: {
title: '项目编辑',
isLink: '',
isHide: true,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'ele-Tickets',
},
},
{
path: '/sa/proj/main/view',
name: 'SaProjMainView',
component: () => import('/@/pages/sa/proj/main/view.vue'),
meta: {
title: '项目查看',
isLink: '',
isHide: true,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'ele-Tickets',
},
},
{
path: '/sa/prod/main',
name: 'SaProdMain',
component: () => import('/@/pages/sa/prod/main/index.vue'),
meta: {
title: '产品清单',
isLink: '',
isHide: true,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'ele-Tickets',
},
},
{
path: '/sa/agent/cate',
name: 'SaAgentCate',
component: () => import('/@/pages/sa/agent/cate/index.vue'),
meta: {
title: '代理商分类',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'ele-Tickets',
},
},
{
path: '/sa/agent/main',
name: 'SaAgentMain',
@@ -825,7 +900,52 @@ export const sysRoutes: Array<RouteRecordRaw> = [
name: 'SaAgentMainEdit',
component: () => import('/@/pages/sa/agent/main/edit.vue'),
meta: {
title: '代理商维护',
title: '代理商编辑',
isLink: '',
isHide: true,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'ele-Tickets',
},
},
{
path: '/sa/cust/cate',
name: 'SaCustCate',
component: () => import('/@/pages/sa/cust/cate/index.vue'),
meta: {
title: '客户分类',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'ele-Tickets',
},
},
{
path: '/sa/cust/main',
name: 'SaCustMain',
component: () => import('/@/pages/sa/cust/main/index.vue'),
meta: {
title: '客户清单',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'ele-Tickets',
},
},
{
path: '/sa/cust/main/edit',
name: 'SaCustMainEdit',
component: () => import('/@/pages/sa/cust/main/edit.vue'),
meta: {
title: '客户编辑',
isLink: '',
isHide: true,
isKeepAlive: true,
src/stores/themeConfig.ts
+2 -2
View File
@@ -124,8 +124,8 @@ export const useThemeConfig = defineStore('themeConfig', {
* 后端控制路由
*/
// 是否开启后端控制路由
// isRequestRoutes: false,
isRequestRoutes: true,
isRequestRoutes: false,
// isRequestRoutes: true,
/**
* 全局网站标题 / 副标题
src/views/login/component/account.vue
+1
View File
@@ -108,6 +108,7 @@ export default defineComponent({
// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
// Cookies.set('userName', state.ruleForm.userName);
Cookies.set('userName', result.zuser.name);
Cookies.set('userId', result.zuser.id);
if (!themeConfig.value.isRequestRoutes) {
// 前端控制路由，2、请注意执行顺序
await initFrontEndControlRoutes();