修改标签

config/index.js

@@ -13,7 +13,7 @@ module.exports = {
     proxyTable: {
       '/api': {
         // target: 'http://192.168.255.64:7003/',
-        target: 'http://192.168.1.4:7003/',
+        target: 'http://192.168.1.12:7003/',
       }
     },
 

src/api/TagProviderApi.js

@@ -0,0 +1,3 @@
+import BaseCurdApi from './BaseCurdApi'
+
+export default new BaseCurdApi('/tag/provider')

src/api/TagPurchaseApi.js

@@ -1,28 +1,28 @@
 import BaseCurdApi from './BaseCurdApi'
 
 class TagPurchaseApi extends BaseCurdApi {
-  save = (data, saveType, Target) => {
-    if (saveType === 'POST') {
-      const { providerId } = data
-      data = data.infos.reduce((list, info) => {
-        const number = parseInt(info.number)
-        if (Number.isFinite(number)) {
-          list.push({
-            providerId,
-            tagTypeId: info.tagTypeId,
-            number
-          })
-        }
-        return list
-      }, [])
-    }
+  // save = (data, saveType, Target) => {
+  //   if (saveType === 'POST') {
+  //     const { providerId } = data
+  //     data = data.infos.reduce((list, info) => {
+  //       const number = parseInt(info.number)
+  //       if (Number.isFinite(number)) {
+  //         list.push({
+  //           providerId,
+  //           tagTypeId: info.tagTypeId,
+  //           number
+  //         })
+  //       }
+  //       return list
+  //     }, [])
+  //   }
 
-    return this.api({
-      url: `${this.basePath}`,
-      method: saveType,
-      data
-    })
-  }
+  //   return this.api({
+  //     url: `${this.basePath}`,
+  //     method: saveType,
+  //     data
+  //   })
+  // }
 
   inStorage = tagPurchaseIds => this.api({
     url: `${this.basePath}/in-storage`,
@@ -30,6 +30,18 @@ class TagPurchaseApi extends BaseCurdApi {
     data: tagPurchaseIds
   })
 
+  savePurchase = data => this.api({
+    url: `${this.basePath}`,
+    method: 'POST',
+    data: data
+  })
+
+  update = (data) => this.api({
+    url: `${this.basePath}`,
+    method: 'PUT',
+    data: data
+  })
+
   constructor () {
     super('/tag/purchase')
   }

src/components/DialogAddTagPurchase.vue

@@ -0,0 +1,87 @@
+<template>
+    <el-dialog
+      :visible.sync="visible"
+      title="新增标签"
+      append-to-body
+      width="750px"
+    >
+      <el-form
+        ref="form"
+        :model="data"
+        label-width="85px"
+      >
+      <div class="overflow-auto" style="max-height:300px;padding:0 10px;">
+            <el-row :gutter="$$Constant.LAYOUT_GAP">
+              <el-col :span="12">
+                <el-form-item label="标签类型">
+                  <my-select
+                    v-model="tagTypeId"
+                    :options="optionGroup.TagType ? optionGroup.TagType.list : []"
+                  ></my-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="标签数量" prop="number" :rules="[{
+                  required: true,
+                  message: '请输入标签数量'
+                }]">
+                  <integer-input v-model="number" placeholder="输入标签数量"></integer-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            </div>
+      </el-form>
+
+      <template #footer>
+        <div class="flex center dialog-footer">
+          <el-button @click="onCloseBtnClick">取消</el-button>
+          <el-button type="primary" @click="onOkBtnClick">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </template>
+
+<script>
+import BaseCurdEditor from '@@/utils/BaseCurdEditor'
+import TagPurchase from '@@/entries/TagPurchase'
+
+export default {
+  name: 'DialogAddTagPurchase',
+  extends: BaseCurdEditor(TagPurchase),
+  props: {
+    optionGroup: {
+      required: true,
+      type: Object
+    }
+  },
+  data: () => ({
+    visible: false,
+    data: null,
+    tagTypeId: null,
+    number: 0
+  }),
+  methods: {
+    open (data) {
+      this.visible = true
+      this.data = data
+      this.tagTypeId = data.tagTypeId
+      this.number = data.number
+    },
+    close () {
+      this.visible = false
+      this.data = null
+      this.tagTypeId = null
+      this.number = 0
+    },
+    onCloseBtnClick () {
+      this.close()
+    },
+    onOkBtnClick () {
+      this.$emit('saved', {tagTypeId: this.tagTypeId, number: this.number})
+      this.close()
+    }
+  }
+}
+</script>
+
+  <style lang="scss"></style>

src/components/DialogTagPurchase.vue

@@ -11,21 +11,29 @@
       :model="data"
       label-width="85px"
     >
-      <el-collapse v-model="activeCollapseName" class="form-collapse">
-        <el-collapse-item title="采购信息" name="1" class="form-collapse-item">
-          <div class="overflow-auto" style="max-height:300px;padding:0 10px;">
+    <div class="overflow-auto" style="max-height:300px;padding:0 10px;">
             <el-row :gutter="$$Constant.LAYOUT_GAP">
               <el-col :span="12">
                 <el-form-item label="标签供应商" prop="provider">
                   <my-select
                     v-model="data.providerId"
-                    :options="optionGroup.Provider ? optionGroup.Provider.list : []"
+                    :options="optionGroup.TagProvider ? optionGroup.TagProvider.list : []"
                   ></my-select>
                 </el-form-item>
               </el-col>
+              <el-col :span="12">
+                <el-form-item label="收货日期">
+                  <el-date-picker
+                    style="width: 250px;"
+                    v-model="data.dataTime"
+                    type="date"
+                    placeholder="选择日期">
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
             </el-row>
 
-            <template v-if="operatorTypeId === 1">
+            <template>
               <el-row
                 v-for="(info, index) in data.infos"
                 :key="index"
@@ -45,44 +53,13 @@
                 </el-col>
               </el-row>
             </template>
-            <template v-else>
-              <el-row :gutter="$$Constant.LAYOUT_GAP">
-                <el-col :span="12">
-                  <el-form-item label="标签类型" prop="tagTypeId">
-                    <my-select
-                      v-model="data.tagTypeId"
-                      :options="optionGroup.TagType ? optionGroup.TagType.list : []"
-                    ></my-select>
-                  </el-form-item>
-                </el-col>
-
-                <el-col :span="12">
-                  <el-form-item label="标签数量" prop="number" :rules="[{
-                    required: true,
-                    message: '请输入标签数量'
-                  }]">
-                    <integer-input v-model="data.number" placeholder="输入标签数量"></integer-input>
-                  </el-form-item>
-                </el-col>
-                <!-- <el-col :span="8">
-                  <el-form-item label="标签单价" prop="price" :rules="[{
-                    required: true,
-                    message: '请输入标签单价'
-                  }]">
-                    <el-input v-model="data.price" type="number" placeholder="输入标签单价"></el-input>
-                  </el-form-item>
-                </el-col> -->
-              </el-row>
-            </template>
           </div>
