| | |
| | | <template> |
| | | <div> |
| | | <div class="body" :style="{height:mainHeight+'px'}"> |
| | | <div class="bodyTopButtonGroup"> |
| | | <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button> |
| | | <el-button icon="el-icon-upload2" @click="upload">导入</el-button> |
| | | <div class="bodyTopButtonGroup" style="justify-content: space-between"> |
| | | <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button> |
| | | <el-button v-waves icon="el-icon-download" @click="upload">导入</el-button> |
| | | </div> |
| | | |
| | | <div class="bodyTopFormGroup"> |
| | | <el-form |
| | | ref="form" |
| | | :model="form" |
| | | label-width="80px" |
| | | label-width="100px" |
| | | inline |
| | | style="display: flex;justify-content: space-between" |
| | | style="display: flex;" |
| | | > |
| | | <div class="elForm"> |
| | | <el-form-item label="组织编码" style=" display: flex;"> |
| | | <el-form-item label="母件编码" style=" display: flex;"> |
| | | <el-input v-model="form.OrgCode" placeholder="请输入" style="width: 200px" /> |
| | | </el-form-item> |
| | | <el-form-item label="组织名称" style=" display: flex;"> |
| | | <el-form-item label="母件名称" style=" display: flex;"> |
| | | <el-input v-model="form.OrgName" placeholder="请输入" style="width: 200px" /> |
| | | </el-form-item> |
| | | <el-form-item label="组织类型" style=" display: flex;"> |
| | | <el-select v-model="form.OrgType" :popper-append-to-body="false" style="width: 200px" placeholder="请选择"> |
| | | <el-form-item label="母件规格" style=" display: flex;"> |
| | | <el-input v-model="form.OrgName" placeholder="请输入" style="width: 200px" /> |
| | | </el-form-item> |
| | | <el-form-item label="启用状态" style=" display: flex;"> |
| | | <el-select v-model="form.OrgType" style="width: 200px" placeholder="请选择"> |
| | | <el-option |
| | | v-for="item in OrgTypeArr" |
| | | :key="item.code" |
| | |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="创建人员" style=" display: flex;"> |
| | | <el-form-item v-show="isExpandForm" label="版本编号" style=" display: flex;"> |
| | | <el-input v-model="form.OrgName" placeholder="请输入" style="width: 200px" /> |
| | | </el-form-item> |
| | | <el-form-item v-show="isExpandForm" label="创建人员" style=" display: flex;"> |
| | | <el-input v-model="form.UserName" style="width: 200px" placeholder="请输入" /> |
| | | </el-form-item> |
| | | <el-form-item v-show="isExpandForm" label="创建日期" style=" display: flex;"> |
| | | <el-date-picker |
| | | v-model="form.createdate" |
| | | style="width: 200px" |
| | | type="date" |
| | | placeholder="选择日期" |
| | | /> |
| | | </el-form-item> |
| | | </div> |
| | | <div style="display: flex;align-items: start;margin-top: 5px;z-index: 2"> |
| | | <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button> |
| | | <el-button type="info" icon="el-icon-refresh" @click="reset">重置</el-button> |
| | | <div class="bodySearchReset" :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"> |
| | | <el-button v-waves type="primary" icon="el-icon-search" @click="search">查询</el-button> |
| | | <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button> |
| | | </div> |
| | | </el-form> |
| | | <div |
| | | class="bodyTopFormExpand" |
| | | > |
| | | <svg-icon |
| | | v-show="mouseHoverType==='mouseout'" |
| | | style="cursor: pointer" |
| | | :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'" |
| | | @mouseenter="mouseHoverType=$event.type" |
| | | /> |
| | | <svg-icon |
| | | v-show="mouseHoverType==='mouseenter'" |
| | | style="cursor: pointer" |
| | | :icon-class="!isExpandForm?'doubleDown':'doubleUp'" |
| | | @click="isExpandForm=!isExpandForm" |
| | | @mouseout="mouseHoverType=$event.type" |
| | | /> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="elTableDiv"> |
| | | <el-table |
| | | ref="tableDataRef" |
| | | class="tableFixed" |
| | | :data="tableData" |
| | | :height="tableHeight+'px'" |
| | | :height="isExpandForm?tableHeight:(tableHeight+40)+'px'" |
| | | border |
| | | :row-class-name="tableRowClassName" |
| | | :style="{width: 100+'%',height:tableHeight+'px',}" |
| | | :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+40)+'px',}" |
| | | highlight-current-row |
| | | :header-cell-style="this.$headerCellStyle" |
| | | :cell-style="this.$cellStyle" |
| | | @sort-change="sortChange" |
| | | > |
| | | <!-- <el-table-column--> |
| | | <!-- type="selection"--> |
| | | <!-- width="50"--> |
| | | <!-- />--> |
| | | <el-table-column |
| | | prop="RowNum" |
| | | width="50" |
| | | fixed |
| | | label="序号" |
| | | /> |
| | | <el-table-column |
| | |
| | | prop="description" |
| | | label="组织类型" |
| | | sortable="custom" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.description==='F'">工厂</div> |
| | | <div v-if="row.description==='D'">部门</div> |
| | | <div v-if="row.description==='W'">车间</div> |
| | | <div v-if="row.description==='K'">科室</div> |
| | | <div v-if="row.description==='L'">生产线</div> |
| | | </template> |
| | | </el-table-column> |
| | | /> |
| | | <el-table-column |
| | | prop="parentorg_name" |
| | | label="上级单位" |
| | |
| | | /> |
| | | <el-table-column |
| | | label="操作" |
| | | width="120" |
| | | fixed="right" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div class="operationClass"> |
| | | <el-button type="text" @click="edit('edit',row)">编辑</el-button> |
| | | <el-button type="text" @click="del(row)">删除</el-button> |
| | | <el-tooltip class="item" effect="dark" content="编辑" placement="top"> |
| | | <i class="el-icon-edit-outline" @click="edit('edit',row)" /> |
| | | </el-tooltip> |
| | | <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top"> |
| | | <i class="el-icon-delete" @click="del(row)" /> |
| | | </el-tooltip> |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | :page.sync="form.page" |
| | | :limit.sync="form.rows" |
| | | align="right" |
| | | layout="prev, pager, next,sizes" |
| | | layout="total,prev, pager, next,sizes" |
| | | popper-class="select_bottom" |
| | | @pagination="getOrganizationSearch" |
| | | /> |
| | | </div> |
| | | |
| | | <el-dialog |
| | | v-el-drag-dialog |
| | | :title="operation==='add'?'新增':'编辑'" |
| | | :visible.sync="dialogVisible" |
| | | width="800" |
| | | width="800px" |
| | | :close-on-click-modal="false" |
| | | top="15vh" |
| | | @closed="handleClose" |
| | | @close="handleClose" |
| | |
| | | </el-form> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <div class="footerButton"> |
| | | <el-button @click="dialogVisibleCancel">取 消</el-button> |
| | | <el-button type="primary" @click="dialogVisibleConfirm">确 定</el-button> |
| | | <el-button v-waves @click="dialogVisibleCancel">取 消</el-button> |
| | | <el-button v-waves type="primary" @click="dialogVisibleConfirm">确 定</el-button> |
| | | </div> |
| | | </span> |
| | | </el-dialog> |
| | | |
| | | <!--导入组件--> |
| | | <import-picker ref="importPickerFunc" class="importPickerClass" :shows.sync="shows" :title="title_value" :colos="colos" :code="code" /> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import Pagination from '@/components/Pagination' |
| | | import { AddUpdateOrganization, DeleteOrganization, OrganizationSearch, PrentOrganization } from '@/api/jcsz' |
| | | import { AddUpdateOrganization, DeleteOrganization, OrganizationSearch, PrentOrganization } from '@/api/basicSettings' |
| | | import { getCookie } from '@/utils/auth' |
| | | import ImportPicker from '@/components/ImportPicker' |
| | | import { validateCode } from '@/utils/global' |
| | | import elDragDialog from '@/directive/el-drag-dialog' |
| | | import waves from '@/directive/waves' |
| | | |
| | | const SER_HZ = /^[\u4e00-\u9fa5]+$/ |
| | | export default { |
| | | name: 'Zzjg', |
| | | components: { |
| | | Pagination |
| | | Pagination, ImportPicker |
| | | }, |
| | | directives: { elDragDialog, waves }, |
| | | data() { |
| | | const validateName = (rule, value, callback) => { |
| | | if (!value) { |
| | | return callback(new Error('请输入编码')) |
| | | } else { |
| | | if (SER_HZ.test(value)) { |
| | | return callback(new Error('编码不能为中文')) |
| | | } else { |
| | | callback() |
| | | } |
| | | } |
| | | } |
| | | const validateTypeCode = (rule, value, callback) => { |
| | | if (!value) { |
| | | return callback(new Error('请选择上级')) |
| | | } else { |
| | | callback() |
| | | } |
| | | } |
| | | return { |
| | | mouseHoverType: 'mouseout', |
| | | isExpandForm: false, |
| | | mainHeight: 0, |
| | | tableHeight: 0, |
| | | form: { |
| | |
| | | OrgName: '', // 组织架构名称 |
| | | OrgType: '', // 组织类型 |
| | | UserName: '', // 创建人员 |
| | | createdate: '', |
| | | prop: 'lm_date', // 排序字段 |
| | | order: 'desc', // 排序字段 |
| | | page: 1, // 第几页 |
| | | rows: 20 // 每页多少条 |
| | | }, |
| | | OrgTypeArr: [ |
| | | { label: '工厂', value: 'F' }, |
| | | { label: '部门', value: 'D' }, |
| | | { label: '车间', value: 'W' }, |
| | | { label: '科室', value: 'K' }, |
| | | { label: '生产线', value: 'L' } |
| | | { label: '是', value: 'Y' }, |
| | | { label: '否', value: 'N' } |
| | | ], |
| | | |
| | | total: 10, |
| | |
| | | { required: true, message: '请输入选择类型', trigger: ['blur', 'change'] } |
| | | ], |
| | | OrgCode: [ |
| | | { required: true, validator: validateName, trigger: ['blur', 'change'] } |
| | | { required: true, validator: validateCode, trigger: ['blur', 'change'] } |
| | | ], |
| | | OrgName: [ |
| | | { required: true, message: '请输入名称', trigger: ['blur', 'change'] } |
| | | ], |
| | | SupUnit: [ |
| | | { required: true, validator: validateTypeCode, trigger: ['blur', 'change'] } |
| | | ] |
| | | } |
| | | |
| | | }, |
| | | |
| | | title_value: '数据导入 / 点检部位', |
| | | code: '4', |
| | | shows: false |
| | | |
| | | } |
| | | }, |
| | | watch: { |
| | | shows() { |
| | | if (!this.shows) { |
| | | this.getOrganizationSearch() |
| | | } |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | search() { |
| | | this.getOrganizationSearch() |
| | | }, |
| | | // 导入按钮 |
| | | upload() { |
| | | |
| | | this.shows = true |
| | | this.$refs.importPickerFunc.newDataFunc() |
| | | }, |
| | | colos() { |
| | | this.shows = false |
| | | }, |
| | | // 重置 |
| | | reset() { |
| | |
| | | DeleteOrganization({ orgid: row.code }).then(res => { |
| | | if (res.code === '200') { |
| | | this.$message.success('删除成功!') |
| | | if (this.form.page > 1 && this.tableData.length === 1) { |
| | | this.form.page-- |
| | | } |
| | | this.getOrganizationSearch() |
| | | } |
| | | }) |
| | |
| | | // 获取页面高度 |
| | | getHeight() { |
| | | this.$nextTick(() => { |
| | | this.mainHeight = window.innerHeight - 250 |
| | | this.tableHeight = this.mainHeight - 100 |
| | | this.mainHeight = window.innerHeight - 85 |
| | | this.tableHeight = this.mainHeight - 255 |
| | | this.$refs.tableDataRef.doLayout() |
| | | }) |
| | | }, |
| | | tableRowClassName({ row, rowIndex }) { |
| | |
| | | margin-bottom: 0; |
| | | } |
| | | |
| | | ::v-deep .el-select__caret{ |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .tableFixed{ |
| | | ::v-deep .el-table__fixed-right{ |
| | | height: 100% !important; |
| | | } |
| | | ::v-deep .el-table__fixed{ |
| | | height: 100% !important; |
| | | } |
| | | } |
| | | </style> |
| | | <style> |
| | | |