Browse Source

单据信息批量更改

liyuan 1 month ago
parent
commit
43436288a5

+ 8 - 0
src/api/iosBasicData/bills.js

@@ -274,3 +274,11 @@ export const accountsReceivable = (data) => {
     params: data
   })
 }
+
+export const updateBatchField = (row) => {
+    return request({
+        url: '/api/blade-los/bills/updateBatchField',
+        method: 'post',
+        data: row
+    })
+}

+ 27 - 20
src/views/iosBasicData/SeafreightExportF/bills/index.vue

@@ -352,9 +352,11 @@
                             </el-dropdown-item>
                         </el-dropdown-menu>
                     </el-dropdown>
+                    <el-button type="primary" size="small" @click="updateField" :disabled="selectionList.length === 0">批量更改
+                    </el-button>
                     <div style="margin-top: 10px">
                         <el-tabs type="card" v-model="query.billStatus" @tab-click="handleClick">
-                            
+
                             <el-tab-pane label="全部" name="7"></el-tab-pane>
                             <el-tab-pane label="接单" name="0">
                                 <span slot="label">接单</span>
@@ -573,42 +575,42 @@
                 <el-button type="primary" @click="AddToMainOrder">确 定</el-button>
             </span>
         </el-dialog>
+        <update-batch-field ref="updateFieldRef"></update-batch-field>
     </div>
 </template>
 
 <script>
 import {
-    billsList,
     billsDetail,
-    billsSubmit,
-    billsRemove,
+    billsDisembarking,
     billsIncreaseReinsurancePolicy,
+    billsList,
     billsListAll,
-    billsDisembarking,
-    editypesSendingEdi,
-    billsRevokeDisembarking
+    billsRemove,
+    billsRevokeDisembarking,
+    billsSubmit,
+    editypesSendingEdi
 } from "@/api/iosBasicData/bills";
-import { mapGetters } from "vuex";
+import {mapGetters} from "vuex";
 import billsDetails from "@/views/iosBasicData/SeafreightExportF/bills/billsDetails.vue";
 import feesTemplateItems from "@/views/iosBasicData/losbfeestemplate/feesTemplateItems.vue";
 import SplitList from "@/views/iosBasicData/SeafreightExportF/bills/assembly/SplitList.vue";
-import { getWorkDicts } from "@/api/system/dictbiz";
-import { dateFormat, defaultDate } from "@/util/date";
+import {getWorkDicts} from "@/api/system/dictbiz";
+import {defaultDate} from "@/util/date";
 import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
-import { editypesList } from "@/api/iosBasicData/editypes";
-import { getBvesselsList } from "@/api/iosBasicData/bvessels";
-import {
-    getBcorpslistByType,
-    getBcorpsDetail
-} from "@/api/iosBasicData/bcorps";
-import { bportsList } from "@/api/iosBasicData/bports";
-import { blinesList } from "@/api/iosBasicData/blines";
+import {editypesList} from "@/api/iosBasicData/editypes";
+import {getBvesselsList} from "@/api/iosBasicData/bvessels";
+import {getBcorpslistByType} from "@/api/iosBasicData/bcorps";
+import {bportsList} from "@/api/iosBasicData/bports";
+import {blinesList} from "@/api/iosBasicData/blines";
 import TreeSelect from "@/components/iosbasic-data/TreeSelect.vue";
