1/*
2 * Copyright (c) 2023 Hunan OpenValley Digital Industry Development Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15 
16<template>
17  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="40%">
18    <BasicForm :labelWidth="100" :actionColOptions="{ span: 24 }" :labelCol="{ span: 8 }" @register="registerForm"
19      :disabled="isDisabled" />
20    <a-tabs defaultActiveKey="1" v-if="isUpdate">
21      <a-tab-pane tab="商品" key="1">
22        <div style="width:100%;display: flex;justify-content: right;margin-bottom: 10px;" v-if="!isDisabled">
23          <a-button type="primary" @click="handleAdd">新增</a-button>
24        </div>
25
26        <a-table ref="table" size="small" rowKey="id" class="j-table-force-nowrap" :columns="columns1" :dataSource="data1"
27          :pagination="ipagination1" :loading="loading1" @change="handleTableChange1">
28          <template #imgSlot="{ text, record }">
29            <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
30            <img v-else :src="getImgView(text)" :preview="getImgView(text)" alt="{{record.name}}" class="anty-img-wrap" />
31          </template>
32
33
34          <template #action="{ text, record }">
35            <a @click="handleDetail1(record)">详情</a>
36            <template v-if="!isDisabled">
37              <a-divider type="vertical" />
38              <a @click="handleEdit(record)">编辑</a>
39              <a-divider type="vertical" />
40              <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record)">
41                <a>删除</a>
42              </a-popconfirm>
43            </template>
44          </template>
45        </a-table>
46      </a-tab-pane>
47
48      <a-tab-pane tab="评价" key="2" forceRender>
49        <a-table ref="table" size="small" rowKey="id" class="j-table-force-nowrap" :columns="columns2" :dataSource="data2"
50          :pagination="ipagination2" :loading="loading2" @change="handleTableChange2">
51
52          <template #action="{ text, record }">
53            <a @click="handleDetail2(record)">详情</a>
54          </template>
55        </a-table>
56      </a-tab-pane>
57    </a-tabs>
58    <GoodsModal @register="registerGoodsModal" @success="list1(1)" :isDisabled="isDisabledGoods" />
59    <CommentModal @register="registerCommentModal" />
60  </BasicModal>
61</template>
62<script lang="ts" setup>
63import { ref, computed, unref } from 'vue';
64import { BasicModal, useModalInner } from '/@/components/Modal';
65import { BasicForm, useForm } from '/@/components/Form/index';
66import { formSchema, columnsGoods, columnsComment } from './business.data';
67import { saveOrUpdate, listComment } from './business.api';
68import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
69import { useModal } from '/@/components/Modal';
70import GoodsModal from '../goods/GoodsModal.vue';
71import CommentModal from './CommentModal.vue';
72import { listGoods, deleteGoods } from '../goods/goods.api';
73// 声明Emits
74const emit = defineEmits(['register', 'success']);
75const isUpdate = ref(true);
76const isDisabledGoods = ref(true);
77const [registerGoodsModal, { openModal: openGoodsModal }] = useModal();
78const [registerCommentModal, { openModal: openCommentModal }] = useModal();
79
80//自定义接受参数
81const props = defineProps({
82  //是否禁用页面
83  isDisabled: {
84    type: Boolean,
85    default: false,
86  },
87});
88const businessModel = ref({ id: null, businessId: null });
89
90const ipagination1 = ref<any>({
91  current: 1,
92  pageSize: 10,
93  pageSizeOptions: ['10', '20', '30'],
94  showTotal: (total, range) => {
95    return range[0] + '-' + range[1] + ' 共' + total + '条';
96  },
97  showQuickJumper: true,
98  showSizeChanger: true,
99  total: 0,
100});
101const ipagination2 = ref<any>({
102  current: 1,
103  pageSize: 10,
104  pageSizeOptions: ['10', '20', '30'],
105  showTotal: (total, range) => {
106    return range[0] + '-' + range[1] + ' 共' + total + '条';
107  },
108  showQuickJumper: true,
109  showSizeChanger: true,
110  total: 0,
111});
112const columns1 = ref(columnsGoods);
113const columns2 = ref(columnsComment);
114const data1 = ref<any>([]);
115const data2 = ref<any>([]);
116const loading1 = ref(false);
117const loading2 = ref(false);
118
119//表单配置
120const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
121  //labelWidth: 150,
122  schemas: formSchema,
123  showActionButtonGroup: false,
124});
125//表单赋值
126const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
127  //重置表单
128  await resetFields();
129  setModalProps({ confirmLoading: false, showOkBtn: !props.isDisabled });
130  isUpdate.value = !!data?.isUpdate;
131  businessModel.value = data.record;
132  if (data.createBy) {
133    await setFieldsValue({ createBy: data.createBy });
134  }
135  if (data.createTime) {
136    await setFieldsValue({ createTime: data.createTime });
137  }
138  //表单赋值
139  await setFieldsValue({
140    ...data.record,
141  });
142  if (unref(isUpdate)) {
143    list1(1);
144    list2(1);
145  }
146});
147//设置标题
148const title = computed(() => (props.isDisabled ? '详情' : !unref(isUpdate) ? '新增' : '编辑'));
149//表单提交事件
150async function handleSubmit() {
151  try {
152    let values = await validate();
153    setModalProps({ confirmLoading: true });
154    //提交表单
155    await saveOrUpdate(values, isUpdate.value);
156    //关闭弹窗
157    closeModal();
158    //刷新列表
159    emit('success', values);
160  } finally {
161    setModalProps({ confirmLoading: false });
162  }
163}
164
165
166/**
167 * 获取预览图片
168 */
169function getImgView(text) {
170  if (text && text.indexOf(',') > 0) {
171    text = text.substring(0, text.indexOf(','));
172  }
173  return getFileAccessHttpUrl(text);
174}
175
176function list1(flag: number) {
177  if (flag === 1) {
178    ipagination1.value.current = 1;
179  }
180  loading1.value = true;
181  const params = {
182    businessId: businessModel.value.id,
183    pageNo: ipagination1.value.current,
184    pageSize: ipagination1.value.pageSize
185  };
186  listGoods(params).then((data) => {
187    data1.value = data.records;
188    ipagination1.value.total = data.total;
189    loading1.value = false;
190  });
191}
192
193function list2(flag: number) {
194  if (flag === 1) {
195    ipagination2.value.current = 1;
196  }
197  loading2.value = true;
198  const params = {
199    businessId: businessModel.value.id,
200    pageNo: ipagination2.value.current,
201    pageSize: ipagination2.value.pageSize
202  };
203  listComment(params).then((data) => {
204    data2.value = data.records;
205    ipagination2.value.total = data.total;
206    loading2.value = false;
207  });
208}
209
210function handleAdd() {
211  isDisabledGoods.value = false;
212  openGoodsModal(true, {
213    record: { businessId: businessModel.value.id },
214    isUpdate: false,
215  });
216}
217
218function handleEdit(record) {;
219  isDisabledGoods.value = false;
220  openGoodsModal(true, {
221    record,
222    isUpdate: true,
223  });
224}
225
226function handleDetail1(record) {
227  isDisabledGoods.value = true;
228  openGoodsModal(true, {
229    record,
230    isUpdate: false,
231  });
232}
233
234function handleDetail2(record) {
235  openCommentModal(true, {
236    record,
237    isUpdate: false,
238  });
239}
240
241async function handleDelete(record) {
242  await deleteGoods({ id: record.id }, list1);
243}
244
245function handleTableChange1(pagination, filters, sorter) {
246  ipagination1.value = pagination;
247  list1(0);
248}
249
250function handleTableChange2(pagination, filters, sorter) {
251  ipagination2.value = pagination;
252  list2(0);
253}
254
255</script>
256