feat(web): 供应商管理列表及新增/查看/编辑页
- 供应商管理.jsx：筛选（编码/合作状态/类型/区域/城市/创建人）、列表、查看/编辑/删除 - 供应商管理-新增.jsx：两卡片（基本信息、开票信息），区域按城市自动匹配 - 供应商管理-查看.jsx：同布局，全部字段禁用 - 供应商管理-编辑.jsx：同新增，仅供应商编码不可修改 Made-with: Cursor
This commit is contained in:
王冕
254
web端/业务管理/供应商管理-新增.jsx
Normal file
254
web端/业务管理/供应商管理-新增.jsx
Normal file
@@ -0,0 +1,254 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 业务管理 - 供应商管理-新增（布局参照客户管理-新增，两卡片：供应商基本信息、供应商开票信息）
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
var antd = window.antd;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Card = antd.Card;
|
||||
var Input = antd.Input;
|
||||
var Select = antd.Select;
|
||||
var Button = antd.Button;
|
||||
var Cascader = antd.Cascader;
|
||||
var message = antd.message;
|
||||
|
||||
var supplierCode = useState('');
|
||||
var coopStatus = useState(undefined);
|
||||
var supplierName = useState('');
|
||||
var type = useState(undefined);
|
||||
var cityCascader = useState(undefined);
|
||||
var address = useState('');
|
||||
var region = useState('');
|
||||
var contact = useState('');
|
||||
var contactMobile = useState('');
|
||||
var contactPhone = useState('');
|
||||
var email = useState('');
|
||||
var creditCodeOrId = useState('');
|
||||
var remark = useState('');
|
||||
var taxId = useState('');
|
||||
var invoiceAddress = useState('');
|
||||
var invoicePhone = useState('');
|
||||
var account = useState('');
|
||||
var openingBank = useState('');
|
||||
var mailingAddress = useState('');
|
||||
var formErrors = useState({});
|
||||
|
||||
var coopStatusOptions = [
|
||||
{ value: '已合作', label: '已合作' },
|
||||
{ value: '终止合作', label: '终止合作' },
|
||||
{ value: '洽谈中', label: '洽谈中' },
|
||||
{ value: '合约过期', label: '合约过期' }
|
||||
];
|
||||
var typeOptions = [
|
||||
{ value: '备件供应商', label: '备件供应商' },
|
||||
{ value: '保险公司', label: '保险公司' },
|
||||
{ value: '加氢站', label: '加氢站' },
|
||||
{ value: '充电站', label: '充电站' },
|
||||
{ value: '维修站', label: '维修站' },
|
||||
{ value: '救援车队', label: '救援车队' },
|
||||
{ value: '整车厂', label: '整车厂' },
|
||||
{ value: '其他', label: '其他' }
|
||||
];
|
||||
var cityCascaderOptions = [
|
||||
{ value: '浙江省', label: '浙江省', children: [{ value: '杭州市', label: '杭州市' }, { value: '嘉兴市', label: '嘉兴市' }, { value: '宁波市', label: '宁波市' }] },
|
||||
{ value: '上海市', label: '上海市', children: [{ value: '上海市', label: '上海市' }] },
|
||||
{ value: '江苏省', label: '江苏省', children: [{ value: '南京市', label: '南京市' }, { value: '苏州市', label: '苏州市' }] },
|
||||
{ value: '广东省', label: '广东省', children: [{ value: '广州市', label: '广州市' }, { value: '深圳市', label: '深圳市' }] },
|
||||
{ value: '北京市', label: '北京市', children: [{ value: '北京市', label: '北京市' }] }
|
||||
];
|
||||
|
||||
// 根据省/直辖市名称匹配区域（城市级联第一级）
|
||||
function getRegionByProvince(area) {
|
||||
if (!area) return '';
|
||||
var a = String(area).trim();
|
||||
if (a === '北京市' || a === '天津市' || a === '河北省' || a === '山西省' || a === '内蒙古') return '华北';
|
||||
if (a === '上海市' || a === '江苏省' || a === '浙江省' || a === '安徽省' || a === '福建省' || a === '江西省' || a === '山东省' || a === '台湾省') return '华东';
|
||||
if (a === '广东省' || a === '广西省' || a === '海南省' || a === '澳门' || a === '香港') return '华南';
|
||||
if (a === '河南省' || a === '湖北省' || a === '湖南省') return '华中';
|
||||
if (a === '辽宁省' || a === '吉林省' || a === '黑龙江省') return '东北';
|
||||
if (a === '四川省' || a === '云南省' || a === '贵州省' || a === '重庆市' || a === '西藏') return '西南';
|
||||
if (a === '陕西省' || a === '甘肃省' || a === '青海省' || a === '宁夏' || a === '新疆') return '西北';
|
||||
return '';
|
||||
}
|
||||
|
||||
function onCityCascaderChange(value) {
|
||||
cityCascader[1](value);
|
||||
region[1](value && value[0] ? getRegionByProvince(value[0]) : '');
|
||||
}
|
||||
|
||||
function validate() {
|
||||
var err = {};
|
||||
if (!(coopStatus[0] != null && coopStatus[0] !== '')) err.coopStatus = '请选择合作状态';
|
||||
if (!(supplierName[0] && String(supplierName[0]).trim())) err.supplierName = '请输入供应商名称';
|
||||
if (!(type[0] != null && type[0] !== '')) err.type = '请选择供应商类型';
|
||||
if (!(cityCascader[0] && Array.isArray(cityCascader[0]) && cityCascader[0].length >= 2)) err.city = '请选择城市（省-市）';
|
||||
if (!(address[0] && String(address[0]).trim())) err.address = '请输入供应商地址';
|
||||
if (!(contact[0] && String(contact[0]).trim())) err.contact = '请输入联系人';
|
||||
if (!(contactMobile[0] && String(contactMobile[0]).trim())) err.contactMobile = '请输入联系人手机';
|
||||
if (!(creditCodeOrId[0] && String(creditCodeOrId[0]).trim())) err.creditCodeOrId = '请输入信用代码/身份证';
|
||||
formErrors[1](err);
|
||||
return Object.keys(err).length === 0;
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
if (!validate()) {
|
||||
message.warning('请完善必填项');
|
||||
return;
|
||||
}
|
||||
message.success('提交成功（原型）');
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
if (window.__supplierAddBack) window.__supplierAddBack();
|
||||
else message.info('取消');
|
||||
}
|
||||
|
||||
var layoutStyle = { padding: '16px 24px 48px', backgroundColor: '#f5f5f5', minHeight: '100vh' };
|
||||
var cardStyle = { marginBottom: 16 };
|
||||
var formRowStyle = { display: 'flex', flexWrap: 'wrap', marginBottom: 16 };
|
||||
var formColStyle = { flex: '0 0 33.33%', minWidth: 200, paddingRight: 16, marginBottom: 8, boxSizing: 'border-box' };
|
||||
var formColFullStyle = { flex: '0 0 100%', marginBottom: 8 };
|
||||
var labelStyle = { display: 'block', marginBottom: 6, color: 'rgba(0,0,0,0.85)' };
|
||||
var labelRequiredStyle = { color: '#ff4d4f', marginRight: 4 };
|
||||
var errMsgStyle = { color: '#ff4d4f', fontSize: 12, marginTop: 4 };
|
||||
var inputStyle = { width: '100%' };
|
||||
var footerStyle = { position: 'fixed', bottom: 0, left: 0, right: 0, padding: '12px 24px', backgroundColor: '#fff', borderTop: '1px solid #e8e8e8', display: 'flex', gap: 12, zIndex: 99 };
|
||||
|
||||
function FormItem(props) {
|
||||
var colStyle = props.fullWidth ? formColFullStyle : formColStyle;
|
||||
return React.createElement('div', { style: colStyle },
|
||||
React.createElement('label', { style: labelStyle },
|
||||
props.required ? React.createElement('span', { style: labelRequiredStyle }, '*') : null,
|
||||
props.label
|
||||
),
|
||||
props.children,
|
||||
props.error ? React.createElement('div', { style: errMsgStyle }, props.error) : null
|
||||
);
|
||||
}
|
||||
|
||||
var basicFields = React.createElement('div', null,
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '供应商编码' },
|
||||
React.createElement(Input, { placeholder: '请输入供应商编码', value: supplierCode[0], onChange: function (e) { supplierCode[1](e.target.value); }, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '合作状态', required: true, error: formErrors[0].coopStatus },
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择合作状态',
|
||||
style: inputStyle,
|
||||
value: coopStatus[0],
|
||||
onChange: function (v) { coopStatus[1](v); },
|
||||
options: coopStatusOptions,
|
||||
status: formErrors[0].coopStatus ? 'error' : undefined
|
||||
})
|
||||
),
|
||||
React.createElement(FormItem, { label: '供应商名称', required: true, error: formErrors[0].supplierName },
|
||||
React.createElement(Input, { placeholder: '请输入供应商名称', value: supplierName[0], onChange: function (e) { supplierName[1](e.target.value); }, style: inputStyle, status: formErrors[0].supplierName ? 'error' : undefined })
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '类型', required: true, error: formErrors[0].type },
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择供应商类型',
|
||||
style: inputStyle,
|
||||
value: type[0],
|
||||
onChange: function (v) { type[1](v); },
|
||||
options: typeOptions,
|
||||
status: formErrors[0].type ? 'error' : undefined
|
||||
})
|
||||
),
|
||||
React.createElement(FormItem, { label: '城市', required: true, error: formErrors[0].city },
|
||||
React.createElement(Cascader, {
|
||||
options: cityCascaderOptions,
|
||||
value: cityCascader[0],
|
||||
onChange: onCityCascaderChange,
|
||||
placeholder: '请选择供应商所在城市',
|
||||
allowClear: true,
|
||||
style: inputStyle
|
||||
})
|
||||
),
|
||||
React.createElement(FormItem, { label: '供应商地址', required: true, error: formErrors[0].address },
|
||||
React.createElement(Input, { placeholder: '请输入供应商地址', value: address[0], onChange: function (e) { address[1](e.target.value); }, style: inputStyle, status: formErrors[0].address ? 'error' : undefined })
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '区域' },
|
||||
React.createElement(Input, { placeholder: '根据城市自动匹配', value: region[0], readOnly: true, style: Object.assign({}, inputStyle, { backgroundColor: '#f5f5f5', cursor: 'default' }) })
|
||||
),
|
||||
React.createElement(FormItem, { label: '联系人', required: true, error: formErrors[0].contact },
|
||||
React.createElement(Input, { placeholder: '请输入联系人', value: contact[0], onChange: function (e) { contact[1](e.target.value); }, style: inputStyle, status: formErrors[0].contact ? 'error' : undefined })
|
||||
),
|
||||
React.createElement(FormItem, { label: '联系人手机', required: true, error: formErrors[0].contactMobile },
|
||||
React.createElement(Input, { placeholder: '请输入联系人手机', value: contactMobile[0], onChange: function (e) { contactMobile[1](e.target.value); }, style: inputStyle, status: formErrors[0].contactMobile ? 'error' : undefined })
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '联系人座机' },
|
||||
React.createElement(Input, { placeholder: '请输入联系人座机', value: contactPhone[0], onChange: function (e) { contactPhone[1](e.target.value); }, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '电子邮箱' },
|
||||
React.createElement(Input, { placeholder: '请输入邮箱地址', value: email[0], onChange: function (e) { email[1](e.target.value); }, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '信用代码/身份证', required: true, error: formErrors[0].creditCodeOrId },
|
||||
React.createElement(Input, { placeholder: '请输入信用代码编号/身份证号', value: creditCodeOrId[0], onChange: function (e) { creditCodeOrId[1](e.target.value); }, style: inputStyle, status: formErrors[0].creditCodeOrId ? 'error' : undefined })
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '备注', fullWidth: true },
|
||||
React.createElement(Input.TextArea, { placeholder: '请输入备注信息', value: remark[0], onChange: function (e) { remark[1](e.target.value); }, rows: 3, style: inputStyle })
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
var invoiceFields = React.createElement('div', null,
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '纳税人识别号' },
|
||||
React.createElement(Input, { placeholder: '请输入纳税人识别号', value: taxId[0], onChange: function (e) { taxId[1](e.target.value); }, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '地址' },
|
||||
React.createElement(Input, { placeholder: '请输入地址信息', value: invoiceAddress[0], onChange: function (e) { invoiceAddress[1](e.target.value); }, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '电话' },
|
||||
React.createElement(Input, { placeholder: '请输入电话', value: invoicePhone[0], onChange: function (e) { invoicePhone[1](e.target.value); }, style: inputStyle })
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '账户' },
|
||||
React.createElement(Input, { placeholder: '请输入账户信息', value: account[0], onChange: function (e) { account[1](e.target.value); }, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '开户行' },
|
||||
React.createElement(Input, { placeholder: '请输入开户行信息', value: openingBank[0], onChange: function (e) { openingBank[1](e.target.value); }, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '邮寄地址' },
|
||||
React.createElement(Input, { placeholder: '请输入邮寄地址', value: mailingAddress[0], onChange: function (e) { mailingAddress[1](e.target.value); }, style: inputStyle })
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
var cardTitleStyle = { display: 'flex', alignItems: 'center', gap: 8 };
|
||||
var cardTitleBarStyle = { width: 4, height: 16, backgroundColor: '#1890ff', borderRadius: 2 };
|
||||
function CardTitleWithBar(text) {
|
||||
return React.createElement('span', { style: cardTitleStyle },
|
||||
React.createElement('span', { style: cardTitleBarStyle }),
|
||||
text
|
||||
);
|
||||
}
|
||||
|
||||
return React.createElement('div', { style: layoutStyle },
|
||||
React.createElement('div', { style: { marginBottom: 16 } },
|
||||
React.createElement(Breadcrumb, {
|
||||
items: [
|
||||
{ title: '业务管理' },
|
||||
{ title: '供应商管理' },
|
||||
{ title: '新增供应商', className: 'breadcrumb-last' }
|
||||
]
|
||||
})
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('供应商基本信息'), style: cardStyle }, basicFields),
|
||||
React.createElement(Card, { title: CardTitleWithBar('供应商开票信息'), style: cardStyle }, invoiceFields),
|
||||
React.createElement('div', { style: { height: 60 } }),
|
||||
React.createElement('div', { style: footerStyle },
|
||||
React.createElement(Button, { type: 'primary', onClick: handleSubmit }, '提交'),
|
||||
React.createElement(Button, { onClick: handleCancel }, '取消')
|
||||
)
|
||||
);
|
||||
};
|
||||
189
web端/业务管理/供应商管理-查看.jsx
Normal file
189
web端/业务管理/供应商管理-查看.jsx
Normal file
@@ -0,0 +1,189 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 业务管理 - 供应商管理-查看（布局同供应商管理-新增，所有字段禁用）
|
||||
|
||||
const Component = function () {
|
||||
var antd = window.antd;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Card = antd.Card;
|
||||
var Input = antd.Input;
|
||||
var Select = antd.Select;
|
||||
var Button = antd.Button;
|
||||
var Cascader = antd.Cascader;
|
||||
|
||||
// 模拟查看数据（实际由路由/列表传入）
|
||||
var detail = {
|
||||
supplierCode: 'GYS-2025-001',
|
||||
coopStatus: '已合作',
|
||||
supplierName: '嘉兴某某加氢站',
|
||||
type: '加氢站',
|
||||
cityCascader: ['浙江省', '嘉兴市'],
|
||||
address: '浙江省嘉兴市南湖区科技大道1号',
|
||||
region: '华东',
|
||||
contact: '张三',
|
||||
contactMobile: '13800138001',
|
||||
contactPhone: '0571-88888888',
|
||||
email: 'zhangsan@example.com',
|
||||
creditCodeOrId: '91330400MA2XXXXX1',
|
||||
remark: '',
|
||||
taxId: '91330400MA2XXXXX1',
|
||||
invoiceAddress: '浙江省嘉兴市南湖区科技大道1号',
|
||||
invoicePhone: '0571-88888888',
|
||||
account: '6222021234567890123',
|
||||
openingBank: '中国工商银行嘉兴分行',
|
||||
mailingAddress: '浙江省嘉兴市南湖区科技大道1号'
|
||||
};
|
||||
|
||||
var inputStyle = { width: '100%' };
|
||||
var layoutStyle = { padding: '16px 24px 48px', backgroundColor: '#f5f5f5', minHeight: '100vh' };
|
||||
var cardStyle = { marginBottom: 16 };
|
||||
var formRowStyle = { display: 'flex', flexWrap: 'wrap', marginBottom: 16 };
|
||||
var formColStyle = { flex: '0 0 33.33%', minWidth: 200, paddingRight: 16, marginBottom: 8, boxSizing: 'border-box' };
|
||||
var formColFullStyle = { flex: '0 0 100%', marginBottom: 8 };
|
||||
var labelStyle = { display: 'block', marginBottom: 6, color: 'rgba(0,0,0,0.85)' };
|
||||
var labelRequiredStyle = { color: '#ff4d4f', marginRight: 4 };
|
||||
var footerStyle = { position: 'fixed', bottom: 0, left: 0, right: 0, padding: '12px 24px', backgroundColor: '#fff', borderTop: '1px solid #e8e8e8', display: 'flex', gap: 12, zIndex: 99 };
|
||||
|
||||
var cityCascaderOptions = [
|
||||
{ value: '浙江省', label: '浙江省', children: [{ value: '杭州市', label: '杭州市' }, { value: '嘉兴市', label: '嘉兴市' }, { value: '宁波市', label: '宁波市' }] },
|
||||
{ value: '上海市', label: '上海市', children: [{ value: '上海市', label: '上海市' }] },
|
||||
{ value: '江苏省', label: '江苏省', children: [{ value: '南京市', label: '南京市' }, { value: '苏州市', label: '苏州市' }] },
|
||||
{ value: '广东省', label: '广东省', children: [{ value: '广州市', label: '广州市' }, { value: '深圳市', label: '深圳市' }] },
|
||||
{ value: '北京市', label: '北京市', children: [{ value: '北京市', label: '北京市' }] }
|
||||
];
|
||||
var coopStatusOptions = [
|
||||
{ value: '已合作', label: '已合作' },
|
||||
{ value: '终止合作', label: '终止合作' },
|
||||
{ value: '洽谈中', label: '洽谈中' },
|
||||
{ value: '合约过期', label: '合约过期' }
|
||||
];
|
||||
var typeOptions = [
|
||||
{ value: '备件供应商', label: '备件供应商' },
|
||||
{ value: '保险公司', label: '保险公司' },
|
||||
{ value: '加氢站', label: '加氢站' },
|
||||
{ value: '充电站', label: '充电站' },
|
||||
{ value: '维修站', label: '维修站' },
|
||||
{ value: '救援车队', label: '救援车队' },
|
||||
{ value: '整车厂', label: '整车厂' },
|
||||
{ value: '其他', label: '其他' }
|
||||
];
|
||||
|
||||
function FormItem(props) {
|
||||
var colStyle = props.fullWidth ? formColFullStyle : formColStyle;
|
||||
return React.createElement('div', { style: colStyle },
|
||||
React.createElement('label', { style: labelStyle },
|
||||
props.required ? React.createElement('span', { style: labelRequiredStyle }, '*') : null,
|
||||
props.label
|
||||
),
|
||||
props.children
|
||||
);
|
||||
}
|
||||
|
||||
var basicFields = React.createElement('div', null,
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '供应商编码' },
|
||||
React.createElement(Input, { value: detail.supplierCode, style: inputStyle, disabled: true })
|
||||
),
|
||||
React.createElement(FormItem, { label: '合作状态', required: true },
|
||||
React.createElement(Select, { value: detail.coopStatus, style: inputStyle, disabled: true, options: coopStatusOptions })
|
||||
),
|
||||
React.createElement(FormItem, { label: '供应商名称', required: true },
|
||||
React.createElement(Input, { value: detail.supplierName, style: inputStyle, disabled: true })
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '类型', required: true },
|
||||
React.createElement(Select, { value: detail.type, style: inputStyle, disabled: true, options: typeOptions })
|
||||
),
|
||||
React.createElement(FormItem, { label: '城市', required: true },
|
||||
React.createElement(Cascader, { value: detail.cityCascader, style: inputStyle, disabled: true, options: cityCascaderOptions })
|
||||
),
|
||||
React.createElement(FormItem, { label: '供应商地址', required: true },
|
||||
React.createElement(Input, { value: detail.address, style: inputStyle, disabled: true })
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '区域' },
|
||||
React.createElement(Input, { value: detail.region, style: inputStyle, disabled: true })
|
||||
),
|
||||
React.createElement(FormItem, { label: '联系人', required: true },
|
||||
React.createElement(Input, { value: detail.contact, style: inputStyle, disabled: true })
|
||||
),
|
||||
React.createElement(FormItem, { label: '联系人手机', required: true },
|
||||
React.createElement(Input, { value: detail.contactMobile, style: inputStyle, disabled: true })
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '联系人座机' },
|
||||
React.createElement(Input, { value: detail.contactPhone || '-', style: inputStyle, disabled: true })
|
||||
),
|
||||
React.createElement(FormItem, { label: '电子邮箱' },
|
||||
React.createElement(Input, { value: detail.email, style: inputStyle, disabled: true })
|
||||
),
|
||||
React.createElement(FormItem, { label: '信用代码/身份证', required: true },
|
||||
React.createElement(Input, { value: detail.creditCodeOrId, style: inputStyle, disabled: true })
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '备注', fullWidth: true },
|
||||
React.createElement(Input.TextArea, { value: detail.remark || '', rows: 3, style: inputStyle, disabled: true })
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
var invoiceFields = React.createElement('div', null,
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '纳税人识别号' },
|
||||
React.createElement(Input, { value: detail.taxId, style: inputStyle, disabled: true })
|
||||
),
|
||||
React.createElement(FormItem, { label: '地址' },
|
||||
React.createElement(Input, { value: detail.invoiceAddress, style: inputStyle, disabled: true })
|
||||
),
|
||||
React.createElement(FormItem, { label: '电话' },
|
||||
React.createElement(Input, { value: detail.invoicePhone, style: inputStyle, disabled: true })
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '账户' },
|
||||
React.createElement(Input, { value: detail.account, style: inputStyle, disabled: true })
|
||||
),
|
||||
React.createElement(FormItem, { label: '开户行' },
|
||||
React.createElement(Input, { value: detail.openingBank, style: inputStyle, disabled: true })
|
||||
),
|
||||
React.createElement(FormItem, { label: '邮寄地址' },
|
||||
React.createElement(Input, { value: detail.mailingAddress, style: inputStyle, disabled: true })
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
var cardTitleStyle = { display: 'flex', alignItems: 'center', gap: 8 };
|
||||
var cardTitleBarStyle = { width: 4, height: 16, backgroundColor: '#1890ff', borderRadius: 2 };
|
||||
function CardTitleWithBar(text) {
|
||||
return React.createElement('span', { style: cardTitleStyle },
|
||||
React.createElement('span', { style: cardTitleBarStyle }),
|
||||
text
|
||||
);
|
||||
}
|
||||
|
||||
function handleBack() {
|
||||
if (window.__supplierViewBack) window.__supplierViewBack();
|
||||
else if (window.history && window.history.back) window.history.back();
|
||||
}
|
||||
|
||||
return React.createElement('div', { style: layoutStyle },
|
||||
React.createElement('div', { style: { marginBottom: 16 } },
|
||||
React.createElement(Breadcrumb, {
|
||||
items: [
|
||||
{ title: '业务管理' },
|
||||
{ title: '供应商管理' },
|
||||
{ title: '查看', className: 'breadcrumb-last' }
|
||||
]
|
||||
})
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('供应商基本信息'), style: cardStyle }, basicFields),
|
||||
React.createElement(Card, { title: CardTitleWithBar('供应商开票信息'), style: cardStyle }, invoiceFields),
|
||||
React.createElement('div', { style: { height: 60 } }),
|
||||
React.createElement('div', { style: footerStyle },
|
||||
React.createElement(Button, { type: 'primary', onClick: handleBack }, '返回')
|
||||
)
|
||||
);
|
||||
};
|
||||
277
web端/业务管理/供应商管理-编辑.jsx
Normal file
277
web端/业务管理/供应商管理-编辑.jsx
Normal file
@@ -0,0 +1,277 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 业务管理 - 供应商管理-编辑（与新增相同，仅供应商编码不可修改）
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
var antd = window.antd;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Card = antd.Card;
|
||||
var Input = antd.Input;
|
||||
var Select = antd.Select;
|
||||
var Button = antd.Button;
|
||||
var Cascader = antd.Cascader;
|
||||
var message = antd.message;
|
||||
|
||||
// 模拟编辑回显数据（实际由路由/列表传入）
|
||||
var initialDetail = {
|
||||
supplierCode: 'GYS-2025-001',
|
||||
coopStatus: '已合作',
|
||||
supplierName: '嘉兴某某加氢站',
|
||||
type: '加氢站',
|
||||
cityCascader: ['浙江省', '嘉兴市'],
|
||||
address: '浙江省嘉兴市南湖区科技大道1号',
|
||||
region: '华东',
|
||||
contact: '张三',
|
||||
contactMobile: '13800138001',
|
||||
contactPhone: '0571-88888888',
|
||||
email: 'zhangsan@example.com',
|
||||
creditCodeOrId: '91330400MA2XXXXX1',
|
||||
remark: '',
|
||||
taxId: '91330400MA2XXXXX1',
|
||||
invoiceAddress: '浙江省嘉兴市南湖区科技大道1号',
|
||||
invoicePhone: '0571-88888888',
|
||||
account: '6222021234567890123',
|
||||
openingBank: '中国工商银行嘉兴分行',
|
||||
mailingAddress: '浙江省嘉兴市南湖区科技大道1号'
|
||||
};
|
||||
|
||||
var supplierCode = useState(initialDetail.supplierCode);
|
||||
var coopStatus = useState(initialDetail.coopStatus);
|
||||
var supplierName = useState(initialDetail.supplierName);
|
||||
var type = useState(initialDetail.type);
|
||||
var cityCascader = useState(initialDetail.cityCascader);
|
||||
var address = useState(initialDetail.address);
|
||||
var region = useState(initialDetail.region);
|
||||
var contact = useState(initialDetail.contact);
|
||||
var contactMobile = useState(initialDetail.contactMobile);
|
||||
var contactPhone = useState(initialDetail.contactPhone);
|
||||
var email = useState(initialDetail.email);
|
||||
var creditCodeOrId = useState(initialDetail.creditCodeOrId);
|
||||
var remark = useState(initialDetail.remark);
|
||||
var taxId = useState(initialDetail.taxId);
|
||||
var invoiceAddress = useState(initialDetail.invoiceAddress);
|
||||
var invoicePhone = useState(initialDetail.invoicePhone);
|
||||
var account = useState(initialDetail.account);
|
||||
var openingBank = useState(initialDetail.openingBank);
|
||||
var mailingAddress = useState(initialDetail.mailingAddress);
|
||||
var formErrors = useState({});
|
||||
|
||||
var coopStatusOptions = [
|
||||
{ value: '已合作', label: '已合作' },
|
||||
{ value: '终止合作', label: '终止合作' },
|
||||
{ value: '洽谈中', label: '洽谈中' },
|
||||
{ value: '合约过期', label: '合约过期' }
|
||||
];
|
||||
var typeOptions = [
|
||||
{ value: '备件供应商', label: '备件供应商' },
|
||||
{ value: '保险公司', label: '保险公司' },
|
||||
{ value: '加氢站', label: '加氢站' },
|
||||
{ value: '充电站', label: '充电站' },
|
||||
{ value: '维修站', label: '维修站' },
|
||||
{ value: '救援车队', label: '救援车队' },
|
||||
{ value: '整车厂', label: '整车厂' },
|
||||
{ value: '其他', label: '其他' }
|
||||
];
|
||||
var cityCascaderOptions = [
|
||||
{ value: '浙江省', label: '浙江省', children: [{ value: '杭州市', label: '杭州市' }, { value: '嘉兴市', label: '嘉兴市' }, { value: '宁波市', label: '宁波市' }] },
|
||||
{ value: '上海市', label: '上海市', children: [{ value: '上海市', label: '上海市' }] },
|
||||
{ value: '江苏省', label: '江苏省', children: [{ value: '南京市', label: '南京市' }, { value: '苏州市', label: '苏州市' }] },
|
||||
{ value: '广东省', label: '广东省', children: [{ value: '广州市', label: '广州市' }, { value: '深圳市', label: '深圳市' }] },
|
||||
{ value: '北京市', label: '北京市', children: [{ value: '北京市', label: '北京市' }] }
|
||||
];
|
||||
|
||||
// 根据省/直辖市名称匹配区域（城市级联第一级）
|
||||
function getRegionByProvince(area) {
|
||||
if (!area) return '';
|
||||
var a = String(area).trim();
|
||||
if (a === '北京市' || a === '天津市' || a === '河北省' || a === '山西省' || a === '内蒙古') return '华北';
|
||||
if (a === '上海市' || a === '江苏省' || a === '浙江省' || a === '安徽省' || a === '福建省' || a === '江西省' || a === '山东省' || a === '台湾省') return '华东';
|
||||
if (a === '广东省' || a === '广西省' || a === '海南省' || a === '澳门' || a === '香港') return '华南';
|
||||
if (a === '河南省' || a === '湖北省' || a === '湖南省') return '华中';
|
||||
if (a === '辽宁省' || a === '吉林省' || a === '黑龙江省') return '东北';
|
||||
if (a === '四川省' || a === '云南省' || a === '贵州省' || a === '重庆市' || a === '西藏') return '西南';
|
||||
if (a === '陕西省' || a === '甘肃省' || a === '青海省' || a === '宁夏' || a === '新疆') return '西北';
|
||||
return '';
|
||||
}
|
||||
|
||||
function onCityCascaderChange(value) {
|
||||
cityCascader[1](value);
|
||||
region[1](value && value[0] ? getRegionByProvince(value[0]) : '');
|
||||
}
|
||||
|
||||
function validate() {
|
||||
var err = {};
|
||||
if (!(coopStatus[0] != null && coopStatus[0] !== '')) err.coopStatus = '请选择合作状态';
|
||||
if (!(supplierName[0] && String(supplierName[0]).trim())) err.supplierName = '请输入供应商名称';
|
||||
if (!(type[0] != null && type[0] !== '')) err.type = '请选择供应商类型';
|
||||
if (!(cityCascader[0] && Array.isArray(cityCascader[0]) && cityCascader[0].length >= 2)) err.city = '请选择城市（省-市）';
|
||||
if (!(address[0] && String(address[0]).trim())) err.address = '请输入供应商地址';
|
||||
if (!(contact[0] && String(contact[0]).trim())) err.contact = '请输入联系人';
|
||||
if (!(contactMobile[0] && String(contactMobile[0]).trim())) err.contactMobile = '请输入联系人手机';
|
||||
if (!(creditCodeOrId[0] && String(creditCodeOrId[0]).trim())) err.creditCodeOrId = '请输入信用代码/身份证';
|
||||
formErrors[1](err);
|
||||
return Object.keys(err).length === 0;
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
if (!validate()) {
|
||||
message.warning('请完善必填项');
|
||||
return;
|
||||
}
|
||||
message.success('保存成功（原型）');
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
if (window.__supplierEditBack) window.__supplierEditBack();
|
||||
else message.info('取消');
|
||||
}
|
||||
|
||||
var layoutStyle = { padding: '16px 24px 48px', backgroundColor: '#f5f5f5', minHeight: '100vh' };
|
||||
var cardStyle = { marginBottom: 16 };
|
||||
var formRowStyle = { display: 'flex', flexWrap: 'wrap', marginBottom: 16 };
|
||||
var formColStyle = { flex: '0 0 33.33%', minWidth: 200, paddingRight: 16, marginBottom: 8, boxSizing: 'border-box' };
|
||||
var formColFullStyle = { flex: '0 0 100%', marginBottom: 8 };
|
||||
var labelStyle = { display: 'block', marginBottom: 6, color: 'rgba(0,0,0,0.85)' };
|
||||
var labelRequiredStyle = { color: '#ff4d4f', marginRight: 4 };
|
||||
var errMsgStyle = { color: '#ff4d4f', fontSize: 12, marginTop: 4 };
|
||||
var inputStyle = { width: '100%' };
|
||||
var footerStyle = { position: 'fixed', bottom: 0, left: 0, right: 0, padding: '12px 24px', backgroundColor: '#fff', borderTop: '1px solid #e8e8e8', display: 'flex', gap: 12, zIndex: 99 };
|
||||
|
||||
function FormItem(props) {
|
||||
var colStyle = props.fullWidth ? formColFullStyle : formColStyle;
|
||||
return React.createElement('div', { style: colStyle },
|
||||
React.createElement('label', { style: labelStyle },
|
||||
props.required ? React.createElement('span', { style: labelRequiredStyle }, '*') : null,
|
||||
props.label
|
||||
),
|
||||
props.children,
|
||||
props.error ? React.createElement('div', { style: errMsgStyle }, props.error) : null
|
||||
);
|
||||
}
|
||||
|
||||
var basicFields = React.createElement('div', null,
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '供应商编码' },
|
||||
React.createElement(Input, { value: supplierCode[0], style: inputStyle, disabled: true })
|
||||
),
|
||||
React.createElement(FormItem, { label: '合作状态', required: true, error: formErrors[0].coopStatus },
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择合作状态',
|
||||
style: inputStyle,
|
||||
value: coopStatus[0],
|
||||
onChange: function (v) { coopStatus[1](v); },
|
||||
options: coopStatusOptions,
|
||||
status: formErrors[0].coopStatus ? 'error' : undefined
|
||||
})
|
||||
),
|
||||
React.createElement(FormItem, { label: '供应商名称', required: true, error: formErrors[0].supplierName },
|
||||
React.createElement(Input, { placeholder: '请输入供应商名称', value: supplierName[0], onChange: function (e) { supplierName[1](e.target.value); }, style: inputStyle, status: formErrors[0].supplierName ? 'error' : undefined })
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '类型', required: true, error: formErrors[0].type },
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择供应商类型',
|
||||
style: inputStyle,
|
||||
value: type[0],
|
||||
onChange: function (v) { type[1](v); },
|
||||
options: typeOptions,
|
||||
status: formErrors[0].type ? 'error' : undefined
|
||||
})
|
||||
),
|
||||
React.createElement(FormItem, { label: '城市', required: true, error: formErrors[0].city },
|
||||
React.createElement(Cascader, {
|
||||
options: cityCascaderOptions,
|
||||
value: cityCascader[0],
|
||||
onChange: onCityCascaderChange,
|
||||
placeholder: '请选择供应商所在城市',
|
||||
allowClear: true,
|
||||
style: inputStyle
|
||||
})
|
||||
),
|
||||
React.createElement(FormItem, { label: '供应商地址', required: true, error: formErrors[0].address },
|
||||
React.createElement(Input, { placeholder: '请输入供应商地址', value: address[0], onChange: function (e) { address[1](e.target.value); }, style: inputStyle, status: formErrors[0].address ? 'error' : undefined })
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '区域' },
|
||||
React.createElement(Input, { placeholder: '根据城市自动匹配', value: region[0], readOnly: true, style: Object.assign({}, inputStyle, { backgroundColor: '#f5f5f5', cursor: 'default' }) })
|
||||
),
|
||||
React.createElement(FormItem, { label: '联系人', required: true, error: formErrors[0].contact },
|
||||
React.createElement(Input, { placeholder: '请输入联系人', value: contact[0], onChange: function (e) { contact[1](e.target.value); }, style: inputStyle, status: formErrors[0].contact ? 'error' : undefined })
|
||||
),
|
||||
React.createElement(FormItem, { label: '联系人手机', required: true, error: formErrors[0].contactMobile },
|
||||
React.createElement(Input, { placeholder: '请输入联系人手机', value: contactMobile[0], onChange: function (e) { contactMobile[1](e.target.value); }, style: inputStyle, status: formErrors[0].contactMobile ? 'error' : undefined })
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '联系人座机' },
|
||||
React.createElement(Input, { placeholder: '请输入联系人座机', value: contactPhone[0], onChange: function (e) { contactPhone[1](e.target.value); }, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '电子邮箱' },
|
||||
React.createElement(Input, { placeholder: '请输入邮箱地址', value: email[0], onChange: function (e) { email[1](e.target.value); }, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '信用代码/身份证', required: true, error: formErrors[0].creditCodeOrId },
|
||||
React.createElement(Input, { placeholder: '请输入信用代码编号/身份证号', value: creditCodeOrId[0], onChange: function (e) { creditCodeOrId[1](e.target.value); }, style: inputStyle, status: formErrors[0].creditCodeOrId ? 'error' : undefined })
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '备注', fullWidth: true },
|
||||
React.createElement(Input.TextArea, { placeholder: '请输入备注信息', value: remark[0], onChange: function (e) { remark[1](e.target.value); }, rows: 3, style: inputStyle })
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
var invoiceFields = React.createElement('div', null,
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '纳税人识别号' },
|
||||
React.createElement(Input, { placeholder: '请输入纳税人识别号', value: taxId[0], onChange: function (e) { taxId[1](e.target.value); }, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '地址' },
|
||||
React.createElement(Input, { placeholder: '请输入地址信息', value: invoiceAddress[0], onChange: function (e) { invoiceAddress[1](e.target.value); }, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '电话' },
|
||||
React.createElement(Input, { placeholder: '请输入电话', value: invoicePhone[0], onChange: function (e) { invoicePhone[1](e.target.value); }, style: inputStyle })
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '账户' },
|
||||
React.createElement(Input, { placeholder: '请输入账户信息', value: account[0], onChange: function (e) { account[1](e.target.value); }, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '开户行' },
|
||||
React.createElement(Input, { placeholder: '请输入开户行信息', value: openingBank[0], onChange: function (e) { openingBank[1](e.target.value); }, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '邮寄地址' },
|
||||
React.createElement(Input, { placeholder: '请输入邮寄地址', value: mailingAddress[0], onChange: function (e) { mailingAddress[1](e.target.value); }, style: inputStyle })
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
var cardTitleStyle = { display: 'flex', alignItems: 'center', gap: 8 };
|
||||
var cardTitleBarStyle = { width: 4, height: 16, backgroundColor: '#1890ff', borderRadius: 2 };
|
||||
function CardTitleWithBar(text) {
|
||||
return React.createElement('span', { style: cardTitleStyle },
|
||||
React.createElement('span', { style: cardTitleBarStyle }),
|
||||
text
|
||||
);
|
||||
}
|
||||
|
||||
return React.createElement('div', { style: layoutStyle },
|
||||
React.createElement('div', { style: { marginBottom: 16 } },
|
||||
React.createElement(Breadcrumb, {
|
||||
items: [
|
||||
{ title: '业务管理' },
|
||||
{ title: '供应商管理' },
|
||||
{ title: '编辑', className: 'breadcrumb-last' }
|
||||
]
|
||||
})
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('供应商基本信息'), style: cardStyle }, basicFields),
|
||||
React.createElement(Card, { title: CardTitleWithBar('供应商开票信息'), style: cardStyle }, invoiceFields),
|
||||
React.createElement('div', { style: { height: 60 } }),
|
||||
React.createElement('div', { style: footerStyle },
|
||||
React.createElement(Button, { type: 'primary', onClick: handleSubmit }, '提交'),
|
||||
React.createElement(Button, { onClick: handleCancel }, '取消')
|
||||
)
|
||||
);
|
||||
};
|
||||
324
web端/业务管理/供应商管理.jsx
Normal file
324
web端/业务管理/供应商管理.jsx
Normal file
@@ -0,0 +1,324 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 业务管理 - 供应商管理（2026年3月12日版本）
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
var useMemo = React.useMemo;
|
||||
|
||||
var antd = window.antd;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Card = antd.Card;
|
||||
var Table = antd.Table;
|
||||
var Button = antd.Button;
|
||||
var Select = antd.Select;
|
||||
var Input = antd.Input;
|
||||
var Space = antd.Space;
|
||||
var Modal = antd.Modal;
|
||||
var Cascader = antd.Cascader;
|
||||
var message = antd.message;
|
||||
|
||||
var requirementModalVisible = useState(false);
|
||||
var filterExpanded = useState(false);
|
||||
var filterSupplierCode = useState(undefined);
|
||||
var filterCoopStatus = useState([]);
|
||||
var filterType = useState([]);
|
||||
var filterRegion = useState([]);
|
||||
var filterCity = useState(undefined);
|
||||
var filterCreator = useState(undefined);
|
||||
var supplierNameKeyword = useState('');
|
||||
var deleteModalOpen = useState(false);
|
||||
var deleteTargetRecord = useState(null);
|
||||
|
||||
var regionOptions = [
|
||||
{ value: '华北', label: '华北' },
|
||||
{ value: '华东', label: '华东' },
|
||||
{ value: '华南', label: '华南' },
|
||||
{ value: '华中', label: '华中' },
|
||||
{ value: '东北', label: '东北' },
|
||||
{ value: '西南', label: '西南' },
|
||||
{ value: '西北', label: '西北' }
|
||||
];
|
||||
var coopStatusOptions = [
|
||||
{ value: '已合作', label: '已合作' },
|
||||
{ value: '终止合作', label: '终止合作' },
|
||||
{ value: '洽谈中', label: '洽谈中' },
|
||||
{ value: '合约过期', label: '合约过期' }
|
||||
];
|
||||
var typeOptions = [
|
||||
{ value: '备件供应商', label: '备件供应商' },
|
||||
{ value: '保险公司', label: '保险公司' },
|
||||
{ value: '加氢站', label: '加氢站' },
|
||||
{ value: '充电站', label: '充电站' },
|
||||
{ value: '维修站', label: '维修站' },
|
||||
{ value: '救援车队', label: '救援车队' },
|
||||
{ value: '整车厂', label: '整车厂' },
|
||||
{ value: '其他', label: '其他' }
|
||||
];
|
||||
var cityCascaderOptions = [
|
||||
{ value: '浙江省', label: '浙江省', children: [{ value: '杭州市', label: '杭州市' }, { value: '嘉兴市', label: '嘉兴市' }, { value: '宁波市', label: '宁波市' }] },
|
||||
{ value: '上海市', label: '上海市', children: [{ value: '上海市', label: '上海市' }] },
|
||||
{ value: '江苏省', label: '江苏省', children: [{ value: '南京市', label: '南京市' }, { value: '苏州市', label: '苏州市' }] },
|
||||
{ value: '广东省', label: '广东省', children: [{ value: '广州市', label: '广州市' }, { value: '深圳市', label: '深圳市' }] },
|
||||
{ value: '北京市', label: '北京市', children: [{ value: '北京市', label: '北京市' }] }
|
||||
];
|
||||
|
||||
var listDataState = useState([
|
||||
{ id: 1, supplierCode: 'GYS-2025-001', coopStatus: '已合作', supplierName: '嘉兴某某加氢站', type: '加氢站', region: '华东', city: '浙江省-嘉兴市', creditCodeOrId: '91330400MA2XXXXX1', contact: '张三', contactMobile: '13800138001', contactPhone: '0571-88888888', address: '浙江省嘉兴市南湖区科技大道1号', email: 'zhangsan@example.com', remark: '', creator: '李四', createTime: '2025-01-10 09:30' },
|
||||
{ id: 2, supplierCode: 'GYS-2025-002', coopStatus: '洽谈中', supplierName: '上海某某保险公司', type: '保险公司', region: '华东', city: '上海市-上海市', creditCodeOrId: '91310000MA2YYYYY2', contact: '王五', contactMobile: '13900139002', contactPhone: '-', address: '上海市浦东新区张江镇', email: 'wangwu@example.com', remark: '意向供应商', creator: '李专员', createTime: '2025-02-15 14:20' },
|
||||
{ id: 3, supplierCode: 'GYS-2025-003', coopStatus: '已合作', supplierName: '杭州某某维修站', type: '维修站', region: '华东', city: '浙江省-杭州市', creditCodeOrId: '91330100MA2ZZZZZ3', contact: '赵六', contactMobile: '13700137003', contactPhone: '0571-99999999', address: '浙江省杭州市余杭区未来科技城', email: 'zhaoliu@example.com', remark: '', creator: '张经理', createTime: '2025-01-20 11:00' },
|
||||
{ id: 4, supplierCode: 'GYS-2024-012', coopStatus: '终止合作', supplierName: '某某备件供应商', type: '备件供应商', region: '华南', city: '广东省-广州市', creditCodeOrId: '91440100MA2AAAAA4', contact: '孙七', contactMobile: '13600136004', contactPhone: '-', address: '广东省广州市天河区', email: 'sunqi@example.com', remark: '已终止', creator: '李四', createTime: '2024-06-01 10:00' },
|
||||
{ id: 5, supplierCode: 'GYS-2025-004', coopStatus: '合约过期', supplierName: '南京某某整车厂', type: '整车厂', region: '华东', city: '江苏省-南京市', creditCodeOrId: '91320100MA2BBBBB5', contact: '周八', contactMobile: '13500135005', contactPhone: '025-66666666', address: '江苏省南京市江宁区', email: 'zhouba@example.com', remark: '待续约', creator: '王专员', createTime: '2025-03-01 08:45' }
|
||||
]);
|
||||
var listData = listDataState[0];
|
||||
var setListData = listDataState[1];
|
||||
|
||||
var supplierCodeOptions = useMemo(function () {
|
||||
var arr = [];
|
||||
listData.forEach(function (r) {
|
||||
if (r.supplierCode && arr.every(function (o) { return o.value !== r.supplierCode; })) arr.push({ value: r.supplierCode, label: r.supplierCode });
|
||||
});
|
||||
return arr;
|
||||
}, [listData]);
|
||||
var creatorOptions = useMemo(function () {
|
||||
var arr = [];
|
||||
listData.forEach(function (r) {
|
||||
if (r.creator && arr.every(function (o) { return o.value !== r.creator; })) arr.push({ value: r.creator, label: r.creator });
|
||||
});
|
||||
return arr;
|
||||
}, [listData]);
|
||||
|
||||
var filteredList = useMemo(function () {
|
||||
var list = listData;
|
||||
var code = filterSupplierCode[0];
|
||||
var statuses = filterCoopStatus[0] || [];
|
||||
var types = filterType[0] || [];
|
||||
var regions = filterRegion[0] || [];
|
||||
var cityVal = filterCity[0];
|
||||
var creator = filterCreator[0];
|
||||
var nameKw = (supplierNameKeyword[0] || '').trim().toLowerCase();
|
||||
if (code) list = list.filter(function (r) { return r.supplierCode === code; });
|
||||
if (statuses.length) list = list.filter(function (r) { return statuses.indexOf(r.coopStatus) !== -1; });
|
||||
if (types.length) list = list.filter(function (r) { return types.indexOf(r.type) !== -1; });
|
||||
if (regions.length) list = list.filter(function (r) { return regions.indexOf(r.region) !== -1; });
|
||||
if (cityVal && Array.isArray(cityVal) && cityVal.length >= 2) list = list.filter(function (r) { return r.city === cityVal[0] + '-' + cityVal[1]; });
|
||||
if (creator) list = list.filter(function (r) { return r.creator === creator; });
|
||||
if (nameKw) list = list.filter(function (r) { return (r.supplierName || '').toLowerCase().indexOf(nameKw) !== -1; });
|
||||
return list;
|
||||
}, [listData, filterSupplierCode[0], filterCoopStatus[0], filterType[0], filterRegion[0], filterCity[0], filterCreator[0], supplierNameKeyword[0]]);
|
||||
|
||||
function handleReset() {
|
||||
filterSupplierCode[1](undefined);
|
||||
filterCoopStatus[1]([]);
|
||||
filterType[1]([]);
|
||||
filterRegion[1]([]);
|
||||
filterCity[1](undefined);
|
||||
filterCreator[1](undefined);
|
||||
}
|
||||
|
||||
function goView(record) {
|
||||
if (window.__supplierView) window.__supplierView(record);
|
||||
else message.info('跳转供应商管理-查看（原型）');
|
||||
}
|
||||
function goEdit(record) {
|
||||
if (window.__supplierEdit) window.__supplierEdit(record);
|
||||
else message.info('跳转供应商管理-编辑（原型）');
|
||||
}
|
||||
function openDeleteConfirm(record) {
|
||||
deleteTargetRecord[1](record);
|
||||
deleteModalOpen[1](true);
|
||||
}
|
||||
function confirmDelete() {
|
||||
var record = deleteTargetRecord[0];
|
||||
if (record) {
|
||||
setListData(function (prev) { return prev.filter(function (r) { return r.id !== record.id; }); });
|
||||
message.success('已删除');
|
||||
}
|
||||
deleteModalOpen[1](false);
|
||||
deleteTargetRecord[1](null);
|
||||
}
|
||||
|
||||
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
|
||||
var cardStyle = { marginBottom: 16 };
|
||||
var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
|
||||
var filterItemStyle = { marginBottom: 12 };
|
||||
var filterControlStyle = { width: '100%' };
|
||||
|
||||
var columns = [
|
||||
{ title: '供应商编码', dataIndex: 'supplierCode', key: 'supplierCode', width: 120, ellipsis: true, fixed: 'left', render: function (v) { return v || '—'; } },
|
||||
{ title: '合作状态', dataIndex: 'coopStatus', key: 'coopStatus', width: 100, render: function (v) { return v || '—'; } },
|
||||
{ title: '供应商名称', dataIndex: 'supplierName', key: 'supplierName', width: 180, ellipsis: true, render: function (v) { return v || '—'; } },
|
||||
{ title: '类型', dataIndex: 'type', key: 'type', width: 110, render: function (v) { return v || '—'; } },
|
||||
{ title: '区域', dataIndex: 'region', key: 'region', width: 80, render: function (v) { return v || '—'; } },
|
||||
{ title: '城市', dataIndex: 'city', key: 'city', width: 140, ellipsis: true, render: function (v) { return v || '—'; } },
|
||||
{ title: '信用代码/身份证', dataIndex: 'creditCodeOrId', key: 'creditCodeOrId', width: 180, ellipsis: true, render: function (v) { return v || '—'; } },
|
||||
{ title: '联系人', dataIndex: 'contact', key: 'contact', width: 100, render: function (v) { return v || '—'; } },
|
||||
{ title: '联系人手机', dataIndex: 'contactMobile', key: 'contactMobile', width: 120, render: function (v) { return v || '—'; } },
|
||||
{ title: '联系人座机', dataIndex: 'contactPhone', key: 'contactPhone', width: 120, render: function (v) { return v === '-' || !v ? '—' : v; } },
|
||||
{ title: '供应商地址', dataIndex: 'address', key: 'address', width: 200, ellipsis: true, render: function (v) { return v || '—'; } },
|
||||
{ title: '电子邮箱', dataIndex: 'email', key: 'email', width: 180, ellipsis: true, render: function (v) { return v || '—'; } },
|
||||
{ title: '备注', dataIndex: 'remark', key: 'remark', width: 120, ellipsis: true, render: function (v) { return v || '—'; } },
|
||||
{ title: '创建人', dataIndex: 'creator', key: 'creator', width: 100, render: function (v) { return v || '—'; } },
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 160, render: function (v) { return v || '—'; } },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
render: function (_, record) {
|
||||
return React.createElement(Space, { size: 'small' },
|
||||
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { goView(record); } }, '查看'),
|
||||
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { goEdit(record); } }, '编辑'),
|
||||
React.createElement(Button, { type: 'link', size: 'small', danger: true, onClick: function () { openDeleteConfirm(record); } }, '删除')
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
var filterItems = [
|
||||
React.createElement('div', { key: 'code', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '供应商编码'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择或输入供应商编码',
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
style: filterControlStyle,
|
||||
value: filterSupplierCode[0],
|
||||
onChange: function (v) { filterSupplierCode[1](v); },
|
||||
options: supplierCodeOptions,
|
||||
filterOption: function (input, opt) { return (opt.label || '').toString().toLowerCase().indexOf((input || '').toLowerCase()) !== -1; }
|
||||
})
|
||||
),
|
||||
React.createElement('div', { key: 'status', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '合作状态'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择合作状态',
|
||||
allowClear: true,
|
||||
mode: 'multiple',
|
||||
style: filterControlStyle,
|
||||
value: filterCoopStatus[0],
|
||||
onChange: function (v) { filterCoopStatus[1](v || []); },
|
||||
options: coopStatusOptions
|
||||
})
|
||||
),
|
||||
React.createElement('div', { key: 'type', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '类型'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择类型',
|
||||
allowClear: true,
|
||||
mode: 'multiple',
|
||||
style: filterControlStyle,
|
||||
value: filterType[0],
|
||||
onChange: function (v) { filterType[1](v || []); },
|
||||
options: typeOptions
|
||||
})
|
||||
),
|
||||
React.createElement('div', { key: 'region', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '区域'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择区域',
|
||||
allowClear: true,
|
||||
mode: 'multiple',
|
||||
style: filterControlStyle,
|
||||
value: filterRegion[0],
|
||||
onChange: function (v) { filterRegion[1](v || []); },
|
||||
options: regionOptions
|
||||
})
|
||||
),
|
||||
React.createElement('div', { key: 'city', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '城市'),
|
||||
React.createElement(Cascader, {
|
||||
options: cityCascaderOptions,
|
||||
value: filterCity[0],
|
||||
onChange: function (v) { filterCity[1](v); },
|
||||
placeholder: '请选择省-市',
|
||||
allowClear: true,
|
||||
style: filterControlStyle
|
||||
})
|
||||
),
|
||||
React.createElement('div', { key: 'creator', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '创建人'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择创建人',
|
||||
allowClear: true,
|
||||
style: filterControlStyle,
|
||||
value: filterCreator[0],
|
||||
onChange: function (v) { filterCreator[1](v); },
|
||||
options: creatorOptions
|
||||
})
|
||||
)
|
||||
];
|
||||
var filterCount = filterExpanded[0] ? 6 : 3;
|
||||
var filterNodes = filterItems.slice(0, filterCount);
|
||||
|
||||
var requirementContent = '供应商管理（2026年3月12日版本）\n一个「数字化资产ONEOS运管平台」中的「供应商管理」模块\n#面包屑：业务管理-供应商管理；\n\n页面分为2个卡片；\n1.筛选：默认显示首行，可通过展开、收起功能进行展开/收起的切换，右侧为重置、查询按钮；\n#支持供应商编码、合作状态、类型、区域、城市、创建人等筛选方式；\n1.1.供应商编码：选择器，支持输入框内输入内容模糊搜索，下拉显示对应选项；\n1.2.合作状态：选择器，支持多选，选项为已合作、终止合作、洽谈中、合约过期；\n1.3.类型：选择器，支持多选，选项为：备件供应商、保险公司、加氢站、充电站、维修站、救援车队、整车厂、其他；\n1.4.区域：选择器，支持多选，选项为：华北、华东、华南、华中、东北、西南、西北；\n1.4.城市：地区级联选择器，支持2级选择，格式为省-市；\n1.5.创建人：选择器，选项为所有创建用户姓名；\n\n2.供应商列表：\n#左上方为供应商名称输入框（输入供应商名称直接联动），右上角为新增、导出、导入；\n2.1.供应商编码：显示供应商编码；\n2.2.合作状态：显示合作状态，选项为已合作、终止合作、洽谈中、合约过期；\n2.3.供应商名称：显示供应商名称；\n2.4.类型：备件供应商、保险公司、加氢站、充电站、维修站、救援车队、整车厂、其他；\n2.4.区域：显示供应商区域，由选择城市后自动匹配；\n2.5.城市：显示供应商城市，格式为：省-市；\n2.6.信用代码/身份证：显示供应商信用代码或身份证，取决于新增时输入的是什么；\n2.7.联系人：显示供应商联系人；\n2.8.联系人手机：显示供应商联系人手机；\n2.9.联系人座机：显示供应商联系人座机，无则显示为-；\n2.10.供应商地址：显示供应商地址信息；\n2.11.电子邮箱：显示供应商电子邮箱；\n2.12.备注：显示供应商备注信息；\n2.13.创建人：显示供应商创建人用户姓名；\n2.14.创建时间：显示供应商创建时间；\n2.15.操作：查看、编辑、删除；\n 2.16.1.查看：跳转供应商管理-查看页；\n 2.16.2.编辑：跳转供应商管理-编辑页；\n 2.16.3.删除：二次确认，点击确认后删除，已删除供应商无法在各类合同或账单选择时选择，但历史数据中该供应商信息依然显示；';
|
||||
|
||||
return React.createElement('div', { style: layoutStyle },
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 } },
|
||||
React.createElement(Breadcrumb, {
|
||||
items: [
|
||||
{ title: '业务管理' },
|
||||
{ title: '供应商管理' }
|
||||
]
|
||||
}),
|
||||
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { requirementModalVisible[1](true); } }, '查看需求说明')
|
||||
),
|
||||
React.createElement(Card, { title: '筛选', style: cardStyle },
|
||||
React.createElement('div', {
|
||||
style: {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 1fr 1fr',
|
||||
gap: '16px 24px',
|
||||
alignItems: 'start',
|
||||
flex: 1,
|
||||
minWidth: 0
|
||||
}
|
||||
}, filterNodes),
|
||||
React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 16 } },
|
||||
React.createElement(Button, { onClick: handleReset }, '重置'),
|
||||
React.createElement(Button, { type: 'primary' }, '查询'),
|
||||
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { filterExpanded[1](!filterExpanded[0]); } }, filterExpanded[0] ? '收起' : '展开')
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: '供应商列表', style: cardStyle },
|
||||
React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 } },
|
||||
React.createElement(Input.Search, {
|
||||
placeholder: '请输入供应商名称',
|
||||
allowClear: true,
|
||||
value: supplierNameKeyword[0],
|
||||
onChange: function (e) { supplierNameKeyword[1](e.target.value); },
|
||||
style: { width: 280 }
|
||||
}),
|
||||
React.createElement(Space, null,
|
||||
React.createElement(Button, { type: 'primary' }, '新增'),
|
||||
React.createElement(Button, null, '导出'),
|
||||
React.createElement(Button, null, '导入')
|
||||
)
|
||||
),
|
||||
React.createElement(Table, {
|
||||
rowKey: 'id',
|
||||
columns: columns,
|
||||
dataSource: filteredList,
|
||||
pagination: { pageSize: 10, showSizeChanger: true, showTotal: function (t) { return '共 ' + t + ' 条'; } },
|
||||
size: 'middle',
|
||||
bordered: true,
|
||||
scroll: { x: 2400 }
|
||||
})
|
||||
),
|
||||
React.createElement(Modal, {
|
||||
title: '确认删除',
|
||||
open: deleteModalOpen[0],
|
||||
onCancel: function () { deleteModalOpen[1](false); deleteTargetRecord[1](null); },
|
||||
onOk: confirmDelete,
|
||||
okText: '确认',
|
||||
cancelText: '取消'
|
||||
}, '确定要删除该供应商吗？删除后该供应商将无法在各类合同或账单中选择，历史数据中仍会保留该供应商信息。'),
|
||||
React.createElement(Modal, {
|
||||
title: '需求说明',
|
||||
open: requirementModalVisible[0],
|
||||
onCancel: function () { requirementModalVisible[1](false); },
|
||||
width: 640,
|
||||
footer: React.createElement(Button, { onClick: function () { requirementModalVisible[1](false); } }, '关闭'),
|
||||
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
|
||||
}, React.createElement('div', { style: { padding: '8px 0', whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6 } }, requirementContent))
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user