greater_wms/templates/src/pages/warehouse/product.vue

<template>
    <div>
      <transition appear enter-active-class="animated fadeIn">
        <q-table class="my-sticky-header-column-table shadow-24" :data="table_list" row-key="id" :separator="separator"
          :loading="loading" :filter="filter" :columns="columns" hide-bottom :pagination.sync="pagination"
          no-data-label="No data" no-results-label="No data you want" :table-style="{ height: height }" flat bordered>
          <template v-slot:top>
            <q-btn-group push>
              <q-btn :label="$t('new')" icon="add" @click="newFormCheck()">
                <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                  content-style="font-size: 12px">
                  {{ $t('newtip') }}
                </q-tooltip>
              </q-btn>
              <q-btn :label="$t('refresh')" icon="refresh" @click="reFresh()">
                <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                  content-style="font-size: 12px">
                  {{ $t('refreshtip') }}
                </q-tooltip>
              </q-btn>
            </q-btn-group>
            <q-space />
          </template>
          <template v-slot:body="props">
            <q-tr :props="props">

                
              <template v-if="props.row.id === editid">
                <q-td key="product_std" :props="props">
                  <q-input dense outlined square v-model="editFormData.product_std"
                    :label="'产品标准'" autofocus
                    :rules="[val => val && val.length > 0 || error1]" />
                </q-td>
              </template>
              <template v-else-if="props.row.id !== editid">
                <q-td key="product_std" :props="props">
                  {{ props.row.product_std }}
                </q-td>
              </template>

              <template v-if="props.row.id === editid">
                <q-td key="product_code" :props="props">
                  <q-input dense outlined square v-model="editFormData.product_code"
                    :label="'产品代码'" autofocus
                    :rules="[val => val && val.length > 0 || error0]" />
                </q-td>
              </template>
              <template v-else-if="props.row.id !== editid">
                <q-td key="product_code" :props="props">
                  {{ props.row.product_code }}
                </q-td>
              </template>

              <template v-if="props.row.id === editid">
                <q-td key="product_name" :props="props">
                  <q-input dense outlined square v-model="editFormData.product_name"
                    :label="'产品名称'" autofocus
                    :rules="[val => val && val.length > 0 || error1]" />
                </q-td>
              </template>
              <template v-else-if="props.row.id !== editid">
                <q-td key="product_name" :props="props">
                  {{ props.row.product_name }}
                </q-td>
              </template>

           
     

              <q-td key="creater" :props="props">
                {{ props.row.creater }}
              </q-td>
              <q-td key="create_time" :props="props">
                {{ props.row.create_time }}
              </q-td>
              <q-td key="update_time" :props="props">
                {{ props.row.update_time }}
              </q-td>
              <template v-if="!editMode">
                <q-td key="action" :props="props" style="width: 100px">
                  <q-btn round flat push color="purple" icon="edit" @click="editData(props.row)">
                    <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                      content-style="font-size: 12px">
                      {{ $t('edit') }}
                    </q-tooltip>
                  </q-btn>
                  <q-btn round flat push color="dark" icon="delete" @click="deleteData(props.row.id)">
                    <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                      content-style="font-size: 12px">
                      {{ $t('delete') }}
                    </q-tooltip>
                  </q-btn>


                </q-td>
              </template>
              <template v-else-if="editMode">
                <template v-if="props.row.id === editid">
                  <q-td key="action" :props="props" style="width: 100px">
                    <q-btn round flat push color="secondary" icon="check" @click="editDataSubmit()">
                      <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                        content-style="font-size: 12px">
                        {{ $t('confirmedit') }}
                      </q-tooltip>
                    </q-btn>
                    <q-btn round flat push color="red" icon="close" @click="editDataCancel()">
                      <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                        content-style="font-size: 12px">
                        {{ $t('canceledit') }}
                      </q-tooltip>
                    </q-btn>
                  </q-td>
                </template>
                <template v-else-if="props.row.id !== editid"></template>
              </template>
            </q-tr>
          </template>
        </q-table>
      </transition>
      <template>
        <div v-show="max !== 0" class="q-pa-lg flex flex-center">
          <div>{{ total }} </div>
          <q-pagination v-model="current" color="black" :max="max" :max-pages="6" boundary-links @click="getList()" />
          <div>
            <input v-model="paginationIpt" @blur="changePageEnter" @keyup.enter="changePageEnter"
              style="width: 60px; text-align: center" />
          </div>
        </div>
        <div v-show="max === 0" class="q-pa-lg flex flex-center">
          <q-btn flat push color="dark" :label="$t('no_data')"></q-btn>
        </div>
      </template>
      <q-dialog v-model="newForm">
        <q-card class="shadow-24">
          <q-bar class="bg-light-blue-10 text-white rounded-borders" style="height: 50px">
            <div>{{ $t('newtip') }}</div>
            <q-space />
            <q-btn dense flat icon="close" v-close-popup>
              <q-tooltip content-class="bg-amber text-black shadow-4">{{ $t('index.close') }}</q-tooltip>
            </q-btn>
          </q-bar>
          <q-card-section style="max-height: 325px; width: 400px" class="scroll">
            <q-input dense outlined square v-model="newFormData.product_std"
              :label="'产品标准'" autofocus
              :rules="[val => val && val.length > 0 || error1]"  />
            <q-input dense outlined square v-model="newFormData.product_code"
              :label="'产品代码'" autofocus
              :rules="[val => val && val.length > 0 || error0]"  />
            <q-input dense outlined square v-model="newFormData.product_name"
              :label="'产品名称'" :rules="[val => val && val.length > 0 || error1]"
              @keyup.enter="newDataSubmit()" />
            

  
          </q-card-section>
          <div style="float: right; padding: 15px 15px 15px 0">
            <q-btn color="white" text-color="black" style="margin-right: 25px" @click="newDataCancel()">{{ $t('cancel')
              }}</q-btn>
            <q-btn color="primary" @click="newDataSubmit()">{{ $t('submit') }}</q-btn>
          </div>
        </q-card>
      </q-dialog>
      <q-dialog v-model="deleteForm">
        <q-card class="shadow-24">
          <q-bar class="bg-light-blue-10 text-white rounded-borders" style="height: 50px">
            <div>{{ $t('delete') }}</div>
            <q-space />
            <q-btn dense flat icon="close" v-close-popup>
              <q-tooltip content-class="bg-amber text-black shadow-4">{{ $t('index.close') }}</q-tooltip>
            </q-btn>
          </q-bar>
          <q-card-section style="max-height: 325px; width: 400px" class="scroll">
            {{ $t('deletetip') }}
          </q-card-section>
          <div style="float: right; padding: 15px 15px 15px 0">
            <q-btn color="white" text-color="black" style="margin-right: 25px" @click="deleteDataCancel()">{{ $t('cancel')
              }}</q-btn>
            <q-btn color="primary" @click="deleteDataSubmit()">{{ $t('submit') }}</q-btn>
          </div>
        </q-card>
      </q-dialog>

    </div>
  </template>
  <router-view />
  
  <script>
  import { getauth, postauth, putauth, deleteauth } from 'boot/axios_request'
  import { LocalStorage } from 'quasar'
  import axios from 'axios'
  
  export default {
    name: 'Pageproduct',
    data() {
      return {
        openid: '',
        login_name: '',
        authin: '0',
        pathname: 'warehouse/product/',
        pathname_previous: '',
        pathname_next: '',
        separator: 'cell',
        loading: false,
        height: '',
        table_list: [],
        columns: [
            { name: 'product_std', required: true, label: '产品标准', align: 'left', field: 'product_std' ,sortable: true},
          { name: 'product_code', required: true, label: '产品代码', align: 'left', field: 'product_code' ,sortable: true},
          { name: 'product_name', required: true, label: '产品名称', align: 'left', field: 'product_name' ,sortable: true},
          { name: 'creater', label: this.$t('creater'), field: 'creater', align: 'center' },

          { name: 'action', label: this.$t('action'), align: 'center' }
        ],
        filter: '',
        pagination: {
          page: 1,
          rowsPerPage: 11
        },
        newForm: false,
        newFormData: {
                product_std: '',
                product_code: '',
                product_name: '',
                creater: ''
        },
        editid: 0,
        editFormData: {},
        editMode: false,
        deleteForm: false,
        deleteid: 0,

        square_measure: '',
        error0: this.$t('warehouse.view_warehouseset.error0'),
        
        error1: this.$t('warehouse.view_warehouseset.error1'),
        error2: this.$t('warehouse.view_warehouseset.error2'),
        error3: this.$t('warehouse.view_warehouseset.error3'),
        error4: this.$t('warehouse.view_warehouseset.error4'),
        error5: this.$t('warehouse.view_warehouseset.error5'),
        current: 1,
        max: 0,
        total: 0,
        paginationIpt: 1
      }
    },
    methods: {
      getList() {
        var _this = this
        if (LocalStorage.has('auth')) {
          getauth(_this.pathname + '?page=' + '' + _this.current, {
          }).then(res => {
            _this.table_list = res.results
            _this.total = res.count
            if (res.count === 0) {
              _this.max = 0
            } else {
              if (Math.ceil(res.count / _this.pagination.rowsPerPage) === 1) {
                _this.max = 0
              } else {
                _this.max = Math.ceil(res.count / _this.pagination.rowsPerPage)
              }
            }
            _this.pathname_previous = res.previous
            _this.pathname_next = res.next
          }).catch(err => {
            _this.$q.notify({
              message: err.detail,
              icon: 'close',
              color: 'negative'
            })
          })
        }
      },
      changePageEnter(e) {
        if (Number(this.paginationIpt) < 1) {
          this.current = 1
          this.paginationIpt = 1
        } else if (Number(this.paginationIpt) > this.max) {
          this.current = this.max
          this.paginationIpt = this.max
        } else {
          this.current = Number(this.paginationIpt)
        }
        this.getList()
      },
      getListPrevious() {
        var _this = this
        if (LocalStorage.has('auth')) {
          getauth(_this.pathname_previous, {
          }).then(res => {
            _this.table_list = res.results
            _this.pathname_previous = res.previous
            _this.pathname_next = res.next
          }).catch(err => {
            _this.$q.notify({
              message: err.detail,
              icon: 'close',
              color: 'negative'
            })
          })
        }
      },
      getListNext() {
        var _this = this
        if (LocalStorage.has('auth')) {
          getauth(_this.pathname_next, {
          }).then(res => {
            _this.table_list = res.results
            _this.pathname_previous = res.previous
            _this.pathname_next = res.next
          }).catch(err => {
            _this.$q.notify({
              message: err.detail,
              icon: 'close',
              color: 'negative'
            })
          })
        } else {
        }
      },
      reFresh() {
        var _this = this
        _this.getList()
      },
      newFormCheck() {
        var _this = this

          _this.newForm = true

      },
      newDataSubmit() {
        var _this = this
        var productsets = []
        _this.table_list.forEach(i => {
          productsets.push(i.product_name)
        })
        if (productsets.indexOf(_this.newFormData.product_name) === -1 && _this.newFormData.product_name.length !== 0) {
          _this.newFormData.creater = _this.login_name
          postauth(_this.pathname, _this.newFormData).then(res => {
            _this.getList()
            _this.newDataCancel()
            _this.$q.notify({
              message: 'Success Create',
              icon: 'check',
              color: 'green'
            })
          }).catch(err => {
            _this.$q.notify({
              message: err.detail,
              icon: 'close',
              color: 'negative'
            })
          })
        } else {
          _this.newFormData.creater = _this.login_name
          postauth(_this.pathname, _this.newFormData).then(res => {
            _this.getList()
            _this.newDataCancel()
            _this.$q.notify({
              message: '',
              icon: 'close',
              color: 'negative'
            })
          }).catch(err => {
            _this.$q.notify({
              message: err.detail,
              icon: 'close',
              color: 'negative'
            })
          })
        }
        productsets = []
      },
      newDataCancel() {
        var _this = this
        _this.newForm = false
        _this.newFormData = {
                product_std: '',
                product_code: '',
                product_name: '',
                creater: ''
        }
      },
      editData(e) {
        var _this = this
        _this.editMode = true
        _this.editid = e.id
        _this.editFormData = {
                product_std: e.product_std,
                product_code: e.product_code,
                product_name: e.product_name,
                creater: _this.login_name
        }
      },
      editDataSubmit() {
        var _this = this
        putauth(_this.pathname + _this.editid + '/', _this.editFormData).then(res => {
          _this.editDataCancel()
          _this.getList()
          _this.$q.notify({
            message: 'Success Edit Data',
            icon: 'check',
            color: 'green'
          })
        }).catch(err => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
      },
      editDataCancel() {
        var _this = this
        _this.editMode = false
        _this.editid = 0
        _this.editFormData = {
                product_std: '',
                product_code: '',
                product_name: '',
                creater: ''
        }
      },
      deleteData(e) {
        var _this = this
        _this.deleteForm = true
        _this.deleteid = e
      },
      deleteDataSubmit() {
        var _this = this
        deleteauth(_this.pathname + _this.deleteid + '/').then(res => {
          _this.deleteDataCancel()
          _this.getList()
          _this.$q.notify({
            message: 'Success Edit Data',
            icon: 'check',
            color: 'green'
          })
        }).catch(err => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
      },
      deleteDataCancel() {
        var _this = this
        _this.deleteForm = false
        _this.deleteid = 0
      }
      
    
    },
    created() {
      var _this = this
      if (LocalStorage.has('openid')) {
        _this.openid = LocalStorage.getItem('openid')
      } else {
        _this.openid = ''
        LocalStorage.set('openid', '')
      }
      if (LocalStorage.has('login_name')) {
        _this.login_name = LocalStorage.getItem('login_name')
      } else {
        _this.login_name = ''
        LocalStorage.set('login_name', '')
      }
      if (LocalStorage.has('auth')) {
        _this.authin = '1'
        _this.getList()
      } else {
        _this.authin = '0'
      }
    },
    mounted() {
      var _this = this
      if (_this.$q.platform.is.electron) {
        _this.height = String(_this.$q.screen.height - 290) + 'px'
      } else {
        _this.height = _this.$q.screen.height - 290 + '' + 'px'
      }
    },
    updated() {
    },
    destroyed() {
    }
  }
  </script>