422 lines
14 KiB
Vue
422 lines
14 KiB
Vue
<template>
|
|
<div class="g3-flex-container">
|
|
<div class="g3-flex-main" style="margin-bottom: 12px;overflow-y: hidden;height: 50px;">
|
|
<div class="g3-toolbar">
|
|
<el-button type="success" @click="handleSave" :loading="saving">保存</el-button>
|
|
<el-button type="primary">报表</el-button>
|
|
<el-button type="primary" @click="handleNew">新建</el-button>
|
|
<el-button type="primary" @click="handleCope">复制</el-button>
|
|
<el-button @click="close" style="display:none;">取消</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="g3-flex-main" style="flex: 1;">
|
|
<el-tabs v-model="activeTab" class="g3-tabs">
|
|
<!-- 基本信息 -->
|
|
<el-tab-pane label="基本信息" name="basic" class="g3-tab-pane">
|
|
<div v-if="maintable" class="g3-grid">
|
|
<div class="g3-cell">
|
|
<div class="g3-cell-label">编号:</div>
|
|
<el-input v-model="maintable.b_id" :placeholder="编号" />
|
|
</div>
|
|
<div class="g3-cell">
|
|
<div class="g3-cell-label">姓名:</div>
|
|
<el-input v-model="maintable.b_name_ch" :placeholder="姓名" />
|
|
</div>
|
|
<div class="g3-cell">
|
|
<div class="g3-cell-label">客户名称:</div>
|
|
<g3selectid
|
|
v-model="maintable.b_customer_id"
|
|
tablename="v_b_othercompany_customer"
|
|
value-key="b_id"
|
|
label-key="b_name"
|
|
:initial-value="maintable.b_customer_id"
|
|
:initial-label="maintable.v_customer_name"
|
|
placeholder="搜索委托单位..."
|
|
@update:label="maintable.v_customer_name = $event"
|
|
/>
|
|
</div>
|
|
<div class="g3-cell">
|
|
<div class="g3-cell-label">主联系人:</div>
|
|
<el-checkbox v-model="maintable.b_isdefault" :true-value="1" :false-value="0" size="large"
|
|
style="background-color: #fff;padding-left: 11px;width: 100%;" />
|
|
</div>
|
|
<div class="g3-cell">
|
|
<div class="g3-cell-label">办公电话:</div>
|
|
<el-input v-model="maintable.b_phone" :placeholder="办公电话" />
|
|
</div>
|
|
<div class="g3-cell">
|
|
<div class="g3-cell-label">传真:</div>
|
|
<el-input v-model="maintable.b_fax" :placeholder="传真" />
|
|
</div>
|
|
<div class="g3-cell">
|
|
<div class="g3-cell-label">手机:</div>
|
|
<el-input v-model="maintable.b_mobilephone" :placeholder="手机" />
|
|
</div>
|
|
<div class="g3-cell">
|
|
<div class="g3-cell-label">邮件:</div>
|
|
<el-input v-model="maintable.b_email" :placeholder="邮件" />
|
|
</div>
|
|
<div class="g3-cell">
|
|
<div class="g3-cell-label">部门:</div>
|
|
<el-input v-model="maintable.b_departmentname" :placeholder="部门" />
|
|
</div>
|
|
<div class="g3-cell">
|
|
<div class="g3-cell-label">职位:</div>
|
|
<g3selectid
|
|
v-model="maintable.b_type1_id"
|
|
tablename="b_contact_type_1"
|
|
value-key="b_id"
|
|
label-key="b_name"
|
|
:initial-value="maintable.b_type1_id"
|
|
:initial-label="maintable.v_type1_name"
|
|
@update:label="maintable.v_type1_name = $event"
|
|
/>
|
|
</div>
|
|
<div class="g3-cell">
|
|
<div class="g3-cell-label">性 别:</div>
|
|
<g3selectname
|
|
v-model="maintable.b_sex"
|
|
tablename="b_sex"
|
|
label-key="b_name"
|
|
:initial-label="maintable.b_sex"
|
|
placeholder="搜索性别"
|
|
/>
|
|
</div>
|
|
<div class="g3-cell">
|
|
<div class="g3-cell-label">生日:</div>
|
|
<el-date-picker v-model="maintable.b_birthday" type="date" format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD" placeholder="请输入时间" style="width: 100%;" />
|
|
</div>
|
|
<div class="g3-cell">
|
|
<div class="g3-cell-label">业务员:</div>
|
|
<g3selectid
|
|
v-model="maintable.b_owner_id"
|
|
tablename="b_user"
|
|
value-key="b_id"
|
|
label-key="b_name"
|
|
:initial-value="maintable.b_owner_id"
|
|
:initial-label="maintable.v_ownername"
|
|
class="g3-width100"
|
|
@update:label="maintable.v_ownername = $event"
|
|
/>
|
|
</div>
|
|
<div class="g3-cell">
|
|
<div class="g3-cell-label">宅电:</div>
|
|
<el-input v-model="maintable.b_homephone" :placeholder="宅电" />
|
|
</div>
|
|
<div class="g3-cell">
|
|
<div class="g3-cell-label">详细地址:</div>
|
|
<el-input v-model="maintable.b_homeaddr" :placeholder="详细地址" />
|
|
</div>
|
|
<div class="g3-cell">
|
|
<div class="g3-cell-label">家庭状况:</div>
|
|
<el-input v-model="maintable.b_homesituation" :placeholder="家庭状况" />
|
|
</div>
|
|
<div class="g3-cell">
|
|
<div class="g3-cell-label">习惯:</div>
|
|
<el-input v-model="maintable.b_habit" :placeholder="习惯" />
|
|
</div>
|
|
<div class="g3-cell">
|
|
<div class="g3-cell-label">爱好:</div>
|
|
<el-input v-model="maintable.b_taste" :placeholder="爱好" />
|
|
</div>
|
|
<div class="g3-cell">
|
|
<div class="g3-cell-label">备注:</div>
|
|
<el-input v-model="maintable.b_bz" type="textarea" :rows="bBzRows" :placeholder="'备注'"
|
|
@focus="bBzRows = 5" @blur="bBzRows = 1" />
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
|
|
|
|
</el-tabs>
|
|
|
|
<!-- 错误提示 -->
|
|
<el-alert v-if="error" class="g3-error-message" :title="error" type="error" show-icon closable
|
|
@close="error = ''" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, getCurrentInstance } from 'vue'
|
|
import axios from '@/utils/axios'
|
|
import { ElMessage } from 'element-plus'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { isEqual, compareAndClassifyData, detectChanges } from '@/utils/dataDiffUtils'
|
|
import g3selectid from '@/components/g3selectid.vue'
|
|
import g3selectname from '@/components/g3selectname.vue'
|
|
|
|
const { proxy } = getCurrentInstance()
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const bBzRows = ref(1)
|
|
|
|
|
|
const loading = ref(false)
|
|
const saving = ref(false)
|
|
const error = ref('')
|
|
const activeTab = ref('basic')
|
|
const maintable = ref([])
|
|
const maintableorigina = ref([])
|
|
|
|
const id = ref(route.query.id ?? '')
|
|
const customer_id = route.query.customer_id
|
|
const v_customer_name = route.query.v_customer_name
|
|
const op = ref(String(route.query.op ?? ''))
|
|
|
|
|
|
const getmaintable = async () => {
|
|
try {
|
|
loading.value = true
|
|
error.value = ''
|
|
maintable.value = null
|
|
|
|
const params = {
|
|
tableName: "v_b_contact",
|
|
pkColumn: "b_id",
|
|
pkColumnValue: id.value
|
|
}
|
|
const response = await axios.get('/getobject', { params })
|
|
|
|
if (response.data?.success) {
|
|
//console.log(response.data.data)
|
|
maintable.value = { ...response.data.data, b_isdefault: Number(response.data.data.b_isdefault) } || null
|
|
maintableorigina.value = { ...response.data.data }
|
|
if (!maintable.value) {
|
|
ElMessage.warning('未找到对应记录')
|
|
}
|
|
//console.log(maintable.value)
|
|
} else {
|
|
throw new Error(response.data?.message || '返回数据格式异常')
|
|
}
|
|
} catch (err) {
|
|
error.value = `加载客户详情失败: ${err.message}`
|
|
console.error('加载客户详情错误:', err)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
|
|
const handleNew = () => {
|
|
maintable.value = []
|
|
maintableorigina.value = []
|
|
maintable.value.b_customer_id = customer_id
|
|
maintable.value.v_customer_name = v_customer_name
|
|
id.value = ''
|
|
op.value = 'new'
|
|
}
|
|
const handleCope = () => {
|
|
id.value = ''
|
|
maintable.value.b_id = maintable.value.b_id + "cope"
|
|
op.value = 'new'
|
|
}
|
|
|
|
const handleSave = async () => {
|
|
try {
|
|
saving.value = true
|
|
error.value = ''
|
|
|
|
let updatemaintable = null;
|
|
let insertmaintable = null;
|
|
let maintableChanges = false
|
|
|
|
if (op.value === 'mod') {
|
|
const { hasChanges, updateData } = detectChanges(
|
|
maintable.value,
|
|
maintableorigina.value,
|
|
'b_id',
|
|
maintable.value.b_id
|
|
)
|
|
maintableChanges = hasChanges
|
|
updatemaintable = updateData
|
|
} else {
|
|
maintableChanges = true
|
|
insertmaintable = { ...maintable.value };
|
|
insertmaintable = [insertmaintable]
|
|
}
|
|
|
|
if (!maintableChanges) {
|
|
ElMessage.info('没有数据变更')
|
|
return
|
|
}
|
|
const requestData = [
|
|
{
|
|
tableName: 'b_contact',
|
|
keyField: 'b_id',
|
|
inserts: insertmaintable,
|
|
updates: updatemaintable,
|
|
deletes: [],
|
|
},
|
|
]
|
|
//console.log(requestData)
|
|
const response = await axios.post('/saveobjectV2', requestData, {
|
|
headers: { 'Content-Type': 'application/json' },
|
|
})
|
|
if (response.data?.success) {
|
|
ElMessage.success('保存成功')
|
|
maintableorigina.value = { ...maintable.value }
|
|
op.value = 'mod'
|
|
} else {
|
|
throw new Error(response.data?.message || '保存失败')
|
|
}
|
|
} catch (err) {
|
|
error.value = `保存失败: ${err.message}`
|
|
console.error('保存错误:', err)
|
|
ElMessage.error('保存失败')
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
|
|
|
|
// 初始化加载数据
|
|
onMounted(async () => {
|
|
if (op.value === 'mod') {
|
|
getmaintable()
|
|
} else {
|
|
maintable.value.b_customer_id = customer_id
|
|
maintable.value.v_customer_name = v_customer_name
|
|
}
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.g3-flex-container {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
background-color: #f2f3f5;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 10px 12px;
|
|
flex-direction: column;
|
|
|
|
.g3-flex-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
padding: 10px;
|
|
overflow-y: auto;
|
|
background-color: #fff;
|
|
border-right: 1px solid #e4e7ed;
|
|
border-radius: 6px;
|
|
box-shadow: 0 0 12px #0000000d;
|
|
}
|
|
}
|
|
|
|
.g3-toolbar {
|
|
order: 1;
|
|
height: 31px;
|
|
display: flex;
|
|
justify-content: left;
|
|
}
|
|
.g3-tabs {
|
|
order: 1;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
.g3-tabs>.el-tabs__content {
|
|
padding: 32px;
|
|
color: #6b778c;
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
}
|
|
.g3-tab-pane {
|
|
overflow-y: auto;
|
|
padding: 15px;
|
|
}
|
|
|
|
.g3-error-message {
|
|
order: 2;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
|
|
.g3-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(1, 1fr);
|
|
gap: 1px;
|
|
border: 1px solid #ddd;
|
|
background-color: #ddd;
|
|
width: 400px;
|
|
}
|
|
:deep(.g3-grid .el-input__wrapper) {
|
|
border-radius: 0px;
|
|
}
|
|
.g3-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #333;
|
|
font-size: 14px;
|
|
height: 32px;
|
|
}
|
|
.g3-cell-label {
|
|
padding: 8px;
|
|
border-right: 1px solid #ddd;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
width: 90px;
|
|
flex-shrink: 0;
|
|
height: 100%;
|
|
background: #f9f9f9;
|
|
}
|
|
|
|
/* ///////////////// */
|
|
:deep(.el-input) {
|
|
width: 100%;
|
|
height: 32px !important;
|
|
line-height: 32px !important;
|
|
}
|
|
|
|
:deep(.el-input__inner) {
|
|
height: 32px !important;
|
|
line-height: 32px !important;
|
|
}
|
|
|
|
:deep(.el-input__wrapper) {
|
|
padding: 1px 11px;
|
|
}
|
|
|
|
:deep(.el-input__wrapper) {
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
:deep(.el-select .el-select__wrapper) {
|
|
height: 32px !important;
|
|
line-height: 32px !important;
|
|
min-height: 32px;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
:deep(.g3-select-height .el-select .el-select__wrapper) {
|
|
height: 100% !important;
|
|
padding: 2px 11px !important;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
:deep(.el-checkbox.el-checkbox--large) {
|
|
height: 32px;
|
|
}
|
|
|
|
:deep(.el-textarea__inner) {
|
|
height: 32px !important;
|
|
border-radius: 0px;
|
|
box-shadow: unset;
|
|
}
|
|
|
|
:deep(.el-textarea__inner:focus) {
|
|
-webkit-box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
|
|
box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
|
|
outline: none;
|
|
}
|
|
</style> |