From ea689dd91eaa72425dc01759042c3b4eb2186512 Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期三, 17 六月 2026 10:14:44 +0800
Subject: [PATCH] 新增智能电表、空调管理
---
admin/src/views/client/components/staffEdit.vue | 344 ++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 252 insertions(+), 92 deletions(-)
diff --git a/admin/src/views/client/components/staffEdit.vue b/admin/src/views/client/components/staffEdit.vue
index c85f098..4390a98 100644
--- a/admin/src/views/client/components/staffEdit.vue
+++ b/admin/src/views/client/components/staffEdit.vue
@@ -1,51 +1,105 @@
<template>
- <GlobalWindow :title="title" width="820px" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm">
- <el-form :model="form" ref="form" label-position="top" :rules="rules">
- <div class="list">
- <el-form-item label="瀹㈡埛鍚嶇О" prop="customerId">
- <el-select v-model="form.customerId" clearable filterable>
- <el-option v-for="item in clientList" :value="item.id" :label="item.name" />
- </el-select>
- </el-form-item>
- <el-form-item label="濮撳悕" prop="name">
- <div class="df">
- <el-input v-model="form.name" placeholder="璇疯緭鍏�" v-trim />
- </div>
- </el-form-item>
- <el-form-item label="鎵嬫満鍙�" prop="phone">
- <el-input v-model="form.phone" placeholder="璇疯緭鍏ユ墜鏈哄彿" v-trim />
- </el-form-item>
- <el-form-item label="韬唤">
- <el-select v-model="form.highCheckor" filterable>
- <el-option :value="0" label="鑰佹澘/瓒呯骇绠＄悊鍛�" />
- <el-option :value="1" label="浜轰簨/绠＄悊鍛�" />
- <el-option :value="2" label="鍛樺伐/鏅�氬憳宸�" />
- </el-select>
- </el-form-item>
- <el-form-item label="璇佷欢绫诲瀷">
- <el-select v-model="form.idcardType" filterable>
- <el-option :value="0" label="韬唤璇�" />
- <el-option :value="1" label="娓境璇佷欢" />
- <el-option :value="2" label="鎶ょ収" />
- </el-select>
- </el-form-item>
- <el-form-item label="璇佷欢鍙风爜" prop="member.idcardNo">
- <el-input v-model="form.idcardNo" placeholder="璇疯緭鍏�" v-trim />
- </el-form-item>
- <el-form-item label="閭" prop="email">
- <el-input v-model="form.email" placeholder="璇疯緭鍏ラ偖绠�" v-trim />
- </el-form-item>
- <el-form-item label="鎬у埆">
- <el-select v-model="form.sex" filterable>
- <el-option :value="1" label="鐢�" />
- <el-option :value="2" label="濂�" />
- </el-select>
- </el-form-item>
- <el-form-item label="鍑虹敓鏃ユ湡">
- <el-date-picker type="date" v-model="form.birthday" value-format="yyyy-MM-dd" placeholder="璇烽�夋嫨" />
- </el-form-item>
+ <GlobalWindow :title="title" width="720px" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm">
+ <el-form
+ ref="form"
+ :model="form"
+ :rules="rules"
+ label-width="88px"
+ label-position="right"
+ class="staff-edit-form"
+ >
+ <section class="form-section">
+ <div class="form-section__title">褰掑睘淇℃伅</div>
+ <div class="form-grid">
+ <el-form-item label="瀹㈡埛鍚嶇О" prop="customerId" class="col-full">
+ <el-select
+ v-model="form.customerId"
+ :disabled="form.id || customerId != ''"
+ clearable
+ filterable
+ placeholder="璇烽�夋嫨瀹㈡埛"
+ >
+ <el-option v-for="item in clientList" :key="item.id" :value="item.id" :label="item.name" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="韬唤">
+ <el-select v-model="form.highCheckor" filterable placeholder="璇烽�夋嫨韬唤">
+ <el-option :value="0" label="鑰佹澘/瓒呯骇绠＄悊鍛�" />
+ <el-option :value="1" label="浜轰簨/绠＄悊鍛�" />
+ <el-option :value="2" label="鍛樺伐/鏅�氬憳宸�" />
+ </el-select>
+ </el-form-item>
+ </div>
+ </section>
- </div>
+ <section class="form-section">
+ <div class="form-section__title">鍩烘湰淇℃伅</div>
+ <div class="form-grid">
+ <el-form-item label="濮撳悕" prop="name">
+ <el-input v-model="form.name" placeholder="璇疯緭鍏ュ鍚�" v-trim />
+ </el-form-item>
+ <el-form-item label="鎵嬫満鍙�" prop="phone">
+ <el-input v-model="form.phone" placeholder="璇疯緭鍏ユ墜鏈哄彿" v-trim maxlength="11" />
+ </el-form-item>
+ <el-form-item label="鎬у埆">
+ <el-select v-model="form.sex" filterable clearable placeholder="璇烽�夋嫨鎬у埆">
+ <el-option :value="1" label="鐢�" />
+ <el-option :value="2" label="濂�" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鍑虹敓鏃ユ湡">
+ <el-date-picker
+ v-model="form.birthday"
+ type="date"
+ value-format="yyyy-MM-dd"
+ placeholder="璇烽�夋嫨鍑虹敓鏃ユ湡"
+ />
+ </el-form-item>
+ <el-form-item
+ label="閭"
+ prop="email"
+ class="col-full"
+ :rules="[{ required: false, type: 'email', message: '璇疯緭鍏ユ纭殑閭鏍煎紡' }]"
+ >
+ <el-input v-model="form.email" placeholder="璇疯緭鍏ラ偖绠�" v-trim />
+ </el-form-item>
+ </div>
+ </section>
+
+ <section class="form-section">
+ <div class="form-section__title">璇佷欢淇℃伅</div>
+ <div class="form-grid">
+ <el-form-item label="璇佷欢绫诲瀷">
+ <el-select v-model="form.idcardType" filterable placeholder="璇烽�夋嫨璇佷欢绫诲瀷">
+ <el-option :value="0" label="韬唤璇�" />
+ <el-option :value="1" label="娓境璇佷欢" />
+ <el-option :value="2" label="鎶ょ収" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="璇佷欢鍙风爜" :prop="form.id ? '' : 'idcardNo'" class="col-full">
+ <el-input
+ v-if="!form.id"
+ v-model="form.idcardNo"
+ placeholder="璇疯緭鍏ヨ瘉浠跺彿鐮�"
+ v-trim
+ clearable
+ />
+ <div v-else class="idcard-field">
+ <div class="idcard-field__current">
+ <i class="el-icon-bank-card" />
+ <span class="idcard-field__label">褰撳墠璇佷欢鍙�</span>
+ <span class="idcard-field__value">{{ form.idcardDecode || '鏈櫥璁�' }}</span>
+ </div>
+ <el-input
+ v-model="form.idcardNoNew"
+ placeholder="濡傞渶鍙樻洿锛岃杈撳叆鏂拌瘉浠跺彿锛堢暀绌鸿〃绀轰笉淇敼锛�"
+ v-trim
+ clearable
+ />
+ </div>
+ </el-form-item>
+ </div>
+ </section>
</el-form>
</GlobalWindow>
</template>
@@ -53,17 +107,15 @@
<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
-import { fetchCateList } from '@/api/business/category'
import { staffRules } from './config'
-import { detailById } from '@/api/client/ywCustomer'
import { fetchList } from '@/api/client/ywCustomer'
+
export default {
name: 'OperaYwCustomerWindow',
extends: BaseOpera,
components: { GlobalWindow },
data() {
return {
- // 琛ㄥ崟鏁版嵁
form: {
id: null,
customerId: '',
@@ -79,27 +131,25 @@
sex: '',
status: '',
memberName: '',
-
lastLoginDate: '',
loginNum: '',
userId: '',
-
accountBank: '',
accountNo: '',
accountPhone: '',
creditCard: '',
fpType: '',
accountAddr: '',
- // identityType: '0',
- name: "",
- phone: "",
+ name: '',
+ phone: '',
highCheckor: 0,
idcardType: 0,
idcardNo: '',
- email: '',
+ idcardNoNew: '',
+ email: ''
},
+ customerId: '',
clientList: [],
- // 楠岃瘉瑙勫垯
rules: staffRules
}
},
@@ -109,7 +159,6 @@
'field.id': 'id'
})
},
-
methods: {
initData() {
fetchList({
@@ -123,55 +172,166 @@
open(title, target) {
this.title = title
this.visible = true
+ this.customerId = ''
this.initData()
- // 鏂板缓
if (target == null) {
this.$nextTick(() => {
- this.$refs.form.resetFields()
+ this.form = {
+ id: null,
+ customerId: '',
+ creator: '',
+ createDate: '',
+ editor: '',
+ editDate: '',
+ isdeleted: '',
+ birthday: '',
+ industryId: '',
+ type: '1',
+ idcardDecode: '',
+ sex: '',
+ status: '',
+ memberName: '',
+ lastLoginDate: '',
+ loginNum: '',
+ userId: '',
+ accountBank: '',
+ accountNo: '',
+ accountPhone: '',
+ creditCard: '',
+ fpType: '',
+ accountAddr: '',
+ name: '',
+ phone: '',
+ highCheckor: 0,
+ idcardType: 0,
+ idcardNo: '',
+ idcardNoNew: '',
+ email: ''
+ }
})
return
}
- // 缂栬緫
this.$nextTick(() => {
for (const key in this.form) {
this.form[key] = target[key]
}
+ this.form.idcardNo = ''
+ this.form.idcardNoNew = ''
})
},
changeValid(e) {
this.$set(this.form, 'validity', e ? '2099-12-31' : '')
- },
- }
-}
-</script>
-<style lang='scss' scoped>
-@import '@/assets/style/variables.scss';
-
-div {
- box-sizing: border-box;
-}
-
-.title {
- width: 100%;
- font-weight: 500;
- font-size: 15px;
- margin-top: 16px;
-}
-
-.list {
- /* padding-top: 14px; */
- display: flex;
- flex-wrap: wrap;
-
- .el-form-item {
- width: 33.33%;
- margin-bottom: 12px;
- padding: 0 12px;
-
- .la {
- color: #7f7f7f;
- margin-top: 2px;
}
}
}
-</style>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/style/variables.scss';
+
+.staff-edit-form {
+ padding-top: 4px;
+
+ ::v-deep .el-form-item {
+ margin-bottom: 14px;
+ }
+
+ ::v-deep .el-form-item__label {
+ color: #606266;
+ font-size: 13px;
+ line-height: 32px;
+ padding-right: 12px;
+ }
+
+ ::v-deep .el-input,
+ ::v-deep .el-select,
+ ::v-deep .el-date-editor {
+ width: 100%;
+ }
+}
+
+.form-section {
+ margin-bottom: 14px;
+ padding: 16px 16px 2px;
+ background: #fff;
+ border: 1px solid #ebeef5;
+ border-radius: 6px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ &__title {
+ margin-bottom: 14px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #f0f2f5;
+ font-size: 14px;
+ font-weight: 600;
+ color: #303133;
+ line-height: 22px;
+
+ &::before {
+ content: '';
+ display: inline-block;
+ width: 3px;
+ height: 14px;
+ margin-right: 8px;
+ background: $primary-color;
+ border-radius: 2px;
+ vertical-align: -2px;
+ }
+ }
+}
+
+.form-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ column-gap: 20px;
+
+ .col-full {
+ grid-column: 1 / -1;
+ }
+}
+
+.idcard-field {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ &__current {
+ display: flex;
+ align-items: center;
+ min-height: 32px;
+ padding: 0 12px;
+ background: linear-gradient(90deg, #f8fafc 0%, #f5f7fa 100%);
+ border: 1px solid #e4e7ed;
+ border-radius: 4px;
+ font-size: 13px;
+ color: #606266;
+ }
+
+ .el-icon-bank-card {
+ margin-right: 6px;
+ font-size: 15px;
+ color: $primary-color;
+ }
+
+ &__label {
+ flex-shrink: 0;
+ margin-right: 8px;
+ color: #909399;
+ font-size: 12px;
+ }
+
+ &__value {
+ flex: 1;
+ min-width: 0;
+ color: #303133;
+ font-weight: 500;
+ letter-spacing: 0.4px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+}
+</style>
--
Gitblit v1.9.3