| | |
| | | :data="tableList.tableData" |
| | | style="width: 100%" |
| | | :header-cell-style="{ background: '#f1f3f8', color: '#000009' }" |
| | | :row-class-name="tableRowClassName" |
| | | @row-click="tableRowClick" |
| | | > |
| | | <el-table-column v-if="tableList.selectBox" type="selection" width="40" align="center"> </el-table-column> |
| | | <el-table-column v-if="tableList.selectIndex" type="index" label="序号" width="50"> </el-table-column> |
| | | <el-table-column |
| | | v-for="(item, i) in tableList.tableColumn" |
| | | :key="i" |
| | |
| | | :prop="'tableData.' + scope.$index + '.' + item.prop" |
| | | :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]" |
| | | > |
| | | <el-date-picker v-model="scope.row[item.prop]" type="date" size="mini" style="width: 110px"> |
| | | <span v-if="scope.row.isEdit">{{ scope.row[item.prop] }}</span> |
| | | <el-date-picker v-else v-model="scope.row[item.prop]" type="date" size="mini" style="width: 110px"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item |
| | |
| | | :prop="'tableData.' + scope.$index + '.' + item.prop" |
| | | :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]" |
| | | > |
| | | <span v-if="scope.row.isEdit">{{ scope.row[item.prop] }}</span> |
| | | <el-input-number |
| | | v-else |
| | | v-model="scope.row[item.prop]" |
| | | placeholder="" |
| | | :min="0" |
| | |
| | | </el-select> |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 位置 --> |
| | | <el-form-item v-else-if="item.location" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <div class="custom-name"> |
| | | <span v-if="scope.row.isEdit">{{ scope.row[item.prop] }}</span> |
| | | <el-select |
| | | v-else |
| | | v-model="scope.row[item.prop]" |
| | | placeholder="请选择" |
| | | size="mini" |
| | | style="width: 80%" |
| | | @change="selLocationClick" |
| | | > |
| | | <el-option v-for="item in selLocationOptions" :key="item.id" :label="item.name" :value="item.name"> |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 产品 --> |
| | | <el-form-item v-else-if="item.product" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <div class="custom-name"> |
| | | <span v-if="scope.row.isEdit">{{ scope.row[item.prop] }}</span> |
| | | <el-select |
| | | v-else |
| | | v-model="scope.row[item.prop]" |
| | | placeholder="请选择" |
| | | size="mini" |
| | | style="width: 80%" |
| | | @change=" |
| | | (val) => { |
| | | selProductClick(val) |
| | | } |
| | | " |
| | | > |
| | | <el-option |
| | | v-for="item in productNameOptions" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="{ value: item.id, label: item.name, amount: item.amount, unit: item.unit }" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 用户 --> |
| | | <el-form-item v-else-if="item.user" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <div class="custom-name"> |
| | | <span>{{ "管理员" }}</span> |
| | | <!-- <el-select |
| | | v-else |
| | | v-model="scope.row[item.prop]" |
| | | placeholder="请选择" |
| | | size="mini" |
| | | style="width: 80%" |
| | | @change="selCommonClick" |
| | | > |
| | | <el-option v-for="item in memberOptions" :key="item.id" :label="item.name" :value="item.name"> |
| | | </el-option> |
| | | </el-select> --> |
| | | </div> |
| | | </el-form-item> |
| | | <!-- 公司 --> |
| | | <el-form-item v-else-if="item.company" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop"> |
| | | <div class="custom-name"> |
| | | <span v-if="scope.row.isEdit">{{ scope.row[item.prop] }}</span> |
| | | <el-select v-else v-model="scope.row[item.prop]" placeholder="请选择" size="mini" style="width: 80%"> |
| | | <el-option v-for="item in companyOptions" :key="item.id" :label="item.name" :value="item"> |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | </el-form-item> |
| | | <span v-else>{{ scope.row[item.prop] }}</span> |
| | | </template> |
| | | <span v-else>{{ scope.row[item.prop] }}</span> |
| | |
| | | <slot name="tableButton" /> |
| | | </el-table> |
| | | </el-form> |
| | | <div v-if="!detailEnter" style="margin: 10px"> |
| | | <div v-if="!detailEnter && !isinventory && !islistingrules" style="margin: 10px"> |
| | | <el-button size="small" type="primary" @click="add">添加明细行</el-button> |
| | | <!-- <el-button size="small" type="primary" @click="empty">清空</el-button> --> |
| | | </div> |
| | |
| | | |
| | | <script> |
| | | import { getProductList } from "@/api/product/product" |
| | | import { getLocationList } from "@/api/warehouseManage/warehouse" |
| | | import { getCompanyList } from "@/api/common/other" |
| | | // import SelectCommonDialog from "@/views/other/commonDialog/SelectCommonDialog" |
| | | export default { |
| | | name: "CommmonFormTableView", |
| | |
| | | type: Object, |
| | | default: () => { |
| | | return { |
| | | selectBox: false, |
| | | selectIndex: false, |
| | | tableData: [], // 接口返回数据 |
| | | tableColumn: [ |
| | | // table表单 |
| | |
| | | ] |
| | | } |
| | | } |
| | | }, |
| | | isinventory: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | islistingrules: { |
| | | type: Boolean, |
| | | default: false |
| | | } |
| | | }, |
| | | data() { |
| | |
| | | }, |
| | | productIndex: 0, |
| | | productNameOptions: [], |
| | | memberOptions: [{ id: 1, name: "管理员" }], |
| | | selOptions: [ |
| | | { id: 1, name: "件" }, |
| | | { id: 2, name: "打" } |
| | | ] |
| | | ], |
| | | selLocationOptions: [], // 位置 |
| | | companyOptions: [] // 公司 |
| | | } |
| | | }, |
| | | created() { |
| | | this.getProductList() |
| | | if (this.isinventory) { |
| | | this.getLocationList() |
| | | } |
| | | if (this.islistingrules) { |
| | | this.getLocationList() |
| | | this.getCompanyList() |
| | | } |
| | | this.tableList = this.productTableList |
| | | }, |
| | | computed: {}, |
| | |
| | | } |
| | | }) |
| | | }, |
| | | // 位置 |
| | | async getLocationList() { |
| | | await getLocationList({ |
| | | keyword: "", |
| | | page: 1, |
| | | pageSize: 100 |
| | | }).then((res) => { |
| | | if (res.code === 200) { |
| | | const list = res.data ? res.data : [] |
| | | this.selLocationOptions = list |
| | | } |
| | | }) |
| | | }, |
| | | // 获取公司列表 |
| | | async getCompanyList() { |
| | | await getCompanyList().then((res) => { |
| | | console.log(res) |
| | | if (res.data.code === 200) { |
| | | this.companyOptions = res.data.data |
| | | } |
| | | }) |
| | | }, |
| | | // 选择产品 |
| | | selProductClick(item) { |
| | | this.tableList.tableData.map((ite) => { |
| | |
| | | }) |
| | | console.log(this.tableList.tableData) |
| | | }, |
| | | // 选择单位 |
| | | // 选择位置 |
| | | selLocationClick(item) { |
| | | console.log(item) |
| | | console.log(this.tableList.tableData) |
| | | // this.tableList.tableData.map((ite) => { |
| | | // if (ite.location.label === item.label) { |
| | | // ite.location = item.label |
| | | // } |
| | | // if (ite.subLocation.label === item.label) { |
| | | // ite.subLocation = item.label |
| | | // } |
| | | // }) |
| | | }, |
| | | // 选择单位/用户 |
| | | selCommonClick(item) { |
| | | console.log(item) |
| | | }, |
| | |
| | | return true |
| | | } |
| | | this.tableList.tableData.splice(scope.$index, 1) |
| | | }, |
| | | // 行点击 |
| | | tableRowClick(row) { |
| | | this.$emit("tableRowClick", row, row.index) |
| | | }, |
| | | // 单选行相关 |
| | | tableRowClassName({ row, rowIndex }) { |
| | | row.index = rowIndex |
| | | } |
| | | } |
| | | } |
| | |
| | | margin-bottom: 0; |
| | | .custom-name { |
| | | display: flex; |
| | | justify-content: center; |
| | | .common-select-btn { |
| | | margin-left: 5px; |
| | | font-size: 18px; |