FEV2 / fw-cms

Commit 7193dcdf5b026074abc7267e953466c5a2ea961c

Authored by 莫红玲
1 parent 3d3521e5

车辆加装配置编辑

Inline Side-by-side
Showing 5 changed files with 55 additions and 52 deletions
src/components/FeeweeUploadAttachment/index.tsx
  View file @7193dcd
... ... @@ -89,7 +89,7 @@ export default function FeeweeUploadAttachment({
89 89 }))
90 90 );
91 91 })
92   - .catch((error: any) => {})
  92 + .catch((error: any) => { })
93 93 .finally(() => {
94 94 // hide();
95 95 setLoading(false);
... ... @@ -217,9 +217,9 @@ export default function FeeweeUploadAttachment({
217 217 return (
218 218 <Spin spinning={loading}>
219 219 <Upload
220   - {...props}
221 220 accept={FeeweeFileAccept}
222 221 beforeUpload={beforeUpload}
  222 + {...props}
223 223 onPreview={onPreview}
224 224 fileList={fileList}
225 225 onChange={onUploadChange}
... ... @@ -229,8 +229,8 @@ export default function FeeweeUploadAttachment({
229 229 props.listType === "picture-card"
230 230 ? ListTypeOfPictureCard
231 231 : props.listType === "picture"
232   - ? ListTypeOfPicture
233   - : ListTypeOfText;
  232 + ? ListTypeOfPicture
  233 + : ListTypeOfText;
234 234 return (
235 235 <DOM
236 236 file={file}
... ... @@ -288,9 +288,8 @@ const ListTypeOfText = ({
288 288 }
289 289 >
290 290 <div
291   - className={`ant-upload-list-item ant-upload-list-item-done ${
292   - file?.status === "error" ? "ant-upload-list-item-error" : ""
293   - } ant-upload-list-item-list-type-text`}
  291 + className={`ant-upload-list-item ant-upload-list-item-done ${file?.status === "error" ? "ant-upload-list-item-error" : ""
  292 + } ant-upload-list-item-list-type-text`}
294 293 >
295 294 <div className="ant-upload-list-item-info">
296 295 {file?.status === "uploading" ? (
... ... @@ -300,9 +299,8 @@ const ListTypeOfText = ({
300 299 </div>
301 300 <span
302 301 className="ant-upload-list-item-name"
303   - title={`${file?.name}(${
304   - file?.size ? getFileSize(file?.size) : ""
305   - })`}
  302 + title={`${file?.name}(${file?.size ? getFileSize(file?.size) : ""
  303 + })`}
306 304 >
307 305 {file?.name}({file?.size ? getFileSize(file?.size) : ""})
308 306 </span>
... ... @@ -405,9 +403,8 @@ const ListTypeOfPictureCard = ({
405 403 }
406 404 >
407 405 <div
408   - className={`ant-upload-list-item ant-upload-list-item-done ${
409   - file?.status === "error" ? "ant-upload-list-item-error" : ""
410   - } ant-upload-list-item-list-type-picture-card`}
  406 + className={`ant-upload-list-item ant-upload-list-item-done ${file?.status === "error" ? "ant-upload-list-item-error" : ""
  407 + } ant-upload-list-item-list-type-picture-card`}
411 408 >
412 409 <div className="ant-upload-list-item-info">
413 410 {file?.status === "uploading" ? (
... ... @@ -434,9 +431,8 @@ const ListTypeOfPictureCard = ({
434 431 src={IMGURL.showImage(
435 432 file?.thumbUrl || file?.response?.data
436 433 )}
437   - alt={`${file?.name}(${
438   - file?.size ? getFileSize(file?.size) : ""
439   - })`}
  434 + alt={`${file?.name}(${file?.size ? getFileSize(file?.size) : ""
  435 + })`}
440 436 className="ant-upload-list-item-image"
441 437 />
442 438 ) : (
... ... @@ -448,9 +444,8 @@ const ListTypeOfPictureCard = ({
448 444 style={{
449 445 display: file?.type?.includes("image") ? "none" : undefined,
450 446 }}
451   - title={`${file?.name}(${
452   - file?.size ? getFileSize(file?.size) : ""
453   - })`}
  447 + title={`${file?.name}(${file?.size ? getFileSize(file?.size) : ""
  448 + })`}
454 449 >
455 450 {file?.name}({file?.size ? getFileSize(file?.size) : ""})
456 451 </span>
... ... @@ -517,11 +512,9 @@ const ListTypeOfPicture = ({
517 512 }
518 513 >
519 514 <div
520   - className={`ant-upload-list-item ant-upload-list-item-done ${
521   - file?.status === "error" ? "ant-upload-list-item-error" : ""
522   - } ${
523   - file?.status === "uploading" ? "ant-upload-list-item-uploading" : ""
524   - } ant-upload-list-item-list-type-picture`}
  515 + className={`ant-upload-list-item ant-upload-list-item-done ${file?.status === "error" ? "ant-upload-list-item-error" : ""
  516 + } ${file?.status === "uploading" ? "ant-upload-list-item-uploading" : ""
  517 + } ant-upload-list-item-list-type-picture`}
525 518 >
526 519 <div className="ant-upload-list-item-info">
527 520 {file?.status === "uploading" ? (
... ... @@ -531,9 +524,8 @@ const ListTypeOfPicture = ({
531 524 </div>
532 525 <span
533 526 className="ant-upload-list-item-name"
534   - title={`${file?.name}(${
535   - file?.size ? getFileSize(file?.size) : ""
536   - })`}
  527 + title={`${file?.name}(${file?.size ? getFileSize(file?.size) : ""
  528 + })`}
537 529 >
538 530 {file?.name}({file?.size ? getFileSize(file?.size) : ""})
539 531 </span>
... ... @@ -563,9 +555,8 @@ const ListTypeOfPicture = ({
563 555 {file?.type?.includes("image") ? (
564 556 <img
565 557 src={IMGURL.showImage(file?.thumbUrl || file?.response?.data)}
566   - alt={`${file?.name}(${
567   - file?.size ? getFileSize(file?.size) : ""
568   - })`}
  558 + alt={`${file?.name}(${file?.size ? getFileSize(file?.size) : ""
  559 + })`}
569 560 className="ant-upload-list-item-image"
570 561 />
571 562 ) : (
... ... @@ -576,9 +567,8 @@ const ListTypeOfPicture = ({
576 567 target="_blank"
577 568 rel="noopener noreferrer"
578 569 className="ant-upload-list-item-name"
579   - title={`${file?.name}(${
580   - file?.size ? getFileSize(file?.size) : ""
581   - })`}
  570 + title={`${file?.name}(${file?.size ? getFileSize(file?.size) : ""
  571 + })`}
582 572 href={
583 573 file?.status === "error"
584 574 ? undefined
... ...
src/pages/stock/VehicleAdditional/components/CarSelect.tsx
  View file @7193dcd
... ... @@ -10,6 +10,7 @@ import {
10 10 } from "antd";
11 11 import useInitial from "@/hooks/useInitail";
12 12 import {
  13 + CarOptionVo,
13 14 getOnsaleBrandApi,
14 15 getOnsaleSeriesApi,
15 16 getOnsaleSpecApi,
... ... @@ -21,6 +22,7 @@ interface Props {
21 22 value?: any[];
22 23 disabled?: boolean;
23 24 level?: number; //1品牌，2车系，3车型
  25 + brandList?: CarOptionVo[]
24 26 }
25 27  
26 28 interface Item {
... ... @@ -31,9 +33,8 @@ interface Item {
31 33 const { Column } = Table;
32 34 const { Option } = Select;
33 35  
34   -export default function index({ onChange, value, disabled }: Props) {
  36 +export default function index({ onChange, value, disabled, brandList }: Props) {
35 37 const [form] = Form.useForm();
36   - const { data: brandList } = useInitial(getOnsaleBrandApi, [], {});
37 38 // 控制Modal是否可见
38 39 const [visible, setVisible] = useState<boolean>(false);
39 40 // 控制是否可见车型下拉框
... ...
src/pages/stock/VehicleAdditional/components/EditModal.tsx
  View file @7193dcd
... ... @@ -3,11 +3,10 @@ import &#39;@ant-design/compatible/assets/index.css&#39;;
3 3 import { message, Modal, Select, Form, Input, InputNumber, Radio, Button } from 'antd';
4 4 import { saveApi } from '../api';
5 5 import { UploadOutlined, PlusSquareOutlined } from '@ant-design/icons';
6   -import PositionSelector from "@/components/PositionSelector";
7 6 import _ from 'lodash';
8 7 import FeeweeUploadAttachment from '@/components/FeeweeUploadAttachment';
9   -import useInitial from '@/hooks/useInitail';
10 8 import CarSelect from './CarSelect';
  9 +import { CarOptionVo } from '@/pages/stock/Components/api';
11 10  
12 11 const Item = Form.Item;
13 12 const Option = Select.Option;
... ... @@ -15,7 +14,7 @@ interface Props {
15 14 visible: boolean,
16 15 onCancel: Function,
17 16 item?: AdditionalCarSpace.Item,
18   - brands: CommonApi.OptionVO[],
  17 + brands: CarOptionVo[],
19 18 fetchList: () => any,
20 19  
21 20 }
... ... @@ -39,8 +38,8 @@ function EditModal(props: Props) {
39 38 });
40 39 form.setFieldsValue({
41 40 ...item,
42   - image: item.image.split(','),
43   - optionalAuth: a
  41 + optionalAuth: a,
  42 + image: item.image ? [item.image] : []
44 43 });
45 44 } else {
46 45 form.resetFields();
... ... @@ -84,18 +83,18 @@ function EditModal(props: Props) {
84 83 visible={visible}
85 84 maskClosable={false}
86 85 onCancel={() => onCancel()}
87   - onOk={item ? () => onCancel() : form.submit}
  86 + onOk={item && item.disabled ? () => onCancel() : form.submit}
88 87 confirmLoading={loading}
89 88 width="60%"
90 89 >
91 90 <Form onFinish={submit} form={form} labelWrap labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}>
92   - <Item label="加装项目" name="name" rules={[{ required: true, message: '请输入' }]}>
93   - <Input allowClear placeholder="加装项目" />
94   - </Item>
95   - {!item ? (
  91 + {!item || !item.disabled ? (
96 92 <>
97   - <Item name="image" label="图片" rules={[{ required: true, message: '请上传' }]}>
98   - <FeeweeUploadAttachment useCos maxCount={1} listType="picture">
  93 + <Item label="加装项目" name="name" rules={[{ required: true, message: '请输入' }]}>
  94 + <Input allowClear placeholder="加装项目" />
  95 + </Item>
  96 + <Item name="image" label="图片" valuePropName="fidList" rules={[{ required: true, message: '请上传' }]}>
  97 + <FeeweeUploadAttachment useCos maxCount={1} accept="image/png,image/jpg,image/jpeg" listType="picture">
99 98 <Button icon={<UploadOutlined />}>上传图片</Button>
100 99 </FeeweeUploadAttachment>
101 100 </Item>
... ... @@ -131,7 +130,7 @@ function EditModal(props: Props) {
131 130 </Item>
132 131 </>
133 132 ) : null}
134   -
  133 +
135 134 <Item
136 135 name="optionalAuth"
137 136 label="授权车辆范围"
... ... @@ -140,7 +139,7 @@ function EditModal(props: Props) {
140 139 rules={[{ required: true, message: "选择车辆" }]}
141 140 tooltip={<span style={{ color: '#ccc', fontSize: 12 }}>*点击图标<PlusSquareOutlined />展开授权详情</span>}
142 141 >
143   - <CarSelect disabled={!!item} />
  142 + <CarSelect disabled={!!item && item.disabled} brandList={brands} />
144 143 </Item>
145 144 </Form>
146 145 </Modal>
... ...
src/pages/stock/VehicleAdditional/index.tsx
  View file @7193dcd
... ... @@ -80,7 +80,7 @@ export default function StorageList() {
80 80 render={(image, record: AdditionalCarSpace.Item) => (
81 81 <>
82 82 <div>
83   - <img style={{ width: 40, height: 50 }} src={IMGURL.showImage(image)} alt="" />
  83 + <img style={{ width: 40, height: 40 }} src={IMGURL.showImage(image)} alt="" />
84 84 </div>
85 85 </>
86 86 )}
... ... @@ -93,10 +93,10 @@ export default function StorageList() {
93 93 <Column
94 94 title="适用范围"
95 95 dataIndex="optionalAuth"
96   - render={(t, _item) => <Button type="link" onClick={() => { setVisible(true); setItem(_item); }}>查看</Button>}
  96 + render={(t, _item) => <Button type="link" onClick={() => { setVisible(true); setItem({ ..._item, disabled: true }); }}>查看</Button>}
97 97 />
98 98 <Column
99   - title="操作"
  99 + title="状态"
100 100 dataIndex="status"
101 101 render={(text, _item: AdditionalCarSpace.Item) => (
102 102 <>
... ... @@ -106,6 +106,18 @@ export default function StorageList() {
106 106 </>
107 107 )}
108 108 />
  109 + <Column
  110 + title="操作"
  111 + dataIndex="status"
  112 + render={(text, _item: AdditionalCarSpace.Item) => (
  113 + <>
  114 + {/* <Popconfirm placement="top" title={`确认${_item.status == 1 ? "禁用" : "启用"}？`} onConfirm={(v) => handleChangeStatus(_item)}>
  115 + <Switch defaultChecked={!!text} checkedChildren="启用" unCheckedChildren="禁用" checked={!!text} />
  116 + </Popconfirm> */}
  117 + <Button type="link" onClick={() => { setVisible(true); setItem(_item); }}>编辑</Button>
  118 + </>
  119 + )}
  120 + />
109 121 </Table>
110 122 <SaveModal visible={visible} brands={brandList} item={item} fetchList={() => setParams({ ...innerParams, current: 1 }, true)} onCancel={() => setVisible(false)} />
111 123 </Card>
... ...
src/pages/stock/VehicleAdditional/interface.d.ts
  View file @7193dcd
... ... @@ -27,6 +27,7 @@ declare namespace AdditionalCarSpace {
27 27 status: number;
28 28 createTime: number;
29 29 optionalAuth: AuthCarItem[]
  30 + disabled?: boolean;
30 31 }
31 32  
32 33 interface AuthCarItem {
... ...