-import { getDeptTree } from "@/api/system/dept";
-import { getToken } from "@/util/auth";
+import {getDeptTree} from "@/api/system/dept";
+import {getToken} from "@/util/auth";
+import UpdateBatchField from "@/views/iosBasicData/SeafreightExportF/bills/updateBatchField.vue";
 
 export default {
     components: {
+        UpdateBatchField,
         TreeSelect,
         SearchQuery,
         feesTemplateItems,
@@ -1709,6 +1711,11 @@ export default {
         }
     },
     methods: {
+
+        updateField(){
+            this.$refs.updateFieldRef.formData.ids = this.selectionList.map(item => item.id)
+            this.$refs.updateFieldRef.dialogVisible = true
+        },
         rowStyle({ row, column, rowIndex, columnIndex }) {
             if (row.status == 2) {
                 return {

+ 633 - 0
src/views/iosBasicData/SeafreightExportF/bills/updateBatchField.vue

@@ -0,0 +1,633 @@
+<template>
+    <el-dialog
+        title="批量更新单据"
+        :visible.sync="dialogVisible"
+        width="95%"
+        custom-class="elegant-dialog"
+        :modal-append-to-body="false"
+        append-to-body
+        top="5vh"
+    >
+        <el-form :model="formData" class="elegant-form" label-position="left" label-width="60px">
+            <el-row :gutter="20" class="form-row">
+                <el-col :span="6">
+                    <el-form-item label="提单号" class="form-item">
+                        <el-input
+                            v-model="formData.mblno"
+                            placeholder="请输入"
+                            prefix-icon="el-icon-document"
+                            @input="mblNoInput"
+                        ></el-input>
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="6">
+                    <el-form-item label="ETD" class="form-item">
+                        <el-date-picker
+                            v-model="formData.etd"
+                            type="date"
+                            placeholder="选择日期"
+                            style="width:100%"
+                            prefix-icon="el-icon-date"
+                        ></el-date-picker>
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="6">
+                    <el-form-item label="船名" class="form-item">
+                        <search-query :datalist="vesselData" :selectValue="formData.vesselCnName"
+                                      :filterable="true" :clearable="true" :remote="true" :allowCreate="true"
+                                      :buttonIf="false"
+                                      placeholder="请选择船名"
+                                      :forParameter="{ key: 'id', label: 'enName', value: 'enName' }"
+                                      @remoteMethod="vesselBvesselsListfun($event)"
+                                      @corpChange="vesselChange($event, 'vessel')"
+                                      @corpFocus="vesselBvesselsListfun($event)">
+                        </search-query>
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="6">
+                    <el-form-item label="航次" class="form-item">
+                        <el-input
+                            v-model="formData.voyageNo"
+                            placeholder="请输入"
+                            prefix-icon="el-icon-tickets"
+                        ></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <!-- 第一行:客户信息(下拉框) -->
+            <el-row :gutter="20" class="form-row">
+                <el-col :span="6">
+                    <el-form-item label="客户" class="form-item">
+                        <search-query :datalist="corpData" :selectValue="formData.corpCnName"
+                                      :filterable="true" :clearable="true" :remote="true" :allowCreate="true"
+                                      :buttonIf="false"
+                                      style="height: 100%"
+                                      placeholder="请选择客户"
+                                      :forParameter="{ key: 'id', label: 'enName', value: 'enName' }"
+                                      @remoteMethod="getBcorpsListfun($event)"
+                                      @corpChange="corpChange($event)"
+                                      @corpFocus="getBcorpsListfun($event)">
+                        </search-query>
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="18">
+                    <el-form-item label="客户OP" class="form-item">
+                        <el-row :gutter="20" class="form-row">
+                            <el-col :span="7">
+                                <search-query :datalist="corpAttnData" :selectValue="formData.corpAttnName"
+                                              :filterable="true" :clearable="true" :remote="true" :allowCreate="true"
+                                              :buttonIf="false"
+                                              style="height: 100%"
+                                              placeholder="请选择客户"
+                                              :forParameter="{ key: 'id', label: 'cname', value: 'cname' }"
+                                              @remoteMethod="getBcorpsattnListfun($event)"
+                                              @corpChange="corpAttnChange($event)"
+                                              @corpFocus="getBcorpsattnListfun($event)">
+                                </search-query>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-input
+                                    v-model="formData.corpAttnTel"
+                                    placeholder="电话"
+                                    prefix-icon="el-icon-phone"
+                                ></el-input>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-input
+                                    v-model="formData.corpAttnEmail"
+                                    placeholder="邮箱"
+                                    prefix-icon="el-icon-message"
+                                ></el-input>
+                            </el-col>
+                        </el-row>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20" class="form-row">
+                <el-col :span="23">
+                    <el-form-item label="业务来源" class="form-item">
+                        <el-row :gutter="20" class="form-row">
+                            <el-col :span="8">
+                                <search-query :datalist="srcTypeData" :selectValue="formData.srcType"
+                                              :filterable="true" :clearable="true" :remote="true" :allowCreate="true"
+                                              :buttonIf="false"
+                                              style="height: 100%"
+                                              :forParameter="{ key: 'dictKey', label: 'dictValue', value: 'dictKey' }"
+                                              @corpChange="srcTypeChange($event)">
+                                </search-query>
+                            </el-col>
+                            <el-col :span="8">
+                                <search-query :datalist="srcCnNameData" :selectValue="formData.srcCnName"
+                                              :filterable="true" :clearable="true" :remote="true" :allowCreate="true"
+                                              :buttonIf="false"
+                                              :forParameter="forParameter"
+                                              @remoteMethod="srcCnNameChange($event)"
+                                              @corpFocus="srcCnNameChange($event)"
+                                              @corpChange="srcCnNameChange($event)">
+                                </search-query>
+                            </el-col>
+                        </el-row>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+
+            <!-- 第三行:其他信息 -->
+            <el-row :gutter="20" class="form-row">
+                <el-col :span="6">
+                    <el-form-item label="场站" class="form-item">
+                        <search-query :datalist="cyData" :selectValue="formData.cyCnName" :filterable="true"
+                                      :clearable="true" :remote="true" :allowCreate="true"
+                                      :buttonIf="false"
+                                      :forParameter="{ key: 'id', label: 'cnName', value: 'cnName' }"
+                                      placeholder="请选择场站"
+                                      @remoteMethod="cyBcorpslistByType($event)" @corpChange="cyChange($event)"
+                                      @corpFocus="cyBcorpslistByType($event)">
+                        </search-query>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="联系人" class="form-item">
+                        <search-query :datalist="cyContactsData" :selectValue="formData.cyContacts"
+                                      :filterable="true" :clearable="true"
+                                      :buttonIf="false" :forParameter="{ key: 'id', label: 'cname', value: 'cname' }"
+                                      placeholder="联系人" @corpChange="cyContactsChange($event)"
+                                      @corpFocus="cyBcorpsattnListfun()"
+                                      @remoteMethod="cyBcorpsattnListfun()">
+                        </search-query>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="地址" class="form-item">
+                        <el-input
+                            v-model="formData.cyAddress"
+                            placeholder="请输入"
+                            prefix-icon="el-icon-location-outline"
+                        ></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第四行:备注 -->
+            <el-row class="form-row">
+                <el-col :span="24">
+                    <el-form-item label="场站备注" class="form-item">
+                        <el-input
+                            type="textarea"
+                            :rows="2"
+                            v-model="formData.cyRemarks"
+                            placeholder="请输入备注信息"
+                            resize="none"
+                        ></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+
+        <div slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false" class="cancel-btn">取消</el-button>
+            <el-button type="primary" @click="handleSubmit" class="submit-btn">提交</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
+import {getBcorpsattnList} from "@/api/iosBasicData/bcorpsattn";
+import {getBcorpsList, getBcorpslistByType} from "@/api/iosBasicData/bcorps";
+import {getBvesselsList} from "@/api/iosBasicData/bvessels";
+import {agreementpriceList, updateBatchField} from "@/api/iosBasicData/bills";
+import {isProcurement} from "@/api/basicData/configuration";
+import {getWorkDicts} from "@/api/system/dictbiz";
+import {getDeptLazyTree} from "@/api/system/dept";
+import {getList as userGetList} from "@/api/system/user";
+import {selectListLos} from "@/api/approval/processConfig";
+
+export default {
+    components: {SearchQuery},
+    data() {
+        return {
+            dialogVisible: false,
+            formData: {
+                ids: [],
+                vesselId: '',
+                vesselCnName: '',
+                vesselEnName: '',
+                voyageNo: '',
+                mblno: '',
+                etd: '',
+                cyId: '',
+                cyCode: '',
+                cyShortName: '',
+                cyCnName: '',
+                cyEnName: '',
+                cyAddress: '',
+                cyContacts: '',
+                cyTel: '',
+                cyRemarks: '',
+                corpId: '',
+                corpCnName: '',
+                corpEnName: '',
+                corpArgreementNo: '',
+                shortName: '',
+                corpShortName: '',
+                corpAttnId: '',
+                corpAttnName: '',
+                corpAttnTel: '',
+                corpAttnEmail: '',
+                srcType: '',
+                srcId: '',
+                srcCnName: '',
+                srcEnName: '',
+                srcDeptId: '',
+                srcDeptName: '',
+                accountPeriodType: '',
+            },
+            vesselData: [],
+            cyData: [],
+            cyContactsData: [],
+            corpData: [],
+            corpAttnData: [],
+            srcTypeData: [],
+            srcCnNameData: [],
+            business: '',
+            forParameter: {key: 'id', label: 'cnName', value: 'cnName'}
+        }
+    },
+    created() {
+        isProcurement({"param": "business"}).then(res => {
+            this.business = res.data.data
+        })
+        this.srcTypeWorkDictsfun()
+    },
+    methods: {
+        mblNoInput(value) {
+            this.formData.mblno =  value.toUpperCase()
+        },
+        handleSubmit() {
+            const isEmptyForm = Object.values(this.formData).every(
+                value => value === '' || value === null || value === undefined
+            );
+            if (isEmptyForm) {
+                this.dialogVisible = false;
+                return
+            }
+            console.log('提交数据:', this.formData);
+            this.$confirm('确认要进行批量更改吗?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                const loading = this.$loading({
+                    lock: true,
+                    text: '正在提交中',
+                    spinner: 'el-icon-loading',
+                    background: 'rgba(0, 0, 0, 0.7)'
+                })
+                updateBatchField(this.formData).then(res => {
+                    this.$message.success(res.msg)
+                    this.dialogVisible = false;
+                }).finally(() => {
+                    loading.close()
+                })
+            }).catch(() => {
+            })
+        },
+
+        srcTypeChange(value) {
+            console.info('srcTypeChange:', value)
+            if (!value) {
+                this.formData.srcType = ''
+                return
+            }
+            this.formData.srcId = ''
+            this.formData.srcCnName = ''
+            this.formData.srcEnName = ''
+            this.formData.srcType = value
+            this.forParameter.key = 'id'
+            if (value === 'OWN') {
+                // 公司
+                this.forParameter.label = 'title'
+                this.forParameter.value = 'title'
+                this.ownDeptLazyTreefun()
+            } else if (value === 'AGENT') {
+                // 代理
+                // this.$refs.srcCnNameRef.type = 'select'
+                this.forParameter.label = 'cnName'
+                this.forParameter.value = 'cnName'
+                this.agentBcorpsListfun()
+            } else if (value === 'SALES') {
+                // 业务员
+                // this.$refs.srcCnNameRef.type = 'select'
+                this.forParameter.label = 'name'
+                this.forParameter.value = 'name'
+                this.salesUserGetListfun()
+            }
+        },
+        srcCnNameChange(value) {
+            if (!value) {
+                return
+            }
+            if (this.formData.srcType === 'SALES') {
+                // 业务员
+                this.salesUserGetListfun(value)
+            } else if (this.formData.srcType === 'AGENT') {
+                // 代理
+                this.agentBcorpsListfun(value)
+            }
+            this.formData.srcCnName = value
+        },
+        cyContactsChange(value) {
+            if (!value) {
+                this.formData.cyTel = ''
+                this.formData.cyAddress = ''
+                this.formData.cyContacts = ''
+                return
+            }
+            let clickData = this.cyContactsData.find(item => item.cname === value)
+            this.formData.cyTel = clickData.tel
+            this.formData.cyAddress = clickData.addr
+            this.formData.cyContacts = clickData.cname
+        },
+        vesselChange(value) {
+            if (!value || this.vesselData.length === 0) {
+                this.formData.vesselId = ''
+                this.formData.vesselCnName = ''
+                this.formData.vesselEnName = ''
+                return
+            }
+            let clickData = this.vesselData.find(item => item.enName === value)
+            this.formData.vesselId = clickData.id
+            this.formData.vesselCnName = clickData.cnName
+            this.formData.vesselEnName = clickData.enName
+        },
+        cyChange(value) {
+            this.formData.cyId = ''
+            this.formData.cyCode = ''
+            this.formData.cyShortName = ''
+            this.formData.cyCnName = ''
+            this.formData.cyEnName = ''
+            this.formData.cyRemarks = ''
+            this.formData.cyTel = ''
+            this.formData.cyAddress = ''
+            this.formData.cyContacts = ''
+            /*            if (!value) {
+                            this.formData.cyId = ''
+                            this.formData.cyCode = ''
+                            this.formData.cyShortName = ''
+                            this.formData.cyCnName = ''
+                            this.formData.cyEnName = ''
+                            this.formData.cyRemarks = ''
+                            this.formData.cyTel = ''
+                            this.formData.cyAddress = ''
+                            this.formData.cyContacts = ''
+                            return
+                        }*/
+            let clickData = this.cyData.find(item => item.cnName === value)
+            this.formData.cyId = clickData.id
+            this.formData.cyCode = clickData.code
+            this.formData.cyShortName = clickData.shortName ? clickData.shortName : clickData.cnName
+            this.formData.cyCnName = clickData.cnName
+            this.formData.cyEnName = clickData.enName
+            this.formData.cyRemarks = clickData.details
+            // 查询场站联系人
+            getBcorpsattnList(1, 20, {pid: this.formData.cyId}).then(res => {
+                if (res.data.data.records.length > 0) {
+                    this.formData.cyTel = res.data.data.records[0].tel
+                    this.formData.cyAddress = res.data.data.records[0].addr
+                    this.formData.cyContacts = res.data.data.records[0].cname
+                }
+            })
+        },
+        corpAttnChange(value) {
+            if (this.corpAttnData.length) {
+                let clickData = this.corpAttnData.find(item => item.cname === value)
+                this.formData.corpAttnName = clickData.cname
+                this.formData.corpAttnId = clickData.id
+                this.formData.corpAttnTel = clickData.tel
+                this.formData.corpAttnEmail = clickData.email
+                return
+            }
+            if (value) {
+                this.form.corpAttnName = value
+                this.form.corpAttnId = null
+            }
+        },
+        // 选择框的回调
+        corpChange(value, name) {
+            console.info('value---', value)
+            this.formData.corpCnName = ''
+            this.formData.corpEnName = ''
+            this.formData.corpId = ''
+            this.formData.corpCode = ''
+            this.formData.shortName = ''
+            this.formData.corpSource = ""
+            if (this.business == 1) {
+                this.formData.accountPeriodType = ""
+            }
+            this.formData.corpAttnId = ''
+            this.formData.corpAttnTel = ''
+            this.formData.corpAttnEmail = ''
+            this.formData.srcType = ''
+            this.formData.srcId = ''
+            this.formData.srcCnName = ''
+            this.formData.srcEnName = ''
+            let clickData = this.corpData.find(item => item.enName === value)
+            console.info('corp data---', clickData)
+            this.formData.corpCnName = clickData.cnName
+            this.formData.corpEnName = clickData.enName
+            this.formData.corpId = clickData.id
+            this.formData.corpCode = clickData.code
+            this.formData.shortName = clickData.shortName
+            this.formData.corpSource = clickData.corpSource
+            if (this.business == 1) {
+                agreementpriceList({corpId: clickData.id}).then(res => {
+                    if (res.data.data.records.length) {
+                        this.formData.accountPeriodType = res.data.data.records[0].accountPeriodType == '月结' ? '月结' : '票结有协议'
+                    } else {
+                        this.formData.accountPeriodType = '票结无协议'
+                    }
+                })
+            }
+            // 获取 客户op数据
+            this.getBcorpsattnListfun()
+            // 业务来源参数带出
+            this.formData.srcType = clickData.sourceType
+            this.formData.srcId = clickData.srcId
+            this.formData.srcCnName = clickData.srcCnName
+            this.formData.srcEnName = clickData.srcEnName
+            this.formData.srcDeptName = clickData.deptName
+            this.formData.srcDeptId = clickData.deptId.split(',').pop()
+            this.srcTypeChange(clickData.sourceType)
+            this.srcCnNameChange(clickData.srcCnName)
+            // 航线带出往来单位的优势航线
+            // this.$set(this.form, 'lineCnName', item.advantageRoute)
+        },
+        // 船名
+        vesselBvesselsListfun(cnName) {
+            getBvesselsList(1, 10, {cnName, status: 0}).then(res => {
+                this.vesselData = res.data.data.records
+            })
+        },
+        // 获取场站数据
+        cyBcorpslistByType(cnName) {
+            let corpTypeName = '场站'
+            getBcorpslistByType(1, 10, {cnName, status: 0, corpTypeName}).then(res => {
+                this.cyData = res.data.data.records
+            })
+        },
+        // 获取场站下的联系人数据
+        cyBcorpsattnListfun() {
+            getBcorpsattnList(1, 20, {pid: this.formData.cyId}).then(res => {
+                this.cyContactsData = res.data.data.records
+            })
+        },
+        // 获取客户名称数据 往来单位数据
+        getBcorpsListfun(cnName) {
+            getBcorpsList(1, 20, {shortName: cnName, status: 0}).then(res => {
+                this.corpData = res.data.data.records
+            })
+        },
+        // 获取客户联系人 客户OP
+        getBcorpsattnListfun(cname) {
+            getBcorpsattnList(1, 10, {pid: this.formData.corpId, cname}).then(res => {
+                this.corpAttnData = res.data.data.records
+            })
+        },
+        // 获取业务来源数据
+        srcTypeWorkDictsfun() {
+            getWorkDicts('src_type_los').then(res => {
+                this.srcTypeData = res.data.data
+            })
+        },
+        // 获取公司名称 用户管理左侧
+        ownDeptLazyTreefun() {
+            getDeptLazyTree(0).then(res => {
+                this.srcCnNameData = res.data.data
+                // 来源 内容 默认登录人所属公司
+                let nowData = this.srcCnNameData.find(item => item.id === JSON.parse(localStorage.getItem('saber-userInfo')).content.dept_pid.split(',')[0])
+                this.formData.srcId = nowData.id
+                this.formData.srcCnName = nowData.title
+                this.formData.srcEnName = nowData.title
+            })
+        },
+        // 获取业务来源代理数据
+        agentBcorpsListfun(cnName) {
+            let corpTypeName = '国内直接客户,国内同行及代理,国外直接客户,国外同行及代理'
+            getBcorpslistByType(1, 20, {cnName, status: 0, corpTypeName}).then(res => {
+                this.srcCnNameData = res.data.data.records
+            })
+        },
+        // 获取业务来源业务员数据
+        salesUserGetListfun(account) {
+            if (this.$store.getters.userInfo.tenant_id === "263057") {
+                userGetList(1, 10, {roleId: '业务员'}).then(res => {
+                    this.srcCnNameData = res.data.data.records
+                })
+            } else {
+                selectListLos('业务员', account).then(res => {
+                    this.srcCnNameData = res.data.data
+                })
+            }
+
+        },
+    }
+}
+</script>
+
+<style scoped>
+/* 表单整体样式 */
+.elegant-form {
+    padding: 15px;
+    background: #f8fafc;
+    border-radius: 8px;
+}
+
+.form-row {
+    margin-bottom: 15px;
+}
+
+/* 表单项样式 */
+.form-item >>> .el-form-item__label {
+    color: #409EFF;
+    font-weight: 500;
+    font-size: 14px;
+    padding-bottom: 5px;
+}
+
+.form-item >>> .el-input__inner,
+.form-item >>> .el-textarea__inner,
+.form-item >>> .el-select {
+    border-radius: 6px;
+    border: 1px solid #dcdfe6;
+    transition: all 0.3s;
+}
+
+.form-item >>> .el-input__inner:focus,
+.form-item >>> .el-textarea__inner:focus,
+    /*.form-item >>> .el-select:hover .el-input__inner {
+        border-color: #409EFF;
+        box-shadow: 0 0 0 2px rgba(64,158,255,.2);
+    }
+
+    !* 下拉框特殊样式 *!
+    .elegant-select >>> .el-input__inner {
+        padding-left: 35px;
+    }*/
+
+    /* 图标颜色 */
+.form-item >>> .el-input__prefix {
+    color: #909399;
+}
+
+/* 按钮样式 */
+.dialog-footer {
+    text-align: center;
+    padding-top: 15px;
+}
+
+.cancel-btn {
+    width: 120px;
+    border-radius: 20px;
+    border: 1px solid #dcdfe6;
+}
+
+.submit-btn {
+    width: 120px;
+    border-radius: 20px;
+    background: linear-gradient(135deg, #409EFF, #66b1ff);
+    border: none;
+    box-shadow: 0 2px 6px rgba(64, 158, 255, .3);
+}
+</style>
+
+<style>
+/* 弹窗整体样式 */
+.elegant-dialog {
+    border-radius: 12px;
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
+    max-width: 1200px;
+}
+
+.elegant-dialog .el-dialog__header {
+    background: linear-gradient(90deg, #f5f7fa, #e4e7ed);
+    border-radius: 12px 12px 0 0;
+    padding: 15px 20px;
+    border-bottom: 1px solid #EBEEF5;
+}
+
+.elegant-dialog .el-dialog__title {
+    color: #303133;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.elegant-dialog .el-dialog__body {
+    padding: 20px;
+    max-height: 75vh;
+}
+</style>