add shemshParnia to products

2026-02-03 18:24:45 +03:30
parent d4db3e4e95
commit e5a76193b7
4 changed files with 152 additions and 43 deletions
@@ -58,6 +58,7 @@ declare module '@vue/runtime-core' {
    BaseTable: typeof import('./src/core/components/BaseTable/index.ts')['default']
    BaseTableOld: typeof import('./src/core/components/BaseTableOld/index.ts')['default']
    BasicCard: typeof import('./src/components/BasicCard.vue')['default']
+    BasicImageUploader: typeof import('./src/components/BasicImageUploader.vue')['default']
    BasicInfoItem: typeof import('./src/components/BasicInfoItem.vue')['default']
    BasicInput: typeof import('./src/components/BasicInput.vue')['default']
    BasicMainCard: typeof import('./src/components/BasicMainCard.vue')['default']
@@ -0,0 +1,104 @@
+<template>
+  <div class="clearfix">
+    <a-upload
+      v-model:file-list="fileList"
+      :action="props.url"
+      list-type="picture-card"
+      :headers="props.headers"
+      :maxCount="props.maxCount"
+      @preview="handlePreview"
+      @change="handleChange"
+    >
+      <div v-if="fileList.length < maxCount">
+        <plus-outlined/>
+        <div style="margin-top: 8px">بارگذاری</div>
+      </div>
+    </a-upload>
+    <a-modal :visible="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
+      <img alt="example" style="width: 100%" :src="previewImage"/>
+    </a-modal>
+  </div>
+</template>
+<script setup lang="ts">
+import {PlusOutlined} from '@ant-design/icons-vue';
+import {defineComponent, ref} from 'vue';
+
+import {message, type UploadChangeParam, type UploadProps} from 'ant-design-vue';
+
+function getBase64(file: File) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = error => reject(error);
+  });
+}
+
+const previewVisible = ref(false);
+const previewImage = ref('');
+const previewTitle = ref('');
+
+interface Prop {
+  url: string
+  multiple?: boolean
+  fileList?: Array<FileList>
+  maxCount?: number
+  headers?: any
+}
+
+const props = defineProps<Prop>()
+
+//emits
+const emits = defineEmits(['update:fileList', 'ok', 'delete'])
+const fileList = computed({
+  get() {
+    return props.fileList || ([] as Array<FileList>)
+  },
+  set(value) {
+    emits('update:fileList', value)
+  }
+})
+
+const handleChange = (info: UploadChangeParam) => {
+  // console.log(info)
+  const status = info.file.status
+  if (status !== 'uploading') {
+    // console.log(info.file, info.fileList)
+    /*emits('ok', info.file.response.id)*/
+  }
+  if (status === 'done') {
+    // message.success(`${info.file.name} file uploaded successfully.`)
+    console.log(fileList)
+    emits('ok', info.file.response.id)
+  } else if (status === 'error') {
+    message.error(`خطا در بارگذاری فایل`)
+  } else if (status === 'removed') {
+    emits('delete', info.file.uid)
+  }
+}
+
+const handleCancel = () => {
+  previewVisible.value = false;
+  previewTitle.value = '';
+};
+const handlePreview = async (file: UploadProps['fileList'][number]) => {
+  if (!file.url && !file.preview) {
+    file.preview = (await getBase64(file.originFileObj)) as string;
+  }
+  previewImage.value = file.url || file.preview;
+  previewVisible.value = true;
+  previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
+}
+</script>
+<style>
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}
+</style>
@@ -108,7 +108,7 @@
            </div>
          </div>
        </BaseCard>
-        <BaseCard class="h-full md:col-span-7">
+        <BaseCard class="h-full w-full md:col-span-7">
          <ASpin :spinning="tarazLoading">
            <div class="grid md:grid-cols-3 gap-3 mt-2">
              <div>
@@ -199,12 +199,13 @@
            </div>
          </ASpin>
        </BaseCard>
+
        <BaseCard class="w-full md:w-none md:col-span-2">
          <div class="text-lg font-bold">تراز بدهی</div>
          <div ref="main" class="w-full aspect-square"></div>
        </BaseCard>

-        <BaseCard class="md:col-span-5">
+        <BaseCard class="w-full md:col-span-5">
          <div id="chart">
            <div class="font-bold text-lg mt-2 text-center md:text-right mb-2">مقایسه قیمت ها</div>
            <apexchart
@@ -257,9 +258,10 @@
            </div>
          </div>
        </BaseCard>
-        <div class="md:col-span-7 md:grid gap-4">
+
+        <div class="md:col-span-7 w-full grid gap-4">
          <BaseCard>
-            <div class=" ">
+            <div>
              <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-end">
                  <div class="text-2xl font-bold ml-2">{{ usePrice(123456789123, true, '') }}</div>
@@ -69,11 +69,11 @@
                    </template>
                  </AButton>
                </div>
