| | |
| | | <template> |
| | | <div> |
| | | <div class="body" :style="{height:mainHeight+'px'}"> |
| | | <div style="padding: 10px 5px 0 0"> |
| | | <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> |
| | | <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" @click="upload">导入</el-button> |
| | | </div> |
| | | <el-divider /> |
| | | |
| | | <div class="elTableDiv"> |
| | | <el-table |
| | | ref="tableDataRef" |
| | | class="tableFixed" |
| | | :data="tableData" |
| | | :height="tableHeight+'px'" |
| | | :height="isExpandForm?tableHeight:(tableHeight+40)+'px'" |
| | | border |
| | | stripe |
| | | :style="{width: 100+'%',height:tableHeight+'px',}" |
| | | :row-class-name="tableRowClassName" |
| | | :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 |
| | | prop="lm_date" |
| | | label="创建时间" |
| | | width="160" |
| | | sortable="custom" |
| | | /> |
| | | <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> |
| | |
| | | </div> |
| | | <!--分页--> |
| | | <pagination |
| | | v-show="total>0" |
| | | :total="total" |
| | | :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 }) { |
| | | return 'custom-row' |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <!--公共页面样式--> |
| | | <style lang="scss" scoped> |
| | | $main_color: #42b983; |
| | | ::v-deep .el-button--primary { |
| | | background-color: $main_color !important; |
| | | height: 30px; |
| | | display: flex; |
| | | align-items: center; |
| | | //border: 1px solid $main_color; |
| | | border: none; |
| | | padding: 0 20px; |
| | | ::v-deep .el-button--text{ |
| | | font-size: 14px ; |
| | | cursor: pointer ; |
| | | } |
| | | ::v-deep .el-button--primary:hover { |
| | | border: none; |
| | | .el-icon-share ,.el-icon-delete,.el-icon-edit-outline{ |
| | | color: $main_color; |
| | | cursor: pointer; |
| | | } |
| | | ::v-deep .el-button--info { |
| | | height: 30px; |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 0 20px; |
| | | .el-icon-edit-outline{ |
| | | margin-right: 15px; |
| | | } |
| | | |
| | | ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active { |
| | | background-color: $main_color !important; |
| | | ::v-deep .el-button--primary, .el-button--default, .el-button--info { |
| | | height: 34px; |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 0 15px; |
| | | } |
| | | |
| | | ::v-deep .el-button--primary { |
| | | //background-color: $main_color !important; |
| | | } |
| | | |
| | | ::v-deep .el-button--default { |
| | | background-color: #f8f8fa; |
| | | border: none; |
| | | } |
| | | |
| | | ::v-deep .el-input__inner { |
| | | height: 34px; |
| | | line-height: 34px; |
| | | //color: #a7a7a7; |
| | | } |
| | | |
| | | ::v-deep .el-dialog__body { |
| | | padding: 20px 100px !important; |
| | | } |
| | | |
| | | ::v-deep .dialogVisibleRoles .el-dialog__body { |
| | | padding: 20px 20px !important; |
| | | } |
| | | |
| | | ::v-deep .importPickerClass .el-dialog__body { |
| | | padding: 20px 20px !important; |
| | | } |
| | | |
| | | ::v-deep .el-dialog__footer { |
| | |
| | | justify-content: flex-end; |
| | | } |
| | | |
| | | .footerButton { |
| | | display: flex; |
| | | justify-content: end; |
| | | } |
| | | |
| | | ::v-deep .el-button--default { |
| | | background-color: #ffffff !important; |
| | | height: 30px; |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 0 20px; |
| | | } |
| | | |
| | | ::v-deep .el-button--default:hover { |
| | | color: #606266; |
| | | } |
| | | |
| | | ::v-deep .el-dialog__body { |
| | | padding: 20px 100px !important; |
| | | } |
| | | |
| | | ::v-deep .el-radio__input.is-checked .el-radio__inner { |
| | | background-color: $main_color; |
| | | border-color: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-radio__input.is-checked + .el-radio__label { |
| | | color: $main_color !important; |
| | | } |
| | | |
| | | ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner { |
| | | border-color: $main_color; |
| | | background-color: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-input__inner { |
| | | height: 30px; |
| | | line-height: 30px; |
| | | } |
| | | ::v-deep .el-input__inner:focus { |
| | | border-color: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-table .caret-wrapper { |
| | | transform: scale(0.8); |
| | | } |
| | | |
| | | ::v-deep .cell { |
| | | display: flex !important; |
| | | align-items: center !important; |
| | | justify-content: space-between !important; |
| | | } |
| | | |
| | | ::v-deep .el-button--text { |
| | | color: $main_color; |
| | | font-size: 14px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .operationClass { |
| | | height: 23px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .el-icon-share { |
| | | color: $main_color; |
| | | cursor: pointer; |
| | | ::v-deep .el-table::before { |
| | | height: 0; |
| | | } |
| | | |
| | | .el-checkbox.is-bordered.is-checked { |
| | | border-color: $main_color; |
| | | ::v-deep .el-table__body-wrapper { |
| | | background-color: #f8f8fa; |
| | | } |
| | | |
| | | ::v-deep .el-radio__input.is-checked .el-radio__inner { |
| | | border-color: $main_color; |
| | | background: $main_color; |
| | | ::v-deep .el-table__body .el-table__row.hover-row td{ |
| | | background-color: #eaecef ; |
| | | } |
| | | |
| | | ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner { |
| | | border-color: $main_color; |
| | | background: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label { |
| | | color: $main_color !important; |
| | | } |
| | | |
| | | ::v-deep .el-checkbox.is-bordered + .el-checkbox.is-bordered { |
| | | margin: 10px 30px 0px 0; |
| | | } |
| | | |
| | | ::v-deep .el-radio__input.is-checked + .el-radio__label { |
| | | color: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-radio.is-bordered + .el-radio.is-bordered { |
| | | margin: 10px 30px 0px 0; |
| | | ::v-deep .el-form--inline .el-form-item__label { |
| | | color: #a7a7a7; |
| | | } |
| | | |
| | | .body ::v-deep .el-divider { |
| | |
| | | margin-bottom: 0; |
| | | } |
| | | |
| | | ::v-deep .el-input__inner:focus { |
| | | border-color: $main_color; |
| | | .userDialogVisible ::v-deep .el-form-item { |
| | | margin-bottom: 0; |
| | | } |
| | | |
| | | ::v-deep .el-select .el-input__inner:focus{ |
| | | border-color: $main_color; |
| | | ::v-deep .el-select__caret{ |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | ::v-deep .el-select-dropdown__item.selected{ |
| | | color: $main_color; |
| | | .tableFixed{ |
| | | ::v-deep .el-table__fixed-right{ |
| | | height: 100% !important; |
| | | } |
| | | ::v-deep .el-table__fixed{ |
| | | height: 100% !important; |
| | | } |
| | | } |
| | | ::v-deep .el-checkbox__inner:hover{ |
| | | border-color: $main_color; |
| | | } |
| | | ::v-deep .el-textarea__inner:focus{ |
| | | border-color: $main_color; |
| | | } |
| | | </style> |
| | | <style> |
| | | |
| | | .el-table .custom-row { |
| | | background: #f8f8fa; |
| | | } |
| | | </style> |