|
@@ -1,11 +1,20 @@
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
+ <div class="flex-align-center flex-between normal-margin">
|
|
|
+ <slot name="operation"></slot>
|
|
|
+ <div class="flex-align-center">
|
|
|
+ <el-input size="small" v-model="params.content.where.condition" placeholder="产品名称,编号" @keyup.enter.native="listData(params.content.pageNumber = 1)" @clear="listData(params.content.pageNumber = 1)" clearable></el-input>
|
|
|
+ <slot name="add"></slot>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="produtMag-panel">
|
|
|
<el-table
|
|
|
+ ref="multipleTable"
|
|
|
:data="tableData"
|
|
|
style="width: 100%"
|
|
|
:header-cell-style="{height:'50px',color:'#768093',fontWeight:'100'}"
|
|
|
- :cell-style="{height:'50px',color:'#768093',fontWeight:'200'}">
|
|
|
+ :cell-style="{height:'50px',color:'#768093',fontWeight:'200'}"
|
|
|
+ @selection-change="selectionChange">
|
|
|
<el-table-column
|
|
|
type="selection"
|
|
|
width="55">
|
|
@@ -16,14 +25,18 @@
|
|
|
label="上架状态"
|
|
|
width="80">
|
|
|
<template slot-scope="scope">
|
|
|
- <div style="margin:10px 0">
|
|
|
- <el-switch
|
|
|
- :disabled="scope.row.status==='审核'"
|
|
|
- v-model="scope.row.isonsale"
|
|
|
- active-color="#3874f6"
|
|
|
- inactive-color="#999">
|
|
|
- </el-switch>
|
|
|
+ <slot name="onsale" :data="scope.row"></slot>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="产品图"
|
|
|
+ width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.attinfos[0]">
|
|
|
+ <previewImage class="image" :image="scope.row.attinfos[0]" :list="scope.row.attinfos" :deletebtn="false"></previewImage>
|
|
|
</div>
|
|
|
+ <uploadFile v-else :folderid="folderid" accept=".JPG,.PNG,.jpg,.png" btntype="smallimage" :bindData="{ownertable:'plm_item',ownerid:scope.row.itemid,usetype:'default'}" @onSuccess="listData"></uploadFile>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
@@ -55,7 +68,7 @@
|
|
|
label="计量单位"
|
|
|
width="90">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-tag size="mini" type="info" effect="plain">{{scope.row.unitid}}</el-tag>
|
|
|
+ <el-tag size="mini" type="info" effect="plain">{{scope.row.unitname}}</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
@@ -66,10 +79,11 @@
|
|
|
<span :style="scope.row.status === '新建'?{color:'#52C41A'}:{color:'red'}">{{scope.row.status}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column width="150">
|
|
|
+ <el-table-column width="280">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-button size="mini" type="primary" :disabled="scope.row.status==='审核'">编 辑</el-button>
|
|
|
- <el-button size="mini" type="danger" :disabled="scope.row.status==='审核'">删 除</el-button>
|
|
|
+ <slot name="setimage" :data="scope.row"></slot>
|
|
|
+ <slot name="edit" :data="scope.row"></slot>
|
|
|
+ <slot name="del" :data="scope.row"></slot>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
@@ -77,10 +91,12 @@
|
|
|
<el-pagination
|
|
|
background
|
|
|
small
|
|
|
- :current-page="1"
|
|
|
- :page-size="10"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-size="params.content.pageSize"
|
|
|
layout="total, prev, pager, next, jumper"
|
|
|
- :total="100">
|
|
|
+ :total="total">
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -88,52 +104,82 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import uploadFile from '@/components/upload/hw_obs_upload'
|
|
|
+import previewImage from '@/components/previewImage/index'
|
|
|
+
|
|
|
export default {
|
|
|
data () {
|
|
|
return {
|
|
|
- value:0,
|
|
|
- tableData: [{
|
|
|
- isonsale: false,
|
|
|
- itemname: '铜本色等径直通',
|
|
|
- itemno: 'BM8270 0540000',
|
|
|
- model:'316L德标卡压等径直通',
|
|
|
- spec:'18mm',
|
|
|
- orderminqty:100,
|
|
|
- orderaddqty:10,
|
|
|
- unitid:'个',
|
|
|
- status:'新建'
|
|
|
- }, {
|
|
|
- isonsale: false,
|
|
|
- itemname: '铜本色等径直通',
|
|
|
- itemno: 'BM8270 0540000',
|
|
|
- model:'316L德标卡压等径直通',
|
|
|
- spec:'18mm',
|
|
|
- orderminqty:100,
|
|
|
- orderaddqty:10,
|
|
|
- unitid:'个',
|
|
|
- status:'新建'
|
|
|
- }, {
|
|
|
- isonsale: true,
|
|
|
- itemname: '铜本色等径直通',
|
|
|
- itemno: 'BM8270 0540000',
|
|
|
- model:'316L德标卡压等径直通',
|
|
|
- spec:'18mm',
|
|
|
- orderminqty:100,
|
|
|
- orderaddqty:10,
|
|
|
- unitid:'个',
|
|
|
- status:'新建'
|
|
|
- }, {
|
|
|
- isonsale: false,
|
|
|
- itemname: '铜本色等径直通',
|
|
|
- itemno: 'BM8270 0540000',
|
|
|
- model:'316L德标卡压等径直通',
|
|
|
- spec:'18mm',
|
|
|
- orderminqty:100,
|
|
|
- orderaddqty:10,
|
|
|
- unitid:'个',
|
|
|
- status:'审核'
|
|
|
- }]
|
|
|
+ folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
|
|
|
+ params:{
|
|
|
+ "id": 20220923140602,
|
|
|
+ "content": {
|
|
|
+ "pageNumber": 1,
|
|
|
+ "pageSize": 20,
|
|
|
+ "where": {
|
|
|
+ "condition": ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tableSelectData:[],
|
|
|
+ tableData: [],
|
|
|
+ total:0,
|
|
|
+ currentPage:0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ uploadFile,
|
|
|
+ previewImage
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ async listData () {
|
|
|
+ const res = await this.$api.requested(this.params)
|
|
|
+ this.tableData = res.data
|
|
|
+ this.total = res.total
|
|
|
+ this.currentPage = res.pageNumber
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ // console.log(`每页 ${val} 条`);
|
|
|
+ this.params.content.pageSize = val
|
|
|
+ this.listData()
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ // console.log(`当前页: ${val}`);
|
|
|
+ this.params.content.pageNumber = val
|
|
|
+ this.listData()
|
|
|
+ },
|
|
|
+ selectionChange (val) {
|
|
|
+ this.tableSelectData = val
|
|
|
+ },
|
|
|
+ // 根据状态批量选择数据
|
|
|
+ selection (type) {
|
|
|
+ let arr = []
|
|
|
+ let soureData = []
|
|
|
+
|
|
|
+ // 判断是否是主动勾选数据,设置数据源
|
|
|
+ this.tableSelectData.length > 0 ? soureData = this.tableSelectData:soureData = this.tableData
|
|
|
+
|
|
|
+ if (type === 'check') {
|
|
|
+ arr = soureData.filter(e=>{
|
|
|
+ return e.status === '新建'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ arr = soureData.filter(e=>{
|
|
|
+ return e.status === '审核'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 若为主动勾选数据则不执行循环
|
|
|
+ this.tableSelectData.length > 0 ?'':arr.forEach(row => {
|
|
|
+ this.$refs.multipleTable.toggleRowSelection(row);
|
|
|
+ });
|
|
|
+ this.$emit('selectData',arr)
|
|
|
+ },
|
|
|
+ clearSelection () {
|
|
|
+ this.$refs.multipleTable.clearSelection();
|
|
|
}
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.listData()
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -151,4 +197,7 @@ export default {
|
|
|
/* box-shadow: 0 5px 5px rgb(0 0 0 / 10%);
|
|
|
transform: translate3d(0,-2px,0); */
|
|
|
}
|
|
|
+.image {
|
|
|
+ width:40px;height:40px;margin:0px auto;
|
|
|
+}
|
|
|
</style>
|