Kaynağa Gözat

fix(bugs): 冲突

tangning 3 yıl önce
ebeveyn
işleme
f78099ec50
1 değiştirilmiş dosya ile 278 ekleme ve 0 silme
  1. 278 0
      src/views/product/productDrawer.vue

+ 278 - 0
src/views/product/productDrawer.vue

@@ -0,0 +1,278 @@
+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    :isDetail="true"
+    showFooter
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+      <template #goodsgg>
+        <goodsSpecs :key="editData.id" :editdata="editData" @update="setEditData" ref="goodsRef" />
+      </template>
+      <template #detailed>
+        <table class="detailed">
+          <thead>
+            <tr style="">
+              <th style="min-width: 60px">{{ editData.categoryName }}</th>
+              <th>库存</th>
+              <th>规格编码</th>
+              <th>市场价</th>
+              <th>销售价</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="item in editData.productList" :key="item.uuidLink">
+              <template v-if="editData.productList">
+                <td>{{ item.uuidLink }}</td>
+                <td
+                  ><InputNumber
+                    type="number"
+                    :maxlength="8"
+                    :max="100000000"
+                    :min="0"
+                    v-model:value="item.goodsNumber"
+                /></td>
+                <td
+                  ><Input
+                    type="text"
+                    :maxlength="8"
+                    :max="100000000"
+                    :min="0"
+                    v-model:value="item.goodsSn"
+                /></td>
+                <td
+                  ><InputNumber
+                    type="number"
+                    :maxlength="8"
+                    :max="100000000"
+                    :min="0"
+                    v-model:value="item.marketPrice"
+                /></td>
+                <td
+                  ><InputNumber
+                    type="number"
+                    :maxlength="8"
+                    :max="100000000"
+                    :min="0"
+                    v-model:value="item.retailPrice"
+                /></td>
+              </template>
+            </tr>
+          </tbody>
+        </table>
+      </template>
+      <!-- <template #formItem>
+        <BasicForm @register="itemRegister" @submit="handleSubmit">
+          <template #add="{ field }">
+            <a-button v-if="Number(field) === 0" @click="add">+</a-button>
+            <a-button v-if="field > 0" @click="del.bind(null, field)">-</a-button>
+          </template>
+        </BasicForm>
+      </template> -->
+    </BasicForm>
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { Input, InputNumber } from 'ant-design-vue';
+  import { formSchema } from './drawer.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import goodsSpecs from './goodsSpecs.vue';
+  import { InfoApi, UpdateSaleApi, SaveSaleApi } from '/@/api/product/list';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useUserStore } from '/@/store/modules/user';
+  // import { getMenuList } from '/@/api/system/system';
+  import { makeTree, TreeNode } from '/@/utils/treeUtils';
+  import { categoryApi } from '/@/api/product/category';
+
+  interface EditDataType {
+    categoryName: string;
+    productList: ProductListItem[];
+    goodsSpecificationList?: goodsSpecificationList[];
+    id: number;
+  }
+  interface goodsSpecificationList {
+    brandName: string;
+    goodsId?: number;
+    goodsName: string;
+    id?: number;
+    picUrl: string;
+    specificationId?: number;
+    specificationName: string;
+    uuid: string;
+    val?: string | number | [];
+    value: string;
+  }
+  interface ProductListItem {
+    uuidLink: string;
+    goodsNumber?: string;
+    goodsSn: string;
+    retailPrice: string;
+    marketPrice: string;
+  }
+
+  export default defineComponent({
+    name: 'ProductDrawer',
+    components: { BasicDrawer, BasicForm, goodsSpecs, Input, InputNumber },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const isUpdate = ref(true);
+      const goodsRef = ref();
+      const { createMessage } = useMessage();
+      const userStore = useUserStore();
+      const userinfo = computed(() => userStore.getUserInfo);
+      const { t } = useI18n();
+
+      let editData = ref<EditDataType>({
+        categoryName: '',
+        productList: [],
+        id: 0,
+      });
+
+      const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+        labelWidth: 120,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+        baseColProps: { lg: 18, md: 18, offset: 1 },
+      });
+      const [itemRegister, {}] = useForm({
+        // formItemValue :validate appendSchemaByField, removeSchemaByFiled,
+        schemas: [
+          {
+            field: 'goodsId',
+            label: '规格名',
+            component: 'ApiTreeSelect',
+            componentProps: {
+              api: async (params) => {
+                const res = (await categoryApi(params)) as any as TreeNode[];
+                const treeData = makeTree(res);
+                return treeData;
+              },
+              maxLength: 15,
+              fieldNames: {
+                label: 'name',
+                key: 'id',
+                value: 'id',
+              },
+            },
+          },
+          {
+            field: 'goodsSn',
+            component: 'Input',
+            label: '字段0',
+            colProps: {
+              span: 8,
+            },
+            required: true,
+          },
+          {
+            field: '0',
+            component: 'Input',
+            label: ' ',
+            colProps: {
+              span: 8,
+            },
+            slot: 'add',
+          },
+        ],
+        labelWidth: 100,
+        actionColOptions: { span: 24 },
+      });
+      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+        resetFields();
+        setDrawerProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
+        console.log('setFieldsValue', data.record);
+        if (unref(isUpdate)) {
+          let res = await InfoApi(data.record.id);
+          editData.value = res;
+          console.log('setFieldsValueres', res);
+          setFieldsValue({
+            ...res,
+            listPicUrl: [encodeURI(res.listPicUrl.split('?')[0])],
+            primaryPicUrl: [encodeURI(res.primaryPicUrl.split('?')[0])],
+            steamRoom: data.record?.steamRoom?.name,
+          });
+        }
+      });
+      function setEditData(value) {
+        editData.value = {
+          ...editData.value,
+          ...value,
+        };
+        console.log('setEditData', value);
+      }
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增商品' : '编辑商品'));
+
+      async function handleSubmit() {
+        const { companyId, id } = userinfo.value;
+        try {
+          const values = await validate();
+          console.log('values', values);
+          let apiData = {
+            ...editData.value,
+            ...values,
+          };
+          let requresApi = isUpdate.value ? UpdateSaleApi : SaveSaleApi;
+          if (!isUpdate.value) {
+            apiData.createUserDeptId = companyId;
+            apiData.createUserId = id;
+          }
+          let subData = await requresApi({
+            ...apiData,
+            primaryPicUrl: apiData.primaryPicUrl[0],
+            listPicUrl: apiData.listPicUrl[0],
+          });
+          console.log('setFieldsValue', subData);
+          setDrawerProps({ confirmLoading: true });
+          // TODO custom api
+          console.log(values);
+          createMessage.success(t('common.optSuccess'));
+          closeDrawer();
+          emit('success');
+        } finally {
+          setDrawerProps({ confirmLoading: false });
+        }
+      }
+
+      return {
+        goodsRef,
+        registerDrawer,
+        registerForm,
+        itemRegister,
+        getTitle,
+        editData,
+        handleSubmit,
+        setEditData,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less">
+  :deep(.detailed) {
+    .title {
+      display: flex;
+      span,
+      input,
+      div {
+        flex-grow: 1;
+      }
+      input {
+        display: inline-block;
+      }
+      .name {
+        flex-grow: 2;
+      }
+    }
+    tr {
+      th {
+        font-weight: 500;
+      }
+    }
+  }
+</style>