-        </el-collapse-item>
-      </el-collapse>
     </el-form>
 
     <template #footer>
       <div class="flex center dialog-footer">
         <el-button @click="onCloseBtnClick">取消</el-button>
-        <el-button type="primary" @click="onSaveBtnClick">确定</el-button>
+        <el-button type="primary" @click="onSavePurchaseBtnClick">确定</el-button>
       </div>
     </template>
   </el-dialog>
@@ -96,6 +73,10 @@ export default {
   name: 'DialogTagPurchase',
   extends: BaseCurdEditor(TagPurchase),
   props: {
+    api: {
+      required: true,
+      type: Function
+    },
     optionGroup: {
       required: true,
       type: Object
@@ -113,6 +94,20 @@ export default {
       }
 
       return callback()
+    },
+    onSavePurchaseBtnClick () {
+      const saveData = {
+        receiveDate: new Date(this.data.dataTime).format('YYYY/MM/DD HH:mm:ss'),
+        providerId: this.data.providerId,
+        details: this.data.infos.filter(item => item.number > 0).map(item => ({tagTypeId: item.tagTypeId, number: item.number}))
+      }
+      if (saveData.details.length <= 0) {
+        return
+      }
+      this.$$request(this.api, saveData).then(() => {
+        this.close()
+        this.$emit('saved')
+      }).catch(console.error).finally(() => {})
     }
   }
 }

