You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
804 lines
21 KiB
804 lines
21 KiB
<template> |
|
<div v-loading="details.loadingObj.pageLoading"> |
|
<el-form label-width="150px" :model="details.form" ref="formRef"> |
|
<!-- 计价方式 --> |
|
<el-form-item |
|
label="计价方式" |
|
prop="pickupPricingType" |
|
:rules="[{ required: true, message: '请选择计价方式', trigger: ['blur', 'change'] }]" |
|
> |
|
<el-select |
|
v-model="details.form.pickupPricingType" |
|
clearable |
|
multiple |
|
placeholder="请选择计价方式" |
|
style="width: 20vw" |
|
@change="handleChangePrcieMethod" |
|
> |
|
<el-option |
|
v-for="item in details.priceMethodType" |
|
:key="item.dictKey" |
|
:label="item.dictValue" |
|
:value="item.dictKey" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<!-- 是否统一区域计费 --> |
|
<el-form-item |
|
label="是否统一区域计费" |
|
prop="pickupIsUnifyAreaBill" |
|
:rules="[ |
|
{ required: true, message: '请选择是否统一区域计费', trigger: ['blur', 'change'] }, |
|
]" |
|
> |
|
<el-radio-group v-model="details.form.pickupIsUnifyAreaBill" class="ml-4"> |
|
<el-radio |
|
v-for="item in details.isType" |
|
:key="item.value" |
|
:label="item.value" |
|
size="large" |
|
>{{ item.label }} |
|
</el-radio> |
|
</el-radio-group> |
|
</el-form-item> |
|
|
|
<!-- 是否区分品类 --> |
|
<el-form-item |
|
label="是否区分品类" |
|
prop="pickupIsByCategory" |
|
:rules="[{ required: true, message: '请选择是否区分品类', trigger: ['blur', 'change'] }]" |
|
> |
|
<el-radio-group v-model="details.form.pickupIsByCategory" class="ml-4"> |
|
<el-radio |
|
v-for="item in details.isType" |
|
:key="item.value" |
|
:label="item.value" |
|
size="large" |
|
>{{ item.label }} |
|
</el-radio> |
|
</el-radio-group> |
|
</el-form-item> |
|
</el-form> |
|
|
|
<!-- 品类管理 --> |
|
<template v-if="details.form.pickupIsByCategory === '1'"> |
|
<el-divider content-position="left">品类管理</el-divider> |
|
|
|
<template v-for="value in details.form.billTemplateDetail" :key="value.title"> |
|
<!-- 附加费品类 --> |
|
<el-form-item |
|
label-width="150px" |
|
v-if="details.form.pickupPricingType.includes(value.code)" |
|
:label="value.title" |
|
> |
|
<div |
|
class="el_Storagecategory" |
|
v-loading="goriesloading" |
|
element-loading-text="Loading..." |
|
> |
|
<div class="el_table_span"> |
|
<div class="el_table_id">序号</div> |
|
<div class="el_table_title">产品品类</div> |
|
</div> |
|
|
|
<!-- 表格循环 --> |
|
<div class="el_table_td" v-for="(item, index) in value.categories"> |
|
<div class="el_table_idNumber">{{ index + 1 }}</div> |
|
<el-select |
|
:ref="value.title + index" |
|
class="el_Cselect" |
|
v-model="item.goods" |
|
filterable |
|
clearable |
|
placeholder="请选择品类" |
|
style="width: 240px" |
|
:loading="item.loading" |
|
@change="handleChangeCategory(item)" |
|
remote |
|
reserve-keyword |
|
default-first-option |
|
:remote-method="value => debounce(remoteMethod(value, item), 500)" |
|
> |
|
<el-option |
|
v-for="val in item.goodsArr" |
|
:key="val.goodsId" |
|
:label="val.goodsName" |
|
:value="val.goodsId" |
|
:disabled="goodsIds.includes(val.goodsId)" |
|
/> |
|
</el-select> |
|
<div class="el_table_operation"> |
|
<!-- 新增 --> |
|
<span |
|
v-if="item.plus" |
|
@click="handlePlus(value, index)" |
|
class="el_table_operation_span_b" |
|
>+ |
|
</span> |
|
<!-- 删除 --> |
|
<span |
|
v-if="item.reduce" |
|
@click="handleReduce(value, index)" |
|
class="el_table_operation_span_a" |
|
>- |
|
</span> |
|
</div> |
|
</div> |
|
</div> |
|
</el-form-item> |
|
</template> |
|
</template> |
|
|
|
<!-- 是否最低计费 --> |
|
<el-form-item label-width="150px" label="是否最低计费"> |
|
<el-radio-group v-model="details.form.pickupIsMinCost" class="ml-4"> |
|
<el-radio v-for="item in details.isType" :key="item.value" :label="item.value" size="large" |
|
>{{ item.label }} |
|
</el-radio> |
|
</el-radio-group> |
|
</el-form-item> |
|
|
|
<!-- 最低计费类型 --> |
|
<el-form-item |
|
v-if="details.form.pickupIsMinCost === '1'" |
|
label-width="150px" |
|
label="最低计费类型" |
|
> |
|
<el-radio-group v-model="details.form.pickupMinCostType" class="ml-4"> |
|
<template v-for="item in details.lowestType" :key="item.value"> |
|
<el-radio |
|
v-if="!item.MappingOrNot || details.form.pickupPricingType.includes(item.mapValue)" |
|
:label="item.dictKey" |
|
size="large" |
|
>{{ item.dictValue }} |
|
</el-radio> |
|
|
|
<el-radio v-else :label="item.dictKey" size="large" disabled>{{ |
|
item.dictValue |
|
}}</el-radio> |
|
</template> |
|
</el-radio-group> |
|
</el-form-item> |
|
|
|
<!-- 操作按钮 --> |
|
<div class="flex-c-c"> |
|
<el-button type="primary" icon="Refresh" @click="resetFormData">重置</el-button> |
|
<el-button type="primary" icon="Position" @click="handleSubmit">保存</el-button> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script setup lang="ts"> |
|
import { |
|
ref, |
|
reactive, |
|
getCurrentInstance, |
|
nextTick, |
|
defineEmits, |
|
defineComponent, |
|
computed, |
|
} from 'vue'; |
|
import { debounce, deepClone, getObjType } from '@/utils/util'; |
|
import { ElMessage, ElMessageBox } from 'element-plus'; |
|
import { getDictionaryBiz } from '@/api/system/dict'; |
|
import { postFindCategoryInfo } from '@/api/distribution/CreateOrder.js'; |
|
import { $_priceTemplate, $_putpriceTemplate } from '@/api/financialsector/index'; //价格模板 |
|
import { useRoute } from 'vue-router'; |
|
import { useStore } from 'vuex'; |
|
const $useStore = useStore(); |
|
const $route = useRoute(); //获取地址栏参数 |
|
const emit = defineEmits(['request-data']); |
|
defineComponent({ |
|
emits: ['request-data'], |
|
}); |
|
// 接收参数 |
|
const props = defineProps({ |
|
templateData: Object, |
|
}); |
|
|
|
const instance = getCurrentInstance(); |
|
|
|
/** 表单实例 */ |
|
const formRef = ref(); |
|
|
|
interface categories { |
|
/** 品类名称 */ |
|
goodsName: string; |
|
/** 品类id */ |
|
goodsId: string; |
|
/** 显示新增 */ |
|
plus: boolean; |
|
/** 显示删除 */ |
|
reduce: boolean; |
|
/** 品类名映射 */ |
|
goods: string; |
|
/** 模糊查询存放品类的数组 */ |
|
goodsArr: {}[]; |
|
/** loading */ |
|
loading: boolean; |
|
} |
|
|
|
interface BillTemplateDetail { |
|
/** 标题 */ |
|
title: string; |
|
/** 对应的code */ |
|
code: string; |
|
/** 品类数组 */ |
|
categories: categories[]; |
|
} |
|
|
|
/** 页面数据 */ |
|
const details = reactive({ |
|
/** 计价方式集合 */ |
|
priceMethodType: [ |
|
{ |
|
label: '按件', |
|
value: '0', |
|
}, |
|
{ |
|
label: '按整车', |
|
value: '1', |
|
}, |
|
{ |
|
label: '按方', |
|
value: '2', |
|
}, |
|
{ |
|
label: '按重量', |
|
value: '3', |
|
}, |
|
], |
|
isType: [ |
|
{ |
|
label: '是', |
|
value: '1', |
|
}, |
|
{ |
|
label: '否', |
|
value: '0', |
|
}, |
|
], |
|
/** 最低计费类型集合 |
|
* mapValue 用于映射最低计费类型 当选择的计价方式内与该项中mapValue相同时, 显示其选项 |
|
* 当 MappingOrNot 为false时, 不需要检测, 直接显示 |
|
*/ |
|
lowestType: [ |
|
{ |
|
label: '价格', |
|
value: '0', |
|
MappingOrNot: false, |
|
}, |
|
{ |
|
label: '件', |
|
value: '1', |
|
mapValue: '1', |
|
MappingOrNot: true, |
|
}, |
|
{ |
|
label: '方数(m³)', |
|
value: '2', |
|
mapValue: '3', |
|
MappingOrNot: true, |
|
}, |
|
{ |
|
label: '重量(kg)', |
|
value: '3', |
|
mapValue: '4', |
|
MappingOrNot: true, |
|
}, |
|
], |
|
/** 表单数据 */ |
|
form: { |
|
/** 计价方式 */ |
|
pickupPricingType: [], |
|
/** 是否统一区域计费 */ |
|
pickupIsUnifyAreaBill: '0', |
|
/** 是否区分品类 */ |
|
pickupIsByCategory: '0', |
|
/** 是否最低计费 */ |
|
pickupIsMinCost: '0', |
|
/** 最低计费类型 */ |
|
pickupMinCostType: '1', |
|
/** 计费模版详情 */ |
|
billTemplateDetail: [] as BillTemplateDetail[], |
|
}, |
|
/** 初始化form数据 */ |
|
initForm: {}, |
|
/** loading */ |
|
loadingObj: { |
|
pageLoading: false, |
|
}, |
|
}); |
|
|
|
const goodsIds = computed(() => { |
|
const ids = []; |
|
|
|
try { |
|
if (getObjType(details.form.billTemplateDetail) !== 'array') return; |
|
|
|
for (let i = 0; i < details.form.billTemplateDetail.length; i++) { |
|
const value = details.form.billTemplateDetail[i]; |
|
|
|
if (getObjType(value.categories) !== 'array') continue; |
|
for (let j = 0; j < value.categories.length; j++) { |
|
const element = value.categories[j]; |
|
|
|
if (element.goodsId || element.goodsId === 0) ids.push(element.goodsId); |
|
} |
|
} |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} |
|
|
|
console.log('ids :>> ', ids); |
|
|
|
return ids; |
|
}); |
|
|
|
const goriesloading = ref(false); |
|
|
|
/** 计价方式改变时 */ |
|
const handleChangePrcieMethod = value => { |
|
let activeItem: any = {}; |
|
for (let i = 0; i < details.lowestType.length; i++) { |
|
const item = details.lowestType[i]; |
|
if (item.value !== details.form.pickupMinCostType) continue; |
|
activeItem = item; |
|
break; |
|
} |
|
|
|
if (!activeItem.MappingOrNot) return; |
|
if (!details.form.pickupPricingType.includes(activeItem.mapValue)) |
|
details.form.pickupMinCostType = '1'; |
|
}; |
|
|
|
/** 处理干线计费模式 */ |
|
const handleTrunkLinePricingType = response => { |
|
const { code, data } = response.data; |
|
|
|
if (code !== 200) return; |
|
|
|
details.priceMethodType = data || []; |
|
|
|
const _billTemplateDetailArr = []; |
|
for (let i = 0; i < details.priceMethodType.length; i++) { |
|
const value = details.priceMethodType[i]; |
|
if (value.dictKey != '2') { |
|
const _itemObj = { |
|
title: value.dictValue + '计费品类', |
|
code: value.dictKey, |
|
categories: [ |
|
{ |
|
reduce: false, |
|
plus: true, |
|
goodsName: '', |
|
goodsId: '', |
|
goods: '', |
|
goodsArr: [], |
|
loading: false, |
|
}, |
|
], |
|
}; |
|
|
|
if (!props.templateData.request) { |
|
_billTemplateDetailArr.push(_itemObj); |
|
continue; |
|
} |
|
|
|
const _arr = []; |
|
|
|
// 按件 |
|
if (value.dictKey === '1') { |
|
const { pickupPieceCategorys } = props.templateData.request; |
|
|
|
if (pickupPieceCategorys && pickupPieceCategorys.length !== 0) { |
|
for (let i = 0; i < pickupPieceCategorys.length; i++) { |
|
const item = pickupPieceCategorys[i]; |
|
|
|
_arr.push({ |
|
reduce: i === 0 ? false : true, |
|
plus: true, |
|
goodsName: item.name, |
|
goodsId: item.id, |
|
goods: item.name, |
|
goodsArr: [], |
|
loading: false, |
|
}); |
|
} |
|
|
|
_itemObj.categories = _arr; |
|
} |
|
} |
|
// 按重量 |
|
if (value.dictKey === '4') { |
|
const { pickupWeightCategorys } = props.templateData.request; |
|
|
|
if (pickupWeightCategorys && pickupWeightCategorys.length !== 0) { |
|
for (let i = 0; i < pickupWeightCategorys.length; i++) { |
|
const item = pickupWeightCategorys[i]; |
|
|
|
_arr.push({ |
|
reduce: i === 0 ? false : true, |
|
plus: true, |
|
goodsName: item.name, |
|
goodsId: item.id, |
|
goods: item.name, |
|
goodsArr: [], |
|
loading: false, |
|
}); |
|
} |
|
|
|
_itemObj.categories = _arr; |
|
} |
|
} |
|
|
|
// 按方 |
|
if (value.dictKey === '3') { |
|
const { pickupCubeCategorys } = props.templateData.request; |
|
|
|
if (pickupCubeCategorys && pickupCubeCategorys.length !== 0) { |
|
for (let i = 0; i < pickupCubeCategorys.length; i++) { |
|
const item = pickupCubeCategorys[i]; |
|
|
|
_arr.push({ |
|
reduce: i === 0 ? false : true, |
|
plus: true, |
|
goodsName: item.name, |
|
goodsId: item.id, |
|
goods: item.name, |
|
goodsArr: [], |
|
loading: false, |
|
}); |
|
} |
|
|
|
_itemObj.categories = _arr; |
|
} |
|
} |
|
|
|
_billTemplateDetailArr.push(_itemObj); |
|
} |
|
} |
|
|
|
details.form.billTemplateDetail = _billTemplateDetailArr; |
|
}; |
|
|
|
/** 处理最低计费价格 */ |
|
const handleLowestPrice = response => { |
|
const { code, data } = response.data; |
|
|
|
if (code !== 200) return; |
|
|
|
const _dataArr = []; |
|
|
|
if (!data) { |
|
} |
|
|
|
details.lowestType = data || []; |
|
}; |
|
|
|
/** 获取业务字典 */ |
|
const initDictionaryBiz = async () => { |
|
try { |
|
// 干线计费方式 |
|
const trunkLinePromise = getDictionaryBiz('trunk_line_pricing_type'); |
|
// 最低计费价格 |
|
const minCostPromise = getDictionaryBiz('min_cost_type'); |
|
|
|
const [trunkLineResult, minCostResult] = await Promise.all([trunkLinePromise, minCostPromise]); |
|
|
|
await nextTick(); |
|
|
|
if (Object.keys(props.templateData).length !== 0) { |
|
details.form = deepClone(props.templateData.request); |
|
|
|
details.form.pickupPricingType = details.form.pickupPricingType |
|
? details.form.pickupPricingType.split(',') |
|
: []; |
|
details.form.pickupIsByCategory += ''; |
|
details.form.pickupMinCostType += ''; |
|
details.form.pickupIsUnifyAreaBill += ''; |
|
details.form.pickupIsMinCost += ''; |
|
} |
|
|
|
// 处理干线 |
|
handleTrunkLinePricingType(trunkLineResult); |
|
handleLowestPrice(minCostResult); |
|
|
|
// 初始化复制form数据 |
|
initFormData(); |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
} |
|
}; |
|
|
|
initDictionaryBiz(); |
|
|
|
/** 复制form初始数据 */ |
|
const initFormData = () => { |
|
details.initForm = deepClone(details.form); |
|
}; |
|
|
|
/** 新增品类 */ |
|
const handlePlus = async (value: any, index: number) => { |
|
value.categories.splice(index + 1, 0, { |
|
reduce: true, |
|
plus: true, |
|
goodsName: '', |
|
goodsId: '', |
|
goods: '', |
|
goodsArr: [], |
|
loading: false, |
|
}); |
|
|
|
await nextTick(); |
|
|
|
instance.ctx.$refs[value.title + (index + 1)][0].focus(); |
|
}; |
|
|
|
/** 删除品类 */ |
|
const handleReduce = (value: any, index: number) => { |
|
if (index === 0) return; |
|
value.categories.splice(index, 1); |
|
}; |
|
|
|
/** 货物变化时 */ |
|
const handleChangeCategory = item => { |
|
if (!item.goods) { |
|
item.goodsId = ''; |
|
item.goodsName = ''; |
|
return; |
|
} |
|
|
|
for (let i = 0; i < item.goodsArr.length; i++) { |
|
const value = item.goodsArr[i]; |
|
|
|
if (item.goods !== value.goodsId) continue; |
|
item.goodsId = value.goodsId; |
|
item.goodsName = value.goodsName; |
|
break; |
|
} |
|
}; |
|
|
|
/** 插混品类 */ |
|
const remoteMethod = async (value, item) => { |
|
try { |
|
if (!value) return; |
|
item.loading = true; |
|
|
|
const response = await postFindCategoryInfo({ goodsName: value }); |
|
|
|
const { code, data } = response.data; |
|
|
|
if (code !== 200) return; |
|
|
|
item.goodsArr = data || []; |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
item.loading = false; |
|
} |
|
}; |
|
|
|
/** 重置数据 */ |
|
const resetFormData = () => { |
|
ElMessageBox.confirm('是否重置数据?', '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning', |
|
}).then(() => { |
|
formRef.value.resetFields(); |
|
|
|
details.loadingObj.pageLoading = true; |
|
details.form = deepClone(details.initForm); |
|
setTimeout(() => { |
|
details.loadingObj.pageLoading = false; |
|
}, 300); |
|
}); |
|
}; |
|
|
|
/** 提交 */ |
|
const handleSubmit = async () => { |
|
if (details.form.pickupPricingType.length === 0) ElMessage.error('请选择计价方式'); |
|
|
|
formRef.value.validate(async valid => { |
|
if (!valid) return; |
|
await emit('request-data'); //通知父页面传递数据 |
|
if (!props.templateData.TemplateName) { |
|
ElMessage({ |
|
message: '请输入模板名称', |
|
type: 'warning', |
|
}); |
|
return; |
|
} else { |
|
details.form.name = props.templateData.TemplateName; //模板名称 |
|
} |
|
|
|
if (!props.templateData.brand) { |
|
ElMessage({ |
|
message: '请选择品牌', |
|
type: 'warning', |
|
}); |
|
return; |
|
} else { |
|
details.form.brandId = props.templateData.brand; //品牌ID |
|
} |
|
|
|
details.form.serviceType = props.templateData.ServiceType.join(','); //顶部选择的服务类型 |
|
const submitData = deepClone(details.form); //深拷贝 |
|
submitData.pickupPricingType = submitData.pickupPricingType.join(','); //计价方式 |
|
// 选择了是区分品类才进行处理 |
|
if (details.form.pickupIsByCategory === '1') { |
|
submitData.billTemplateDetail.forEach(item => { |
|
switch (item.code) { |
|
case '1': |
|
submitData.pickupPieceCategory = item.categories |
|
.filter(res => res.goodsId) |
|
.map(res => res.goodsId) |
|
.join(','); //按件计费品类 |
|
break; |
|
case '3': |
|
submitData.pickupCubeCategory = item.categories |
|
.filter(res => res.goodsId) |
|
.map(res => res.goodsId) |
|
.join(','); //按方计费品类 |
|
break; |
|
case '4': |
|
submitData.pickupWeightCategory = item.categories |
|
.filter(res => res.goodsId) |
|
.map(res => res.goodsId) |
|
.join(','); //按重量计费品类 |
|
break; |
|
default: |
|
break; |
|
} |
|
}); |
|
} |
|
// 是否最低计费(如果为否责置空最低计费类型) |
|
if (details.form.pickupIsMinCost !== '1') { |
|
details.form.pickupMinCostType = null; |
|
} |
|
|
|
delete submitData.billTemplateDetail; //删除不要参数 |
|
console.log(submitData, '要提交的数据'); |
|
|
|
if (props.templateData.code || $route.query.id) { |
|
// 走编辑 |
|
let data = { |
|
id: props.templateData.code, //模板ID |
|
...submitData, |
|
checkType: '1', |
|
}; |
|
$_putpriceTemplate(data).then(res => { |
|
console.log(res, '编辑成功之后返回值'); |
|
if (res.data.code == 200) { |
|
ElMessage({ |
|
message: res.data.msg, |
|
type: 'success', |
|
}); |
|
|
|
$useStore.commit('EDIT_REFRESHITEM', { title: 'CustomerBaseprice', status: true }); |
|
} |
|
}); |
|
} else { |
|
// 走新增 |
|
let data = { |
|
...submitData, |
|
}; |
|
$_priceTemplate(data).then(res => { |
|
console.log(res, '提交成功之后返回值'); |
|
if (res.data.code == 200) { |
|
ElMessage({ |
|
message: res.data.msg, |
|
type: 'success', |
|
}); |
|
$useStore.commit('EDIT_REFRESHITEM', { title: 'CustomerBaseprice', status: true }); |
|
emit('request-data', res.data.data); //把获取到的数据传递给父页面 |
|
} |
|
// res.data.data 返回的参数 |
|
}); |
|
} |
|
}); |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
// 标题 |
|
:deep(.el-divider__text.is-left) { |
|
font-size: 20px; |
|
font-weight: bold; |
|
color: var(--el-color-primary); |
|
} |
|
|
|
:deep(.el-input-number .el-input__inner) { |
|
text-align: left; |
|
} |
|
|
|
.el_Cselect { |
|
margin-left: 10px; |
|
} |
|
.el_table_span { |
|
font-size: 16px; |
|
font-weight: 500; |
|
display: inline-block; |
|
width: 160px; |
|
} |
|
|
|
.el_Storagecategory { |
|
border: 1px solid #ccc; |
|
.el_table_span { |
|
display: flex; |
|
width: 100%; |
|
background-color: #ebeef5; |
|
padding: 4px; |
|
box-sizing: border-box; |
|
} |
|
.el_table_id { |
|
width: 62px; |
|
font-weight: 600; |
|
color: #606266; |
|
} |
|
.el_table_title { |
|
font-weight: 600; |
|
color: #606266; |
|
} |
|
.el_table_td { |
|
display: flex; |
|
height: 40px; |
|
align-items: center; |
|
border-bottom: 1px solid #ccc; |
|
position: relative; |
|
.el_table_operation { |
|
width: 70px; |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
position: absolute; |
|
right: -80px; |
|
.el_table_operation_span_a, |
|
.el_table_operation_span_b { |
|
font-size: 20px; |
|
font-weight: bold; |
|
width: 40%; |
|
border: 2px solid #f00; |
|
color: #f00; |
|
height: 70%; |
|
border-radius: 6px; |
|
display: block; |
|
line-height: 23px; |
|
text-align: center; |
|
cursor: pointer; |
|
} |
|
.el_table_operation_span_b { |
|
border: 2px solid #0d83b7; |
|
color: #0d83b7; |
|
} |
|
|
|
.el_table_operation_span_a:hover { |
|
background-color: #f00; |
|
color: #ccc; |
|
} |
|
.el_table_operation_span_b:hover { |
|
background-color: #0d83b7; |
|
color: #ccc; |
|
} |
|
} |
|
} |
|
.el_table_idNumber { |
|
width: 50px; |
|
text-align: center; |
|
font-size: 16px; |
|
font-weight: 400; |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
border-right: 1px solid #ccc; |
|
} |
|
:deep(.el-input__wrapper) { |
|
box-shadow: none; |
|
} |
|
} |
|
</style>
|
|
|