采购合同管理

src/views/modules/common/supplier-component.vue

@@ -0,0 +1,124 @@
+<!-- 供应商列表 -->
+<template>
+    <div>
+      <el-select
+        v-model="value"
+        ref="select"
+        placeholder="请选择"
+        clearable
+        filterable
+        remote
+        :remote-method="remoteMethod"
+        @change = "onChange"
+        @focus="cancelReadOnly"
+        @hook:mounted="cancelReadOnly"
+        @visible-change="cancelReadOnly">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+        <el-option v-if="options.length > 0" label="加载更多" style="font-style: italic; color: #8a979e" value="undefined" @click.native="handleClick()"></el-option>
+      </el-select>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: 'supplier-component',
+    props: {
+      supplierId: {
+        type: String,
+        default: ''
+      }
+    },
+    model: {
+      prop: 'supplierId',
+      event: 'supplierSelected'
+    },
+    data () {
+      return {
+        value: '',
+        current: 1,
+        size: 10,
+        name: '',
+        options: [],
+        loading: false,
+        noMore: false
+      }
+    },
+    mounted () {
+      this.init()
+    },
+    watch: {
+      supplierId (value) {
+        this.value = value
+      }
+    },
+    methods: {
+      async init () {
+        this.getList()
+      },
+      remoteMethod (query) {
+        this.options = []
+        this.current = 1
+        this.name = query
+        this.getList()
+      },
+      getList () {
+        this.$http({
+          url: this.$http.adornUrl(`/biz-service/supplier/list`),
+          method: 'get',
+          params: this.$http.adornParams({
+            'current': this.current,
+            'size': this.size,
+            'supplierName': this.name
+          })
+        }).then(({data}) => {
+          if (data && data.code === '200') {
+            if (this.current > data.data.pages) {
+              return
+            }
+            data.data.records.forEach(item => {
+              this.options.push({
+                label: item.supplierName,
+                value: item.supplierId
+              })
+            })
+          } else {
+            this.options = []
+          }
+        })
+      },
+      handleClick () {
+        this.loadMore()
+      },
+      loadMore () {
+        this.current ++
+        this.getList()
+      },
+      onChange (item) {
+        if (item === 'undefined') {
+          this.value = null
+        }
+        this.$emit('cusSelected', item)
+      },
+      cancelReadOnly (onOff) {
+        this.$nextTick(() => {
+          if (!onOff) {
+            const input = this.$refs.select.$el.querySelector('.el-input__inner')
+            const timer = setTimeout(() => {
+              input.removeAttribute('readonly')
+              clearTimeout(timer)
+            }, 200)
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/modules/sale/contract-add-or-update.vue

@@ -1,3 +1,4 @@
+<!-- 新增采购合同 -->
 <template>
     <div>
         <div class="my-title">{{ !id?'新增':'修改' }}</div>
@@ -25,12 +26,26 @@
               </el-form-item>
             </el-col>
             <el-col :span="8">
-              <el-form-item label="合同号" prop="contractNumber">
-                <el-input v-model="dataForm.contractNumber" placeholder="合同号" style="width: 200px"></el-input>
+              <el-form-item label="供应商" prop="supplierId">
+                <supplier-component v-model="dataForm.supplierId" :supplier-id="dataForm.supplierId"></supplier-component>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row class="my-row">
+            <el-col :span="8">
+              <el-form-item label="合同交期" prop="deliveryTime">
+                <el-date-picker
+                  v-model="dataForm.deliveryTime"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  type="datetime">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="合同号" prop="contractNumber">
+                <el-input v-model="dataForm.contractNumber" placeholder="合同号" style="width: 200px"></el-input>
+              </el-form-item>
+            </el-col>
             <el-col :span="8">
               <el-form-item label="合同金额" prop="totalAmount">
                 <el-input-number v-model="dataForm.totalAmount" :step="1" :min="0" :precision="1"></el-input-number>
@@ -56,10 +71,12 @@
 <script>
   import UploadComponent from '../common/upload-component'
   import { getContractDetail } from '@/api/sale'
+  import SupplierComponent from '../common/supplier-component'
 
 export default {
     name: 'contract-add-or-update',
     components: {
+      SupplierComponent,
       UploadComponent
     },
     computed: {

src/views/modules/sale/contract.vue

@@ -4,7 +4,7 @@
     <template v-if="!detailVisible && !addOrUpdateVisible && !changeFormVisible &&!changeAttachVisible && !attachVisible && !noticeChangeAttachVisible">
       <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
         <el-form-item label="名称" prop="supplierName">
-          <el-input v-model="dataForm.supplierName" placeholder="客户名称" clearable/>
+          <el-input v-model="dataForm.supplierName" placeholder="供应商名称" clearable/>
         </el-form-item>
         <el-form-item label="申请日期">
           <el-date-picker
@@ -19,8 +19,9 @@
         <el-form-item>
           <el-button @click="search()">查询</el-button>
           <el-button v-if="isAuth('pur:purchaseContract:save')" type="primary" @click="addOrUpdateHandle(0)">录入</el-button>
+          <!-- 导出缺后端接口 -->
           <el-button type="primary" @click="exportHandle()">导出</el-button>
-          <el-button type="primary" @click="setNoticeChangeHandle()">合同更改通知人设置</el-button>
+          <el-button v-if="isAuth('pur:purchaseContract:noteChangeConfig')" type="primary" @click="setNoticeChangeHandle()">合同更改通知人设置</el-button>
         </el-form-item>
       </el-form>
       <el-table
@@ -121,9 +122,9 @@
           width="150"
           label="操作">
           <template slot-scope="scope">
-            <el-button v-if="isAuth('cus:contractBook:info')" type="text" size="small" @click="detailHandle(scope.row.contractId)">查看</el-button>
-            <el-button v-if="isAuth('cus:contractBook:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.contractId, false)">编辑</el-button>
-            <el-button v-if="isAuth('cus:contractBook:changeContract')" type="text" size="small" @click="changeHandle(scope.row.contractId)">变更</el-button>
+            <el-button v-if="isAuth('pur:purchaseContract:info')" type="text" size="small" @click="detailHandle(scope.row.contractId)">查看</el-button>
+            <el-button v-if="isAuth('pur:purchaseContract:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.contractId, false)">编辑</el-button>
+            <el-button v-if="isAuth('pur:purchaseContract:changeContract')" type="text" size="small" @click="changeHandle(scope.row.contractId)">变更</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -301,6 +302,10 @@ export default {
       this.$nextTick(() => {
         this.$refs.attachDetail.init(row.attachList)
       })
+    },
+    // 导出
+    exportHandle () {
+      this.$message.warning('功能暂未实现！')
     }
   }
 }