| | |
| | | <template> |
| | | <div class="page-view"> |
| | | <el-form ref="form" :model="tableList" :show-message="false" label-position="right"> |
| | | <el-table |
| | | :data="tableList.tableData" |
| | | style="width: 100%" |
| | | :show-summary="showSummary.show" |
| | | :summary-method="getSummaries" |
| | | :span-method="arraySpanMethod" |
| | | <el-table |
| | | :data="tableList.tableData" |
| | | style="width: 100%" |
| | | :show-summary="showSummary.show" |
| | | :summary-method="getSummaries" |
| | | :span-method="arraySpanMethod" |
| | | @row-click="rowClick" |
| | | > |
| | | <el-table-column |
| | | type="index" |
| | | v-if="tableList.tableColumn && tableList.tableColumn.length > 0" |
| | | label="编号" |
| | | width="50" |
| | | align="center" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | v-for="(item, i) in tableList.tableColumn" |
| | | :key="i" |
| | | :prop="item.prop" |
| | | :label="item.label" |
| | | :width="item.width" |
| | | :min-width="item.min" |
| | | align="center" |
| | | > |
| | | <el-table-column type="index" v-if="tableList.tableColumn && tableList.tableColumn.length > 0" label="编号" |
| | | width="50" align="center"></el-table-column> |
| | | <el-table-column v-for="(item, i) in tableList.tableColumn" :key="i" :prop="item.prop" :label="item.label" |
| | | :width="item.width" :min-width="item.min" align="center"> |
| | | <!-- 表头样式 --> |
| | | <template slot="header"> |
| | | <span v-if="item.isRequird" style="color: #f56c6c">*</span> |
| | |
| | | <!-- column样式 --> |
| | | <template slot-scope="scope"> |
| | | <!-- <template v-if="!detailEnter"> --> |
| | | <el-form-item |
| | | v-if="item.input" |
| | | label=" " |
| | | :prop="'tableData.' + scope.$index + '.' + item.prop" |
| | | :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]" |
| | | > |
| | | <el-input |
| | | :disabled="item.disabled" |
| | | v-model.trim="scope.row[item.prop]" |
| | | maxlength="50" |
| | | size="mini" |
| | | @change=" |
| | | (val) => { |
| | | commonInputChange(val, item.prop, scope.row) |
| | | } |
| | | " |
| | | ></el-input> |
| | | <el-form-item v-if="item.input" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop" |
| | | :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"> |
| | | <el-input :disabled="item.disabled" v-model.trim="scope.row[item.prop]" maxlength="50" size="mini" @change="(val) => { |
| | | commonInputChange(val, item.prop, scope.row) |
| | | } |
| | | "></el-input> |
| | | </el-form-item> |
| | | <el-form-item v-else-if="item.productName" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <el-form-item v-else-if="item.productName" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <div class="custom-name"> |
| | | <el-autocomplete |
| | | :disabled="item.disabled" |
| | | v-model="scope.row[item.prop]" |
| | | :fetch-suggestions="querySearchAsync" |
| | | value-key="name" |
| | | style="width: calc(100% - 70px)" |
| | | size="mini" |
| | | @select=" |
| | | (val) => { |
| | | handleSelectClient(val, item.prop, scope.row) |
| | | } |
| | | " |
| | | ></el-autocomplete> |
| | | <el-autocomplete :disabled="item.disabled" v-model="scope.row[item.prop]" |
| | | :fetch-suggestions="querySearchAsync" value-key="name" style="width: calc(100% - 70px)" size="mini" |
| | | @select="(val) => { |
| | | handleSelectClient(val, item.prop, scope.row) |
| | | } |
| | | "></el-autocomplete> |
| | | <div v-if="!item.disabled" class="common-select-btn" @click="selClientClick(scope.row, item.prop, scope)"> |
| | | <i class="el-icon-circle-plus-outline" title="选择"></i> |
| | | <i class="el-icon-circle-plus-outline" title="选择"></i> |
| | | </div> |
| | | <div v-if="!item.disabled" class="common-select-btn" @click="clearupClient(scope.row, scope)"> |
| | | <i class="el-icon-remove-outline" title="清除"></i> |
| | | </div> |
| | | <div class="common-select-btn" v-if="scope.$index != 0||!item.disabled" @click="deleteClient(scope.row, scope)"> |
| | | <div class="common-select-btn" v-if="scope.$index != 0 || !item.disabled" |
| | | @click="deleteClient(scope.row, scope)"> |
| | | <i class="el-icon-delete" title="删除"></i> |
| | | </div> |
| | | </div> |
| | | </el-form-item> |
| | | <el-form-item |
| | | v-else-if="item.date" |
| | | label=" " |
| | | :prop="'tableData.' + scope.$index + '.' + item.prop" |
| | | :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]" |
| | | > |
| | | <el-form-item v-else-if="item.date" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop" |
| | | :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"> |
| | | <!-- <el-input v-model.trim="scope.row[item.prop]" maxlength="50" size="mini"></el-input> --> |
| | | <el-date-picker v-model="scope.row[item.prop]" type="date" size="mini" style="width: 110px"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item |
| | | v-else-if="item.inputNumber" |
| | | label=" " |
| | | :prop="'tableData.' + scope.$index + '.' + item.prop" |
| | | :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]" |
| | | > |
| | | <el-input-number |
| | | :disabled="item.disabled" |
| | | v-model="scope.row[item.prop]" |
| | | placeholder="" |
| | | :min="0" |
| | | :controls="false" |
| | | size="mini" |
| | | style="width: 100%; margin-right: 5px" |
| | | @change=" |
| | | (val) => { |
| | | <el-form-item v-else-if="item.inputNumber" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop" |
| | | :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"> |
| | | <el-input-number :disabled="item.disabled" v-model="scope.row[item.prop]" placeholder="" :min="0" |
| | | :controls="false" size="mini" style="width: 100%; margin-right: 5px" @change="(val) => { |
| | | commonInputChange(val, item.prop, scope.row) |
| | | } |
| | | "></el-input-number> |
| | | </el-form-item> |
| | | <el-form-item v-else-if="item.inputFloat" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop" |
| | | :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"> |
| | | <!-- 采购管理 --> |
| | | <template v-if="item.multiply"> |
| | | <el-input-number :disabled="item.disabled" |
| | | :value="scope.row[showSummary.multiply[0]] * scope.row[showSummary.multiply[1]]" placeholder="" :min="0" |
| | | :precision="2" :controls="false" size="mini" style="width: 100%; margin-right: 5px" @input="(val) => { |
| | | commonInputChange(val, item.prop, scope.row) |
| | | } |
| | | " |
| | | ></el-input-number> |
| | | </el-form-item> |
| | | <el-form-item |
| | | v-else-if="item.inputFloat" |
| | | label=" " |
| | | :prop="'tableData.' + scope.$index + '.' + item.prop" |
| | | :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]" |
| | | > |
| | | <!-- 采购管理 --> |
| | | <template v-if="item.multiply"> |
| | | <el-input-number |
| | | :disabled="item.disabled" |
| | | :value="scope.row[showSummary.multiply[0]] * scope.row[showSummary.multiply[1]]" |
| | | placeholder="" |
| | | :min="0" |
| | | :precision="2" |
| | | :controls="false" |
| | | size="mini" |
| | | style="width: 100%; margin-right: 5px" |
| | | @input=" |
| | | (val) => { |
| | | commonInputChange(val, item.prop, scope.row) |
| | | } |
| | | " |
| | | ></el-input-number> |
| | | "></el-input-number> |
| | | </template> |
| | | <template v-else> |
| | | <el-input-number |
| | | :disabled="item.disabled" |
| | | v-model="scope.row[item.prop]" |
| | | placeholder="" |
| | | :min="0" |
| | | :precision="2" |
| | | :controls="false" |
| | | size="mini" |
| | | style="width: 100%; margin-right: 5px" |
| | | @change=" |
| | | (val) => { |
| | | commonInputChange(val, item.prop, scope.row) |
| | | } |
| | | " |
| | | ></el-input-number> |
| | | <el-input-number :disabled="item.disabled" v-model="scope.row[item.prop]" placeholder="" :min="0" |
| | | :precision="2" :controls="false" size="mini" style="width: 100%; margin-right: 5px" @change="(val) => { |
| | | commonInputChange(val, item.prop, scope.row) |
| | | } |
| | | "></el-input-number> |
| | | </template> |
| | | </el-form-item> |
| | | <span v-else>{{ scope.row[item.prop] }}</span> |
| | |
| | | <el-button :disabled="tableList.disabled" size="small" type="primary" @click="empty">清空</el-button> |
| | | </div> |
| | | <!-- 产品名称 --> |
| | | <SelectCommonDialog |
| | | v-if="editSelCommonConfig.editVisible" |
| | | :edit-common-config="editSelCommonConfig" |
| | | :sign="sign" |
| | | @selClient="selClient" |
| | | /> |
| | | <SelectCommonDialog v-if="editSelCommonConfig.editVisible" :edit-common-config="editSelCommonConfig" :sign="sign" |
| | | @selClient="selClient" /> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | type: Object, |
| | | default: () => { |
| | | return { |
| | | tableProductList:[], |
| | | disabled:false, |
| | | tableProductList: [], |
| | | disabled: false, |
| | | tableData: [], // 接口返回数据 |
| | | tableColumn: [ |
| | | // table表单 |
| | |
| | | infomation: {} |
| | | }, |
| | | productIndex: 0, |
| | | tableProductLists:[], |
| | | tableProductLists: [], |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | }, |
| | | }, |
| | | methods: { |
| | | // 选择行 |
| | | rowClick(row){ |
| | | this.$emit("rowClick",row) |
| | | }, |
| | | // 产品名称 |
| | | async getProductList() { |
| | | let fn = this.sign == "purchase" ? getProductList : getProductListFromGrpc |
| | |
| | | page: 1, |
| | | pageSize: 100 |
| | | }).then((res) => { |
| | | if (res.data.code === 200) { |
| | | if (res.data.data.list && res.data.data.list.length > 0) { |
| | | this.productList = res.data.data.list |
| | | this.tableProductLists = res.data.data.list |
| | | if (res.code === 200) { |
| | | if (res.data.list && res.data.list.length > 0) { |
| | | this.productList = res.data.list |
| | | this.tableProductLists = res.data.list |
| | | } |
| | | } |
| | | }) |
| | |
| | | } |
| | | }, |
| | | handleSelectClient(item, prop, row) { |
| | | // this.clientId = item.id |
| | | this.tableList.tableData.map((ite) => { |
| | | if (ite.name === item.name) { |
| | | ite.ID = row.ID |
| | |
| | | if (this.detailEnter) { |
| | | this.setEditName(item, row.ID) |
| | | } |
| | | this.$emit("handleProduct",item) |
| | | }, |
| | | setEditName(item, ID) { |
| | | let selRow = { |
| | |
| | | <style lang="scss" scoped> |
| | | .page-view { |
| | | min-width: 100px; |
| | | |
| | | .el-form-item { |
| | | margin-bottom: 0; |
| | | |
| | | .custom-name { |
| | | display: flex; |
| | | |
| | | .common-select-btn { |
| | | margin-left: 5px; |
| | | font-size: 18px; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | ::v-deep { |
| | | .el-form-item__label { |
| | | display: none; |
| | | } |
| | | |
| | | .el-table__footer-wrapper tbody td.el-table__cell { |
| | | background-color: #fff; |
| | | // text-align: right; |
| | | font-weight: bold; |
| | | } |
| | | |
| | | .el-input--suffix .el-input__inner { |
| | | padding-right: 0px; |
| | | } |
| | | |
| | | .el-table .cell, |
| | | .el-table th.el-table__cell > .cell { |
| | | .el-table th.el-table__cell>.cell { |
| | | padding: 0 5px; |
| | | } |
| | | |
| | | .el-input__inner { |
| | | text-align: left; |
| | | } |