-                <div v-if="methodOption === '2'" class=" md:flex justify-between items-center">
+                <div v-if="methodOption === '2'" class="md:flex justify-between items-center">
                  <div class="ml-4">قیمت :</div>
                  <div class="">
                    <BasicSelect
-                      class="w-11rem  method_style"
+                      class="w-11rem method_style"
                      allowClear
                      :items="pricesList"
                      valueName="name"
@@ -161,9 +161,6 @@
                  />
                  <!--                <a-time-picker v-model:value="form.auto_close_at"/>-->
                </a-form-item>
-                <a-form-item label="توضیحات" name="description" >
-                <BasicTextArea v-model:value="form.description" />
-                </a-form-item>
              </div>
            </a-form>
          </template>
@@ -182,6 +179,24 @@
                @delete="deleteFile"
              />
            </div>
+<!--            <div class="flex gap-2">
+              <BasicImageUploader
+                v-model:file-list="ProductIndexImage"
+                :url="`${baseURL}site/file`"
+                :max-count="1"
+                @ok="uploadedIndexFile"
+                @delete="deleteIndexFile"
+              />
+
+              <BasicImageUploader
+                v-model:file-list="ImageFileList"
+                :url="`${baseURL}site/file`"
+                :max-count="10"
+                @ok="uploadedFile"
+                @delete="deleteFile"
+              />
+            </div>-->
+
          </template>
        </BaseCollapse>
      </Collapse>
@@ -389,28 +404,29 @@ import Icon from "@core/components/BaseIcon/src/Icon.vue";
 import type { MethodePrices, Product } from "@/model/product";
 import IndexImageUploader from "@/components/ProductUploader/IndexImageUploader.vue";
 import ProductImageUploader from "@/components/ProductUploader/ProductImageUploader.vue";
+import {baseURL} from '@root/config'

 //tabs
 const activeKey = ref("اطلاعات جامع");

 //loading
-const loading = ref<boolean>(false);
+const loading = ref<boolean>(false)

 //define store
-const store = useStaticApiListsStore();
+const store = useStaticApiListsStore()

 //define tbl
-const table = ref(null);
-const orderTable = ref(null);
-const transactionTable = ref(null);
-const smsTable = ref(null);
-const referralTable = ref(null);
-const fundTable = ref(null);
-const refreshTable = () => table?.value?.fetch();
-const refreshOrderTable = () => orderTable?.value?.fetch();
-const refreshTransactionTable = () => transactionTable?.value?.fetch();
-const refreshSMSTable = () => smsTable?.value?.fetch();
-const refreshReferralTable = () => referralTable?.value?.fetch();
+const table = ref(null)
+const orderTable = ref(null)
+const transactionTable = ref(null)
+const smsTable = ref(null)
+const referralTable = ref(null)
+const fundTable = ref(null)
+const refreshTable = () => table?.value?.fetch()
+const refreshOrderTable = () => orderTable?.value?.fetch()
+const refreshTransactionTable = () => transactionTable?.value?.fetch()
+const refreshSMSTable = () => smsTable?.value?.fetch()
+const refreshReferralTable = () => referralTable?.value?.fetch()
 const refreshFundTable = () => fundTable?.value?.fetch();
 const methodOption = ref<string>("1");
 const weightOption = ref<string>("1");
@@ -438,12 +454,12 @@ const ProductIndexImage = ref<Array<FileList>>([]);

 function uploadedIndexFile(id: number) {
  // console.log(id)
-  form.value.file_id = id;
+  form.value.original_image_id = id;
 }

 function deleteIndexFile() {
-  form.value.file_id = null;
-  form.value.file_id = null;
+  form.value.original_image_id = null;
+  form.value.original_image = null;
  ProductIndexImage.value = [];
 }

@@ -610,20 +626,6 @@ async function edit(record: Customer) {

  form.value.auto_open_at = dayjs(customForm.auto_open_at, "HH:mm:ss");
  form.value.auto_close_at = dayjs(customForm.auto_close_at, "HH:mm:ss");
-  
-  // نمایش فایل موجود اگر وجود داشته باشد
-  const file = (record as any).file;
-  if (file && file.src) {
-    ProductIndexImage.value = [{
-      uid: `file-${file.id}`,
-      name: file.original_name || `index-image-${file.id}`,
-      url: file.src,
-      src: file.src,
-      status: 'done' as const
-    }] as any;
-  } else {
-    ProductIndexImage.value = [];
-  }
 }

 //add
@@ -691,8 +693,6 @@ const resetData = () => {
    percent_fee_sell: 0,
    cash_fee_sell: 0
  };
-  ProductIndexImage.value = [];
-  ImageFileList.value = [];
 };

 //delete
@@ -795,9 +795,11 @@ const categoryItems: Array<Item> = [
  },
  {
    value: "شمش ونوس"
+  },
+  {
+    value: "شمش پرنیا"
  }
-
-];
+]

 const data = ref<MethodePrices[]>([]);
 const fetchData = async () => {