src/components/DialogTagPurchaseDetail.vue

@@ -0,0 +1,229 @@
+<template>
+    <el-dialog
+      :visible.sync="visible"
+      :title="`订单详情 ${oData && oData.orderNo ? oData.orderNo : ''}`"
+      append-to-body
+      width="900px"
+    >
+      <div class="flex column" style="padding-bottom:20px;height:580px">
+        <div class="flex valign-center">
+        <el-button
+          plain
+          icon="el-icon-plus"
+          type="primary"
+          size="small"
+          class="custom-plain-button"
+          @click="onAddTagBtnClick"
+          :disabled="oData && oData.tagPurchaseStateId !='0'"
+        >新增标签</el-button>
+        <el-button
+          plain
+          icon="el-icon-delete"
+          type="primary"
+          size="small"
+          class="custom-plain-button"
+          @click="onBatchDeleteBtnClick"
+          :disabled="selectedList.length === 0 || oData.tagPurchaseStateId !='0'"
+        >批量删除</el-button>
+      </div>
+        <div class="flex-1 fit-size" style="padding-top:20px;">
+          <el-table
+            ref="table"
+            :data="list"
+            stripe
+            border
+            height="100%"
+            size="small"
+            class="custom-el-table-style"
+            @selection-change="onSelectionChange"
+            @row-click="onRowClick"
+          >
+          <el-table-column
+            type="selection"
+            width="55"
+            align="center"
+             :selectable="tagSelectAble"
+            fixed
+          ></el-table-column>
+            <el-table-column
+              type="index"
+              label="序号"
+              width="60"
+              align="center"
+              fixed
+            ></el-table-column>
+            <el-table-column
+              label="标签类型"
+              prop="tagTypeName"
+              header-align="center"
+              min-width="120"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              label="数量"
+              min-width="80"
+              prop="number"
+              header-align="center"
+              align="center"
+            >
+                <template slot-scope="scope">
+                    <el-input v-model="scope.row.number" :class="{ 'input-error': scope.row.number === '' }" @input="handleInput" :disabled="oData.tagPurchaseStateId !='0'"></el-input>
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="单价（元）"
+                prop="unitPrice"
+                align="right"
+                min-width="70"
+                header-align="center"
+              ></el-table-column>
+            <el-table-column
+                label="费用（元）"
+                prop="amount"
+                align="right"
+                min-width="70"
+                header-align="center"
+              ></el-table-column>
+              <el-table-column
+                label="操作栏"
+                min-width="80"
+                header-align="center"
+                align="center"
+              >
+                <template v-slot="{ row }">
+                  <div class="flex center layout-gap">
+                    <edit-button :data="row" :on-click="onDeleteBtnClick" icon="el-icon-delete" :disabled="oData.tagPurchaseStateId !='0'">删除</edit-button>
+                  </div>
+                </template>
+              </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <template #footer v-if="oData && oData.tagPurchaseStateId === '0'">
+        <div class="flex center dialog-footer">
+          <el-button
+            @click="onCloseBtnClick"
+          >取消</el-button>
+
+          <el-button
+            type="primary"
+            @click="onOkBtnClick"
+          >确定</el-button>
+        </div>
+      </template>
+      <dialog-add-tag-purchase
+      ref="addTagPurchaseDialog"
+      :optionGroup="optionGroup"
+      @saved="loadTag"
+    ></dialog-add-tag-purchase>
+    </el-dialog>
+
+  </template>
+
+<script>
+import BaseCurdList from '@@/utils/BaseCurdList'
+import TagPurchase from '@@/entries/TagPurchase'
+
+export default {
+  name: 'DialogTagPurchaseDetail',
+  extends: BaseCurdList(TagPurchase),
+  props: {
+    api: {
+      required: true,
+      type: Function
+    }
+  },
+  data: () => ({
+    visible: false,
+    oData: null
+  }),
+  methods: {
+    open (data) {
+      this.oData = data
+      this.visible = true
+      this.list = data.details
+    },
+    close () {
+      this.oData = null
+      this.visible = false
+      this.list = Object.freeze([])
+    },
+    tagSelectAble () {
+      return this.oData.tagPurchaseStateId === '0'
+    },
+    onBatchDeleteBtnClick () {
+      const { selectedList } = this
+      this.$confirm(`此操作将删除选中的记录, 是否继续？`, '确认', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        confirmButtonClass: 'confirm-dialog-confirm-btn',
+        cancelButtonClass: 'confirm-dialog-cancel-btn',
+        type: 'warning'
+      }).then(() => {
+        const ids = new Set(selectedList.map(data => data.id))
+        this.list = this.list.filter(item => !ids.has(item.id))
+        this.oData.details = this.list
+      }).catch(() => {})
+    },
+    onDeleteBtnClick (data) {
+      this.$confirm(`此操作将删除该记录, 是否继续？`, '确认', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        confirmButtonClass: 'confirm-dialog-confirm-btn',
+        cancelButtonClass: 'confirm-dialog-cancel-btn',
+        type: 'warning'
+      }).then(() => {
+        this.list = this.list.filter(item => item.id !== data.id)
+        this.oData.details = this.list
+      }).catch(() => {})
+    },
+    onCloseBtnClick () {
+      this.close()
+    },
+    onOkBtnClick () {
+      this.$$request(this.api, this.oData).then(() => {
+        this.close()
+        this.$emit('saved')
+      }).catch(console.error).finally(() => {})
+    },
+    handleInput (value) {
+      let sanitizedValue = value.replace(/[^0-9]/g, '')
+      sanitizedValue = sanitizedValue.replace(/^0+/, '')
+      this.selectedData.number = sanitizedValue === '' ? '' : sanitizedValue
+      this.selectedData.amount = sanitizedValue === '' ? 0 : (sanitizedValue * this.selectedData.unitPrice).toFixed(2)
+    },
+    onAddTagBtnClick () {
+      this.$refs.addTagPurchaseDialog.open({tagTypeId: '1', number: 0})
+    },
+    loadTag (data) {
+      if (data.number > 0) {
+        const currentTag = this.list.filter(item => item.tagTypeId === data.tagTypeId)
+        if (currentTag.length <= 0) {
+          const providerConfig = this.optionGroup.TagType
+          const tag = providerConfig.list.find(item => item.id === data.tagTypeId)
+          if (tag) {
+            const amount = (data.number * tag.price).toFixed(2)
+            const orderId = this.oData.id
+            const addData = {
+              amount: amount,
+              number: data.number,
+              tagPurchaseId: orderId,
+              tagTypeId: tag.id,
+              tagTypeName: tag.name,
+              unitPrice: tag.price
+            }
+            this.list.push(addData)
+            this.oData.details = this.list
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.input-error .el-input__inner {
+  border-color: red;
+}
+</style>

src/components/MySelect.vue

@@ -52,7 +52,7 @@ export default {
   },
   methods: {
     change (...args) {
-      this.$emit('change', ...args)
+      // this.$emit('change', ...args)
     }
   }
 }

src/entries/TagProvider.js

@@ -0,0 +1,25 @@
+import BaseCurdEntry from './BaseCurdEntry'
+import tagProviderApi from '@@/api/TagProviderApi'
+
+export default class TagProvider extends BaseCurdEntry {
+  id
+
+  name
+
+  unitPrice
+
+  constructor (id, name) {
+    super()
+
+    this.id = id
+    this.name = name
+  }
+
+  static get $$name () {
+    return 'TagProvider'
+  }
+
+  static get $$api () {
+    return tagProviderApi
+  }
+}

src/entries/TagPurchase.js

@@ -2,7 +2,7 @@ import BaseCurdEntry from './BaseCurdEntry'
 import DataTimeRange from '@@/utils/DataTimeRange'
 import TagType from './TagType'
 import TagPurchaseState from './TagPurchaseState'
-import Provider from './Provider'
+import TagProvider from './TagProvider'
 
 import tagPurchaseApi from '@@/api/TagPurchaseApi'
 
@@ -61,7 +61,7 @@ export default class TagPurchase extends BaseCurdEntry {
 
     const { optionGroup } = editorInstance
 
-    const providerConfig = optionGroup.Provider
+    const providerConfig = optionGroup.TagProvider
     const [ provider ] = providerConfig.list
     if (provider) {
       this.providerId = provider[providerConfig.Target.$$idProp]
@@ -106,7 +106,7 @@ export default class TagPurchase extends BaseCurdEntry {
         }
       }
     }, {
-      Target: Provider
+      Target: TagProvider
     }]
   ]
 

src/entries/TagType.js

@@ -6,11 +6,12 @@ export default class TagType extends BaseCurdEntry {
 
   name
 
-  constructor (id, name) {
+  constructor (id, name, price) {
     super()
 
     this.id = id
     this.name = name
+    this.price = price
   }
 
   static get $$name () {

src/views/TagPurchase.vue

@@ -116,20 +116,6 @@
               header-align="center"
               align="center"
             ></el-table-column>
-            <el-table-column
-              label="标签类型"
-              prop="tagTypeName"
-              min-width="150"
-              header-align="center"
-              align="left"
-            ></el-table-column>
-            <el-table-column
-              label="标签数量（个）"
-              prop="number"
-              min-width="106"
-              header-align="center"
-              align="right"
-            ></el-table-column>
             <el-table-column
               label="总价（元）"
               prop="amount"
@@ -160,13 +146,14 @@
             ></el-table-column>
             <el-table-column
               label="操作栏"
-              min-width="80"
+              min-width="120"
               header-align="center"
               align="center"
             >
               <template v-slot="{ row }">
                 <div class="flex center layout-gap">
-                  <edit-button :data="row" :on-click="onOpenEditorBtnClick" icon="el-icon-edit">编辑</edit-button>
+                  <edit-button :data="row" :on-click="onOpenDetailEditorBtnClick" icon="el-icon-tickets">详情</edit-button>
+                  <edit-button :data="row" :on-click="onDeleteBtnClick" icon="el-icon-delete">删除</edit-button>
                 </div>
               </template>
             </el-table-column>
@@ -184,10 +171,16 @@
     <dialog-tag-purchase
       ref="editor"
       :optionGroup="optionGroup"
+       :api="$$api.savePurchase"
       @saved="loadList"
     ></dialog-tag-purchase>
 
     <dialog-tag-purchase-order-export ref="orderExportDialog"></dialog-tag-purchase-order-export>
+    <dialog-tag-purchase-detail
+      ref="tagPurchaseDetailDialog"
+      :api="$$api.update"
+      @saved="loadList"
+    ></dialog-tag-purchase-detail>
   </div>
 </template>
 
@@ -213,6 +206,20 @@ export default {
     },
     onExportOrderBtnClick () {
       this.$refs.orderExportDialog.open(this.selectedData)
+    },
+    onOpenDetailEditorBtnClick (data) {
+      this.$$request(TagPurchase.$$api.getDetail, data, this)
+        .then(data => {
+          this.$refs.tagPurchaseDetailDialog.open(data)
+        }).catch(console.error).finally(() => {})
+    },
+    onDeleteBtnClick (data) {
+      this.$$request(TagPurchase.$$api.delete, data, this)
+        .then(flag => {
+          if (flag) {
+            this.loadList()
+          }
+        }).catch(console.error).finally(() => {})
     }
   }
 }