From cef9c8e24a68804ba34443e4d891702455413809 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=86=95?= Date: Thu, 12 Mar 2026 19:34:46 +0800 Subject: [PATCH] =?UTF-8?q?feat(web):=20=E4=BE=9B=E5=BA=94=E5=95=86?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=88=97=E8=A1=A8=E5=8F=8A=E6=96=B0=E5=A2=9E?= =?UTF-8?q?/=E6=9F=A5=E7=9C=8B/=E7=BC=96=E8=BE=91=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 供应商管理.jsx：筛选（编码/合作状态/类型/区域/城市/创建人）、列表、查看/编辑/删除 - 供应商管理-新增.jsx：两卡片（基本信息、开票信息），区域按城市自动匹配 - 供应商管理-查看.jsx：同布局，全部字段禁用 - 供应商管理-编辑.jsx：同新增，仅供应商编码不可修改 Made-with: Cursor --- web端/业务管理/供应商管理-新增.jsx | 254 ++++++++++++++++++++++ web端/业务管理/供应商管理-查看.jsx | 189 +++++++++++++++++ web端/业务管理/供应商管理-编辑.jsx | 277 ++++++++++++++++++++++++ web端/业务管理/供应商管理.jsx | 324 +++++++++++++++++++++++++++++ 4 files changed, 1044 insertions(+) create mode 100644 web端/业务管理/供应商管理-新增.jsx create mode 100644 web端/业务管理/供应商管理-查看.jsx create mode 100644 web端/业务管理/供应商管理-编辑.jsx create mode 100644 web端/业务管理/供应商管理.jsx diff --git a/web端/业务管理/供应商管理-新增.jsx b/web端/业务管理/供应商管理-新增.jsx new file mode 100644 index 0000000..396c792 --- /dev/null +++ b/web端/业务管理/供应商管理-新增.jsx @@ -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 }, '取消') + ) + ); +}; diff --git a/web端/业务管理/供应商管理-查看.jsx b/web端/业务管理/供应商管理-查看.jsx new file mode 100644 index 0000000..930ee80 --- /dev/null +++ b/web端/业务管理/供应商管理-查看.jsx @@ -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 }, '返回') + ) + ); +}; diff --git a/web端/业务管理/供应商管理-编辑.jsx b/web端/业务管理/供应商管理-编辑.jsx new file mode 100644 index 0000000..1d15a3c --- /dev/null +++ b/web端/业务管理/供应商管理-编辑.jsx @@ -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 }, '取消') + ) + ); +}; diff --git a/web端/业务管理/供应商管理.jsx b/web端/业务管理/供应商管理.jsx new file mode 100644 index 0000000..f658d68 --- /dev/null +++ b/web端/业务管理/供应商管理.jsx @@ -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)) + ); +};