Skip to content

F
factory_front
Commit d24ac9d0 by linjinhong
Options

物流方式新增弹窗物流编码添加提示交互，物流公司新增弹窗物流公司编码关联名称

parent a0fe056a
Showing with 218 additions and 100 deletions
components.d.ts
......@@ -32,6 +32,7 @@ declare module 'vue' {
ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElLink: typeof import('element-plus/es')['ElLink']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption']
......
src/views/logistics/components/LogisticsWaySelect.tsx
......@@ -21,6 +21,7 @@ const styles = {
display: 'flex',
padding: '10px',
justifyContent: 'flex-start',
flexWrap: 'wrap',
backgroundColor: '#efefef',
},
} as const
......
src/views/logistics/logisticsCompany.vue
......@@ -4,9 +4,13 @@ import SplitDiv from '@/components/splitDiv/splitDiv.vue'
import {
getLogisticsLog,
IForm,
ILogisticsCompany, ILogisticsCompanyData, ILogisticsList,
ILogisticsCompany,
ILogisticsCompanyData,
ILogisticsList,
logisticsCompany,
logisticsCompanyAdd, logisticsCompanyAllCodelist, logisticsCompanyDelete,
logisticsCompanyAdd,
logisticsCompanyAllCodelist,
logisticsCompanyDelete,
logisticsCompanyUpdate,
} from '@/api/logistics.ts'
import LogDialog from '@/views/logistics/components/LogDialog.tsx'
......@@ -51,25 +55,12 @@ const createData = ref({
},
})
const rules = {
code: [
{ required: true, message: '请选择物流公司编码', trigger: 'change' },
],
name: [
{ required: true, message: '请输入名称', trigger: 'blur' },
],
contact: [
{ required: true, message: '请输入联系人', trigger: 'blur' },
],
phone: [
{ required: true, message: '请输入电话/手机', trigger: 'blur' },
],
siteUrl: [
{ required: true, message: '请输入网址', trigger: 'blur' },
code: [{ required: true, message: '请选择物流公司编码', trigger: 'change' }],
],
address: [
{ required: true, message: '请输入地址', trigger: 'blur' },
],
contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
phone: [{ required: true, message: '请输入电话/手机', trigger: 'blur' }],
siteUrl: [{ required: true, message: '请输入网址', trigger: 'blur' }],
address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
}
const leftData = ref<ILogisticsCompany[]>([])
const pagination = ref<ILogisticsCompanyData>({
......@@ -127,7 +118,10 @@ const handleBatchDelete = async (row: ILogisticsCompany | null) => {
cancelButtonText: '取消',
type: 'warning',
})
const str = row && row.id ? row.id?.toString() : selections.value.map((el) => el.id).join(',')
const str =
row && row.id
? row.id?.toString()
: selections.value.map((el) => el.id).join(',')
await logisticsCompanyDelete(str)
ElMessage.success('删除成功')
await getData()
......@@ -173,9 +167,10 @@ const updateWarehouse = (item: IForm) => {
}
const codeChange = (v: string) => {
const item = logisticsList.value.find(d => d.code === v)
const item = logisticsList.value.find((d) => d.code === v)
if (item) {
otherFields.value = Object.keys(item.apiData || {})
form.value.name = item.basicsName
}
}
......@@ -194,19 +189,27 @@ getLogisticsList()
<el-form inline :model="searchForm">
<el-form-item label="名称">
<el-input
v-model="searchForm.name" style="width: 140px;" placeholder="请输入名称"
clearable></el-input>
v-model="searchForm.name"
style="width: 140px"
placeholder="请输入名称"
clearable
></el-input>
</el-form-item>
<el-form-item label="编码">
<el-input
v-model="searchForm.code" style="width: 140px;" placeholder="请输入编码"
clearable></el-input>
v-model="searchForm.code"
style="width: 140px"
placeholder="请输入编码"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getData">查询</el-button>
<el-button type="success" @click="createWarehouse">新增</el-button>
<el-button type="danger" @click="handleBatchDelete(null)">删除</el-button>
<el-button type="danger" @click="handleBatchDelete(null)"
>删除</el-button
>
</el-form-item>
</el-form>
</el-card>
......@@ -217,53 +220,76 @@ getLogisticsList()
<div class="table-flex">
<div class="left-table">
<div class="table-container">
<el-table height="100%" :data="leftData" border @selection-change="handleSelectionChange">
<el-table
height="100%"
:data="leftData"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" />
<el-table-column type="index" label="序号" width="60" />
<el-table-column
label="名称"
prop="name"
align="center"
show-overflow-tooltip>
show-overflow-tooltip
>
</el-table-column>
<el-table-column
label="编码"
prop="code"
align="center"
show-overflow-tooltip>
show-overflow-tooltip
>
</el-table-column>
<el-table-column
label="联系人"
prop="contact"
align="center"
show-overflow-tooltip>
show-overflow-tooltip
>
</el-table-column>
<el-table-column
label="电话"
prop="phone"
align="center"
show-overflow-tooltip>
show-overflow-tooltip
>
</el-table-column>
<el-table-column
label="网址"
prop="siteUrl"
align="center"
show-overflow-tooltip>
show-overflow-tooltip
>
</el-table-column>
<el-table-column
label="地址"
prop="address"
align="center"
show-overflow-tooltip>
show-overflow-tooltip
>
</el-table-column>
<el-table-column width="260" label="操作" align="center">
<template #default="{row}">
<el-button text type="primary" @click="updateWarehouse(row)">编辑</el-button>
<el-button text type="danger" @click="handleBatchDelete(row)">删除</el-button>
<el-button text type="info" @click="handleShowLog(row)">操作日志</el-button>
<template #default="{ row }">
<el-button
text
type="primary"
@click="updateWarehouse(row)"
>编辑</el-button
>
<el-button
text
type="danger"
@click="handleBatchDelete(row)"
>删除</el-button
>
<el-button text type="info" @click="handleShowLog(row)"
>操作日志</el-button
>
</template>
</el-table-column>
</el-table>
......@@ -279,7 +305,6 @@ getLogisticsList()
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
<LogDialog
......@@ -287,46 +312,105 @@ getLogisticsList()
title="操作日志"
@close="logDialogVisible = false"
>
<div v-for="item in logList" :key="item.id" style="margin-bottom: 8px">
<div
v-for="item in logList"
:key="item.id"
style="margin-bottom: 8px"
>
<span style="margin-right: 10px">{{ item.createTime }}</span>
<span>{{ item.description }}</span>
</div>
</LogDialog>
<el-dialog v-model="createData.show" :close-on-click-modal="false" width="900px" :title="createData.title">
<el-form v-if="createData.show" ref="formRef" style="padding: 30px" label-width="110px" :rules="rules" :model="form" class="el-row">
<el-dialog
v-model="createData.show"
:close-on-click-modal="false"
width="900px"
:title="createData.title"
>
<el-form
v-if="createData.show"
ref="formRef"
style="padding: 30px"
label-width="110px"
:rules="rules"
:model="form"
class="el-row"
>
<el-form-item class="el-col-12" label="物流公司编码" prop="code">
<el-select v-model="form.code" clearable filterable @change="codeChange">
<el-select
v-model="form.code"
clearable
filterable
@change="codeChange"
>
<el-option
v-for="it in logisticsList" :key="it.code" :label="it.code"
:value="it.code">
v-for="it in logisticsList"
:key="it.code"
:label="it.code"
:value="it.code"
>
{{ it.code }}
<span style="font-size: 14px; color: #999; line-height: 24px">
({{ it.basicsName }})
</span>
<span
style="font-size: 14px; color: #999; line-height: 24px"
>
({{ it.basicsName }})
</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item class="el-col-12" label="名称" prop="name">
<el-input v-model="form.name" clearable placeholder="请输入名称"></el-input>
<el-form-item class="el-col-12" label="名称">
<el-input
v-model="form.name"
clearable
disabled
placeholder="选择物流公司编码后展示"
></el-input>
</el-form-item>
<el-form-item class="el-col-12" label="联系人" prop="contact">
<el-input v-model="form.contact" clearable placeholder="请输入联系人"></el-input>
<el-input
v-model="form.contact"
clearable
placeholder="请输入联系人"
></el-input>
</el-form-item>
<el-form-item class="el-col-12" label="电话/手机" prop="phone">
<el-input v-model="form.phone" clearable placeholder="请输入电话/手机"></el-input>
<el-input
v-model="form.phone"
clearable
placeholder="请输入电话/手机"
></el-input>
</el-form-item>
<el-form-item class="el-col-12" label="网址" prop="siteUrl">
<el-input v-model="form.siteUrl" clearable placeholder="请输入网址"></el-input>
<el-input
v-model="form.siteUrl"
clearable
placeholder="请输入网址"
></el-input>
</el-form-item>
<el-form-item class="el-col-12" label="地址" prop="address">
<el-input v-model="form.address" clearable placeholder="请输入地址"></el-input>
<el-input
v-model="form.address"
clearable
placeholder="请输入地址"
></el-input>
</el-form-item>
<el-form-item v-for="o in otherFields" :key="o" class="el-col-12" required :label="o" :prop="`apiData.${o}`">
<el-input v-model="form.apiData[o]" clearable :placeholder="`请输入${o}`"></el-input>
<el-form-item
v-for="o in otherFields"
:key="o"
class="el-col-12"
required
:label="o"
:prop="`apiData.${o}`"
>
<el-input
v-model="form.apiData[o]"
clearable
:placeholder="`请输入${o}`"
></el-input>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="createData.show=false">取消</el-button>
<el-button @click="createData.show = false">取消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</template>
</el-dialog>
......
src/views/logistics/logisticsMethod.vue
......@@ -42,7 +42,6 @@
v-model="editForm"
:config="formConfig"
form-item-width="100%"
labelWidth="125"
>
</CustomizeForm>
......@@ -98,9 +97,9 @@ import { IFormConfig } from '@/components/CustomizeForm.tsx'
import usePageList from '@/utils/hooks/usePageList'
import { useValue } from './hooks/useValue'
import { showConfirm } from '@/utils/ui'
import { Edit, Delete, List } from '@element-plus/icons-vue'
import { Edit, Delete, List, WarningFilled } from '@element-plus/icons-vue'
import { debounce } from 'lodash-es'
import UPARCELImage from '@/assets/images/UPARCEL物流编码.png'
const [searchForm] = useValue({})
const [editForm, resetEditForm] = useValue<LogisticsMethod>({
platformList: [{ platform: '', logisticsName: '', showPlatform: [] }],
......@@ -131,6 +130,13 @@ const dialogVisible = ref(false)
const logDialogVisible = ref(false)
const editFormRef = ref<InstanceType<typeof CustomizeForm> | null>(null)
const selection = ref([])
interface ImageList {
[key: string]: string
}
const imgeList = ref<ImageList>({
UPARCEL: UPARCELImage,
})
const searchConfig = ref<ISeachFormConfig[]>([
{
prop: 'name',
......@@ -173,41 +179,6 @@ const logisticsCompanyList = ref([])
const formConfig = computed<IFormConfig[]>(() => [
{ title: '物流基础信息' },
{
prop: 'name',
type: 'input',
label: '物流名称',
attrs: {
placeholder: '请输入物流名称',
},
rules: [
{
required: true,
message: '请输入物流名称',
},
],
},
{
prop: 'warehouseId',
type: 'select',
label: '仓库名称',
attrs: {
placeholder: '请选择仓库名称',
label: 'name',
value: 'id',
options: [...(warehouseList.value || [])],
onChange: (value: { name: string; id: string | number }) => {
editForm.value.warehouseName = value.name
},
},
rules: [
{
required: true,
message: '请选择仓库名称',
},
],
},
{
prop: 'companyId',
type: 'select',
label: '物流公司',
......@@ -282,15 +253,51 @@ const formConfig = computed<IFormConfig[]>(() => [
},
],
},
{
prop: 'serviceCode',
type: 'input',
label: '物流编码',
fixed: 'last',
attrs: {
placeholder: '请输入物流编码',
render: () => {
const company = editForm.value.company
return (
<div style="display: flex; width:100%;height: 100%">
<el-input
v-model={editForm.value.serviceCode}
placeholder="请输入物流编码"
/>
<el-popover
placement="bottom-end"
width={1050}
v-slots={{
default: () => (
<div style="width: 100%; height: 100%;">
<div style="font-size: 20px; font-weight: bold;margin-bottom: 10px;">
{company ? `${company}物流编码来源图:` : '请先选择物流公司'}
</div>
{company && imgeList.value[company] && (
<img
src={imgeList.value[company]}
style={{ width: '100%' }}
alt={`${company}物流编码图`}
/>
)}
</div>
),
reference: () => (
<el-icon
style={{ marginLeft: '10px', height: '100%' }}
size={25}
>
<WarningFilled />
</el-icon>
),
}}
></el-popover>
</div>
)
},
rules: [
{
required: true,
......@@ -299,6 +306,31 @@ const formConfig = computed<IFormConfig[]>(() => [
],
},
{
prop: 'name',
type: 'input',
label: '物流名称',
fixed: 'last',
attrs: {
placeholder: '请输入物流名称',
},
rules: [
{
required: true,
message: '请输入物流名称',
},
],
},
{
prop: 'warehouseId',
type: 'input',
label: '仓库名称',
fixed: 'last',
attrs: {
placeholder: '请输入仓库名称',
},
},
{
prop: 'siteUrl',
type: 'input',
label: '查询网址',
......@@ -376,7 +408,7 @@ const formConfig = computed<IFormConfig[]>(() => [
placeholder="请输入物流名称"
/>
</el-form-item>
<div style="display: flex;flex:20%">
<div style="display: flex;flex:17%">
{(formData?.platformList as platformObj[])?.length - 1 ===
index && (
<el-button
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment