update

web-vue-admin/src/api/index.ts

@@ -147,6 +147,14 @@ export const onCreateGoodsPay = async(data:any)=>{
   });
 } 
 
+export const onUpdateGoods = async(data:any)=>{
+  return  await request({
+    url: `/goods/updateali`,
+    method:'post',
+    data
+  });
+} 
+
 // /goods/creategoodspay
 
 // /goods/select

web-vue-admin/src/views/goods-cabinet/index.vue

@@ -3,15 +3,27 @@
     <div class="good-search" v-if="!isShowGoods">
       <div>
         <a-radio-group v-model:value="status">
-        <a-radio-button value="0"  class="status"   @click="onSearch">全部</a-radio-button>
-        <a-radio-button value="1"  class="status"   @click="onSearch">正常</a-radio-button>
-        <a-radio-button value="2"  class="status"   @click="onSearch">已下架</a-radio-button>
+          <a-radio-button value="0" class="status" @click="onSearch"
+            >全部</a-radio-button
+          >
+          <a-radio-button value="1" class="status" @click="onSearch"
+            >正常</a-radio-button
+          >
+          <a-radio-button value="2" class="status" @click="onSearch"
+            >已下架</a-radio-button
+          >
         </a-radio-group>
-        <a-input-search v-model:value="value" placeholder="请输入商品名称" style="width: 200px; margin-left: 10px"
-          @search="onSearch" />
+        <a-input-search
+          v-model:value="value"
+          placeholder="请输入商品名称"
+          style="width: 200px; margin-left: 10px"
+          @search="onSearch"
+        />
       </div>
       <div class="good-cad">
-        <a-button type="primary" class="mr10" @click="onGoods(0)">新建商品</a-button>
+        <a-button type="primary" class="mr10" @click="onGoods(0)"
+          >新建商品</a-button
+        >
         <a-button type="primary" @click="onGoods(1)">新建商品包</a-button>
       </div>
     </div>
@@ -19,25 +31,63 @@
       <a-table :columns="columns" :data-source="list">
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'tags'">
-            <a-button type="primary">编辑</a-button>
-            <a-button type="primary" style="margin-left:20px;">统计</a-button>
-            <a-button type="primary" style="margin-left:20px;">下架</a-button>
-            <a-button type="primary" style="margin-left:20px;">删除</a-button>
+            <a-button type="primary" @click="onEdit(record)">编辑</a-button>
+            <a-button type="primary" style="margin-left: 20px">统计</a-button>
+            <a-button type="primary" style="margin-left: 20px">下架</a-button>
+            <a-popconfirm
+              title="Are you sure delete this task?"
+              ok-text="Yes"
+              cancel-text="No"
+              @confirm="onDel(record)"
+            >
+              <a-button type="primary" style="margin-left: 20px">删除</a-button>
+            </a-popconfirm>
           </template>
         </template>
       </a-table>
     </div>
     <div v-if="isShowGoods">
-      <div style="display: flex; align-items: center; justify-content: space-between" v-if="isShowGoods">
+      <div
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        "
+        v-if="isShowGoods"
+      >
         <a-button class="small left" @click="onBack">
           <template #icon>
             <LeftOutlined />
           </template>
         </a-button>
       </div>
-      <GoodsBags :props="{ propsData }" v-if="propsData.isCad == 0" @onBack="onBack"></GoodsBags>
-      <GoodsBagSubs :props="{ propsData }" v-else @onBack="onBack"> </GoodsBagSubs>
+      <GoodsBags
+        :props="{ propsData }"
+        v-if="propsData.isCad == 0"
+        @onBack="onBack"
+      ></GoodsBags>
+      <GoodsBagSubs :props="{ propsData }" v-else @onBack="onBack">
+      </GoodsBagSubs>
     </div>
+    <a-modal
+      v-model:visible="visible"
+      title="编辑"
+      :confirm-loading="confirmLoading"
+      @ok="handleOk"
+    >
+      <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
+        <a-form-item label="商品名称" v-bind="validateInfos.name">
+          <a-input v-model:value="modelRef.subject" />
+        </a-form-item>
+        <!-- <a-form-item label="mo" v-bind="validateInfos['sub.name']">
+          <a-input v-model:value="modelRef.sub.name" />
+        </a-form-item>
+        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
+          <a-button type="primary" @click.prevent="onSubmit">Create</a-button>
+          <a-button style="margin-left: 10px" @click="reset">Reset</a-button>
+        </a-form-item> -->
+      </a-form>
+    </a-modal>
   </div>
 </template>
 <script lang="ts" setup>
@@ -45,8 +95,11 @@ import { ref, reactive, defineExpose, onMounted } from "vue";
 import { LeftOutlined } from "@ant-design/icons-vue";
 import GoodsBags from "./components/goods/index.vue";
 import GoodsBagSubs from "./components/goodsubs/index.vue";
-import { onSelectGoods,onfindby } from '@/api/index'
+import { onSelectGoods, onfindby, onUpdateGoods } from "@/api/index";
 import { getUid } from "@/utils/userInfo";
+import { Form } from 'ant-design-vue';
+
+const useForm = Form.useForm;
 const columns = [
   {
     title: "商品编号",
@@ -55,8 +108,8 @@ const columns = [
   },
   {
     title: "商品名称",
-    dataIndex: "shortname",
-    key: "shortname",
+    dataIndex: "subject",
+    key: "subject",
   },
   {
     title: "商品类型",
@@ -92,47 +145,114 @@ const columns = [
 interface props {
   isCad: Number;
 }
-const list = ref<Array<Object>>([])
+const list = ref<Array<Object>>([]);
 const value = ref<string>("");
-const status = ref<string>("0")
+const status = ref<string>("0");
+let modelRef = ref({});
 const propsData = reactive<props>({
   isCad: 0,
 });
+
 const isShowGoods = ref<Boolean>(false);
-const onSearch =  async() => {
+const modalText = ref<string>("Content of the modal");
+const visible = ref<boolean>(false);
+const confirmLoading = ref<boolean>(false);
+
+const showModal = () => {
+  visible.value = true;
+};
+const handleOk = () => {
+  modalText.value = "The modal will be closed after two seconds";
+  confirmLoading.value = true;
+  setTimeout(() => {
+    visible.value = false;
+    confirmLoading.value = false;
+  }, 2000);
+};
+const onSearch = async () => {
   const params = {
-    status:status.value,
-    name:value.value,
-    uid:getUid()
-  }
-  const data =   await onfindby(params)
-  list.value = data.data
+    status: status.value,
+    name: value.value,
+    uid: getUid(),
+  };
+  const data = await onfindby(params);
+  list.value = data.data;
 };
 const onGoods = (e: Number) => {
   propsData.isCad = e;
   isShowGoods.value = true;
 };
-const onBack = async(e: Number) => {
+const onBack = async (e: Number) => {
   isShowGoods.value = !isShowGoods.value;
-   const uid = getUid()
-  const data = await onSelectGoods(uid)
-   list.value = data.data
+  const uid = getUid();
+  const data = await onSelectGoods(uid);
+  list.value = data.data;
+};
+const onEdit = (e: any) => {
+  console.log(e, "e");
+  visible.value = !visible.value;
+  modelRef.value = e
+  console.log();
+  
+};
+const { resetFields, validate, validateInfos } = useForm(
+  modelRef,
+  reactive({
+    subject: [
+      {
+        required: true,
+        message: "请输入商品名称",
+      },
+    ],
+  })
+);
+const onSubmit = () => {
+  validate()
+    .then((res) => {
+      console.log(res, toRaw(modelRef));
+    })
+    .catch((err) => {
+      console.log("error", err);
+    });
+};
+const reset = () => {
+  resetFields();
+};
+const onDel = async (e: any) => {
+  e.status = "1";
+  const data = await onUpdateGoods(e);
+  console.log(data, "data");
+  await init();
+};
+const init = async () => {
+  const uid = getUid();
+  const data = await onSelectGoods(uid);
+  list.value = data.data;
 };
 onMounted(async () => {
-  const uid = getUid()
-  const data = await onSelectGoods(uid)
-  list.value = data.data
-  return list
-})
+  await init();
+});
 defineExpose({
   status,
   value,
   columns,
   isShowGoods,
   propsData,
+  modalText,
+  visible,
+  confirmLoading,
+  validateInfos,
+  modelRef,
+  reset,
+  onSubmit,
+  showModal,
+  handleOk,
   onBack,
   onSearch,
   onGoods,
+  onEdit,
+  onDel,
+  init,
 });
 </script>
 <style lang="less" scoped>
@@ -142,17 +262,16 @@ defineExpose({
     display: flex;
     align-items: center;
     justify-content: space-between;
-    .status{
+    .status {
       margin-right: 20px;
       width: 80px;
       border-radius: 5px;
       border: 1px solid rgba(0, 0, 0, 0.65);
     }
-    .status::before{
+    .status::before {
       display: none;
-     
     }
-    .ant-radio-button-wrapper-checked{
+    .ant-radio-button-wrapper-checked {
       border: 1px solid @primary-color;
     }
     .ood-cad {
@@ -190,7 +309,7 @@ defineExpose({
 }
 </style>
 <style lang="less">
-.ant-layout-content{
+.ant-layout-content {
   overflow-y: scroll;
 }
 </style>