| | |
| | | <template> |
| | | <div> |
| | | <div class="body" style="background-color: #ffffff; padding: 20px 10px 0 20px;" :style="{height:mainHeight+'px'}"> |
| | | <div style="height: 50px;"> |
| | | <div class="body" :style="{height:mainHeight+'px'}"> |
| | | <div style="padding: 10px 5px 0 0"> |
| | | <el-form |
| | | ref="form" |
| | | :model="form" |
| | |
| | | inline |
| | | style="display: flex;justify-content: space-between" |
| | | > |
| | | <div style="display: flex;justify-content: space-around;width: 85%"> |
| | | <div class="elForm"> |
| | | <el-form-item label="单位编码" style=" display: flex;"> |
| | | <el-input v-model="form.CuntUnitCode" placeholder="请输入" style="width: calc(100%-30px)" /> |
| | | <el-input v-model="form.CuntUnitCode" placeholder="请输入" style="width: 200px" /> |
| | | </el-form-item> |
| | | <el-form-item label="单位名称" style=" display: flex;"> |
| | | <el-input v-model="form.CuntUnitName" placeholder="请输入" style="width: calc(100%-30px)" /> |
| | | <el-input v-model="form.CuntUnitName" placeholder="请输入" style="width: 200px" /> |
| | | </el-form-item> |
| | | <el-form-item label="单位属性" style=" display: flex;"> |
| | | <el-select v-model="form.UnitAttr" filterable style="width: calc(100%-30px)" placeholder="请选择"> |
| | | <el-select v-model="form.UnitAttr":popper-append-to-body="false" filterable style="width: 200px" placeholder="请选择"> |
| | | <el-option |
| | | v-for="item in UnitAttrArr" |
| | | :key="item.value" |
| | |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="创建人员" style=" display: flex;"> |
| | | <el-input v-model="form.CreateUser" style="width: calc(100%-30px)" placeholder="请输入" /> |
| | | <el-input v-model="form.CreateUser" style="width: 200px" placeholder="请输入" /> |
| | | </el-form-item> |
| | | </div> |
| | | <div style="display: flex;align-items: start;margin-top: 5px;z-index: 2"> |
| | |
| | | </div> |
| | | </el-form> |
| | | </div> |
| | | <div style="margin-bottom: 20px;display: flex"> |
| | | <el-divider /> |
| | | <div style="margin-left: 10px;display: flex"> |
| | | <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button> |
| | | <el-button type="primary" icon="el-icon-upload2">导入</el-button> |
| | | </div> |
| | | <!-- :style="{width: 100+'%',height:isCompatible?(tableHeight+'px'):'800px'}"--> |
| | | <div style="display: flex;border: 1px solid #eee"> |
| | | <el-divider /> |
| | | <div class="elTableDiv"> |
| | | <el-table |
| | | :data="tableData" |
| | | border |
| | | :height="tableHeight" |
| | | stripe |
| | | highlight-current-row |
| | | :header-cell-style="this.$headerCellStyle" |
| | | :cell-style="this.$cellStyle" |
| | |
| | | width="120" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.btype==='WX'">外斜供方</div> |
| | | <div v-if="row.btype==='WX'">外协供方</div> |
| | | <div v-else>/</div> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | <template slot-scope="{row}"> |
| | | <div class="operationClass"> |
| | | <el-button type="text" @click="edit('edit',row)">修改</el-button> |
| | | <el-button type="text" @click="del(row.id)">删除</el-button> |
| | | <el-button type="text" @click="del(row)">删除</el-button> |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | </div> |
| | | |
| | | <el-dialog |
| | | :title="operation==='add'?'添加':'修改'" |
| | | :title="operation==='add'?'新增':'修改'" |
| | | :visible.sync="dialogVisible" |
| | | width="50%" |
| | | top="15vh" |
| | | :close-on-click-modal="false" |
| | | @closed="handleClose" |
| | | @close="handleClose" |
| | | > |
| | | <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px"> |
| | | <el-form-item label="供方编码" prop="unitcode"> |
| | | <el-form-item label="单位编码" prop="unitcode"> |
| | | <el-input v-model="dialogForm.unitcode" :disabled="operation!=='add'" style="width: 220px" /> |
| | | </el-form-item> |
| | | <el-form-item label="供方名称" prop="unitname"> |
| | | <el-form-item label="单位名称" prop="unitname"> |
| | | <el-input v-model="dialogForm.unitname" style="width: 220px" /> |
| | | </el-form-item> |
| | | <el-form-item style="width: 100%" label="供方属性" prop="checkboxIsSelected"> |
| | | <el-form-item style="width: 100%" label="单位属性" prop="checkboxIsSelected"> |
| | | <el-checkbox-group v-model="dialogForm.checkboxIsSelected" @change="checkboxGroupChange"> |
| | | <el-checkbox key="WG" value="WG" label="外购供方" /> |
| | | <el-checkbox key="WX" value="WX" label="外协供方" /> |
| | |
| | | } |
| | | } |
| | | return { |
| | | isCompatible: false, // 是否兼容 |
| | | mainHeight: 0, |
| | | tableHeight: 0, |
| | | form: { |
| | |
| | | }) |
| | | }, |
| | | // 删除按钮 |
| | | async del(id) { |
| | | async del(row) { |
| | | this.$confirm('是否确认删除?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | DeleteCurrentUnit({ unitid: id }).then(res => { |
| | | DeleteCurrentUnit({ unitcode: row.code }).then(res => { |
| | | if (res.code === '200') { |
| | | this.$message.success('删除成功!') |
| | | this.getCurrentUnitSearch() |
| | |
| | | // 获取页面高度 |
| | | getHeight() { |
| | | this.$nextTick(() => { |
| | | this.mainHeight = window.innerHeight - 200 |
| | | this.mainHeight = window.innerHeight - 250 |
| | | this.tableHeight = this.mainHeight - 100 |
| | | }) |
| | | } |
| | |
| | | height: 30px; |
| | | display: flex; |
| | | align-items: center; |
| | | //border: 1px solid $main_color; |
| | | border: none; |
| | | padding: 0 20px; |
| | | } |
| | | |
| | | ::v-deep .el-button--primary:hover { |
| | | border: none; |
| | | } |
| | | ::v-deep .el-button--info { |
| | | //background-color: $main_color !important; |
| | | height: 30px; |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 0 20px; |
| | | } |
| | | ::v-deep .el-input__inner:focus { |
| | | border-color: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active { |
| | | background-color: $main_color !important; |
| | | } |
| | | |
| | | ::v-deep .el-dialog__footer { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | } |
| | | |
| | | .footerButton { |
| | |
| | | height: 30px; |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 0 20px; |
| | | } |
| | | |
| | | ::v-deep .el-button--default:hover { |
| | |
| | | ::v-deep .el-radio.is-bordered + .el-radio.is-bordered { |
| | | margin: 10px 30px 0px 0; |
| | | } |
| | | |
| | | .body ::v-deep .el-divider { |
| | | border: 1px solid #eee; |
| | | width: 99%; |
| | | margin: 10px auto; |
| | | } |
| | | |
| | | .body ::v-deep .el-form-item{ |
| | | margin-bottom: 0; |
| | | } |
| | | |
| | | ::v-deep .el-input__inner:focus { |
| | | border-color: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-select .el-input__inner:focus{ |
| | | border-color: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-select-dropdown__item.selected{ |
| | | color: $main_color; |
| | | } |
| | | ::v-deep .el-checkbox__inner:hover{ |
| | | border-color: $main_color; |
| | | } |
| | | ::v-deep .el-textarea__inner:focus{ |
| | | border-color: $main_color; |
| | | } |
| | | |
| | | </style> |