| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div> |
| | | <div class="body" :style="{height:mainHeight+'px'}"> |
| | | <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> |
| | | </div> |
| | | |
| | | <div class="bodyTopFormGroup"> |
| | | <el-form |
| | | ref="form" |
| | | :model="form" |
| | | label-width="100px" |
| | | inline |
| | | style="display: flex;" |
| | | > |
| | | <div class="elForm"> |
| | | <el-form-item label="ç¼ç åç§°" style=" display: flex;"> |
| | | <el-input v-model="form.rightname" placeholder="请è¾å
¥" style="width: 200px" /> |
| | | </el-form-item> |
| | | <el-form-item label="åºå®å符" style=" display: flex;"> |
| | | <el-input v-model="form.prefix" placeholder="请è¾å
¥" style="width: 200px" /> |
| | | </el-form-item> |
| | | |
| | | </div> |
| | | <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"> |
| | | <!-- :row-class-name="tableRowClassName"--> |
| | | |
| | | <el-table |
| | | ref="tableDataRef" |
| | | class="tableFixed" |
| | | :data="tableData" |
| | | :height="isExpandForm?tableHeight:(tableHeight+40)+'px'" |
| | | border |
| | | :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 |
| | | prop="RowNum" |
| | | width="50" |
| | | fixed |
| | | label="åºå·" |
| | | /> |
| | | <el-table-column |
| | | prop="org_code" |
| | | label="ç¼ç " |
| | | sortable="custom" |
| | | /> |
| | | <el-table-column |
| | | prop="org_name" |
| | | label="ç¼ç åç§°" |
| | | sortable="custom" |
| | | /> |
| | | <el-table-column |
| | | prop="description" |
| | | label="ç±»å" |
| | | sortable="custom" |
| | | /> |
| | | <el-table-column |
| | | prop="parentorg_name" |
| | | label="åºå®å符" |
| | | sortable="custom" |
| | | /> |
| | | <el-table-column |
| | | prop="lm_user" |
| | | label="ç¼ç æ ¼å¼" |
| | | sortable="custom" |
| | | /> |
| | | <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-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> |
| | | </el-table> |
| | | </div> |
| | | <!--å页--> |
| | | <pagination |
| | | :total="total" |
| | | :page.sync="form.page" |
| | | :limit.sync="form.rows" |
| | | align="right" |
| | | layout="total,prev, pager, next,sizes" |
| | | popper-class="select_bottom" |
| | | @pagination="getEncodingRules" |
| | | /> |
| | | </div> |
| | | |
| | | <el-dialog |
| | | v-el-drag-dialog |
| | | :title="operation==='add'?'æ°å¢':'ç¼è¾'" |
| | | :visible.sync="dialogVisible" |
| | | width="800px" |
| | | :close-on-click-modal="false" |
| | | top="15vh" |
| | | @closed="handleClose" |
| | | @close="handleClose" |
| | | > |
| | | <el-form |
| | | ref="dialogForm" |
| | | inline |
| | | :rules="dialogFormRules" |
| | | style="display: flex;flex-direction: column" |
| | | :model="dialogForm" |
| | | label-width="80px" |
| | | > |
| | | <el-form-item label="èåç±»å" required> |
| | | <el-radio-group v-model="dialogForm.type" @change="radioChange"> |
| | | <el-radio label="PC" name="PC" /> |
| | | <el-radio label="APP" name="APP" /> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | <el-form-item label="èååç§°" required> |
| | | <el-cascader |
| | | ref="cascader" |
| | | :options="menuOptions" |
| | | filterable |
| | | :props="defaultProps" |
| | | :show-all-levels="false" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="åºå®å符" prop="prefix"> |
| | | <el-input v-model="dialogForm.prefix" style="width: 200px" /> |
| | | </el-form-item> |
| | | <el-form-item prop="filingdate" label="ç¼ç æ ¼å¼"> |
| | | <el-select |
| | | v-model="dialogForm.filingdate" |
| | | style="width: 200px" |
| | | placeholder="è¯·éæ©" |
| | | :popper-append-to-body="false" |
| | | > |
| | | <el-option |
| | | v-for="item in dateType" |
| | | :key="item.code" |
| | | :label="item.name" |
| | | :value="item.code" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="èªå¢ä½æ°" prop="incbit" required> |
| | | <el-input v-model="dialogForm.incbit" style="width: 200px" /> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="ç¼ç é¢è§"> |
| | | {{ encodingPre }} |
| | | <!-- <el-input v-model="dialogForm.OrgName" style="width: 200px" />--> |
| | | </el-form-item> |
| | | </el-form> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <div class="footerButton"> |
| | | <el-button v-waves @click="dialogVisibleCancel">å æ¶</el-button> |
| | | <el-button v-waves type="primary" @click="dialogVisibleConfirm">ç¡® å®</el-button> |
| | | </div> |
| | | </span> |
| | | </el-dialog> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import Pagination from '@/components/Pagination' |
| | | import { AddUpdateOrganization, DeleteOrganization, OrganizationSearch, PrentOrganization } from '@/api/basicSettings' |
| | | import { getCookie } from '@/utils/auth' |
| | | import { validateCode } from '@/utils/global' |
| | | import elDragDialog from '@/directive/el-drag-dialog' |
| | | import waves from '@/directive/waves' |
| | | import { LoginMenu } from '@/api/user' |
| | | import { CodeMenuSelect, EncodingRules, SaveEncodingRules } from '@/api/systemSetting' |
| | | import arrayToTree from 'array-to-tree' |
| | | |
| | | export default { |
| | | name: 'Zzjg', |
| | | components: { |
| | | Pagination |
| | | }, |
| | | directives: { elDragDialog, waves }, |
| | | data() { |
| | | return { |
| | | mouseHoverType: 'mouseout', |
| | | isExpandForm: false, |
| | | mainHeight: 0, |
| | | tableHeight: 0, |
| | | form: { |
| | | rightname: '', // ç¼ç åç§° |
| | | prefix: '', // åºå®å符 |
| | | prop: 'lm_date', // æåºå段 |
| | | order: 'desc', // æåºå段 |
| | | page: 1, // 第å 页 |
| | | rows: 20 // æ¯é¡µå¤å°æ¡ |
| | | }, |
| | | total: 10, |
| | | tableData: [], |
| | | dialogVisible: false, |
| | | dialogForm: { |
| | | type: 'PC', // èåç±»å |
| | | rightcode: '', // èåç¼ç |
| | | rightname: '', // èååç§° |
| | | incbit: '1', // èªå¢ä½æ° |
| | | filingdate: '', // ç¼ç æ ¼å¼ |
| | | prefix: ''// åºå®å符 |
| | | }, |
| | | encodingPre: '', // ç¼ç é¢è§ |
| | | dateType: [ |
| | | { name: 'å¹´ææ¥', code: 'YMD' }, |
| | | { name: 'å¹´æ', code: 'YM' }, |
| | | { name: 'å¹´', code: 'Y' } |
| | | ], |
| | | menuOptionsAll: [], |
| | | menuOptions: [], |
| | | defaultProps: { |
| | | expandTrigger: 'hover', |
| | | value: 'menucode', |
| | | label: 'menuname' |
| | | }, |
| | | operation: '', |
| | | dialogFormRules: { |
| | | prefix: [ |
| | | { required: true, message: '请è¾å
¥åºå®å符', trigger: ['blur', 'change'] } |
| | | ], |
| | | // OrgCode: [ |
| | | // { required: true, validator: validateCode, trigger: ['blur', 'change'] } |
| | | // ], |
| | | filingdate: [ |
| | | { required: true, message: 'è¯·éæ©ç¼ç æ ¼å¼', trigger: ['blur', 'change'] } |
| | | ], |
| | | incbit: [ |
| | | { required: true, message: '请è¾å
¥èªå¢ä½æ°', trigger: ['blur', 'change'] } |
| | | ] |
| | | |
| | | } |
| | | } |
| | | }, |
| | | watch: { |
| | | dialogForm: { |
| | | handler(newValue, oldValue) { |
| | | const date = new Date() |
| | | let newDate = '' |
| | | if (newValue.filingdate === 'YMD') { |
| | | newDate = date.getFullYear().toString().substring(2, 4) + '' + (date.getMonth() + 1 + '').padStart(2, '0') + '' + (date.getDate() + '').padStart(2, '0') |
| | | } else if (newValue.filingdate === 'YM') { |
| | | newDate = date.getFullYear().toString().substring(2, 4) + '' + (date.getMonth() + 1 + '').padStart(2, '0') |
| | | } else if (newValue.filingdate === 'Y') { |
| | | newDate = date.getFullYear().toString().substring(2, 4) + '' |
| | | } |
| | | this.encodingPre = newValue.prefix + '' + newDate + '' + (1 + '').padStart(newValue.incbit, '0') |
| | | }, |
| | | immediate: true, |
| | | deep: true |
| | | } |
| | | }, |
| | | created() { |
| | | this.getEncodingRules() |
| | | }, |
| | | mounted() { |
| | | window.addEventListener('resize', this.getHeight) |
| | | this.getHeight() |
| | | |
| | | this.getCodeMenuSelect() |
| | | }, |
| | | methods: { |
| | | async getCodeMenuSelect() { |
| | | const { data: res } = await CodeMenuSelect() |
| | | this.menuOptionsAll = arrayToTree(res, { |
| | | parentProperty: 'parent_id', |
| | | customID: 'menucode', |
| | | childrenProperty: 'children' |
| | | }) |
| | | this.menuOptions = this.menuOptionsAll.filter(i => i.type === this.dialogForm.type) |
| | | console.log(this.menuOptions, 2) |
| | | }, |
| | | radioChange() { |
| | | this.menuOptions = this.menuOptionsAll.filter(i => i.type === this.dialogForm.type) |
| | | }, |
| | | async getEncodingRules() { |
| | | const res = await EncodingRules(this.form) |
| | | this.tableData = res.data |
| | | this.total = res.count |
| | | }, |
| | | // æåºæ¹åæ¶ |
| | | sortChange({ column, prop, order }) { |
| | | if (order === 'descending') { |
| | | order = 'desc' |
| | | } else if (order === 'ascending') { |
| | | order = 'asc' |
| | | } else { |
| | | order = 'desc' |
| | | } |
| | | this.form.order = order |
| | | this.form.prop = prop |
| | | this.getEncodingRules() |
| | | }, |
| | | // æ¥è¯¢ |
| | | search() { |
| | | this.getEncodingRules() |
| | | }, |
| | | // éç½® |
| | | reset() { |
| | | this.form.rightname = '' |
| | | this.form.prefix = '' |
| | | this.getEncodingRules() |
| | | }, |
| | | |
| | | // æ°å¢æé® |
| | | add(operation) { |
| | | this.operation = operation |
| | | this.dialogVisible = true |
| | | }, |
| | | // ä¿®æ¹æé® |
| | | edit(operation, row) { |
| | | this.operation = operation |
| | | this.dialogVisible = true |
| | | |
| | | this.$nextTick(() => { |
| | | this.dialogForm.OrgCode = row.org_code |
| | | this.dialogForm.OrgName = row.org_name |
| | | this.dialogForm.SupUnit = row.parent_id |
| | | }) |
| | | }, |
| | | // å é¤æé® |
| | | async del(row) { |
| | | this.$confirm('æ¯å¦ç¡®è®¤å é¤?', 'æç¤º', { |
| | | confirmButtonText: 'ç¡®å®', |
| | | cancelButtonText: 'åæ¶', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | 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.getEncodingRules() |
| | | } |
| | | }) |
| | | }).catch(() => { |
| | | this.$message.info('已忶å é¤') |
| | | }) |
| | | }, |
| | | // å¯¹è¯æ¡å
³éäºä»¶ |
| | | handleClose() { |
| | | this.dialogForm.rightcode = '' |
| | | this.dialogForm.rightname = '' |
| | | this.dialogForm.incbit = '1' |
| | | this.dialogForm.filingdate = '' |
| | | this.dialogForm.prefix = '' |
| | | this.$refs.cascader.checkedValue = '' |
| | | this.$refs.dialogForm.clearValidate() |
| | | }, |
| | | // å¯¹è¯æ¡åæ¶ |
| | | dialogVisibleCancel() { |
| | | this.dialogVisible = false |
| | | }, |
| | | // å¯¹è¯æ¡ç¡®è®¤ |
| | | dialogVisibleConfirm() { |
| | | this.$refs.dialogForm.validate(valid => { |
| | | if (valid) { |
| | | const rightcode = this.$refs.cascader.checkedValue[ this.$refs.cascader.checkedValue.length - 1] |
| | | this.dialogForm.rightcode = rightcode |
| | | this.dialogForm.rightname = this.menuOptions[this.menuOptions.findIndex(i => i.menucode === this.$refs.cascader.checkedValue[0])].children.find(i => i.menucode === rightcode).menuname |
| | | |
| | | SaveEncodingRules(this.dialogForm).then(res => { |
| | | if (res.code === '200') { |
| | | this.$notify.success(this.operation === 'add' ? 'æ·»å æåï¼' : 'ä¿®æ¹æåï¼') |
| | | this.dialogVisible = false |
| | | this.getEncodingRules() |
| | | } else { |
| | | this.$notify.error(this.operation === 'add' ? 'æ·»å 失败ï¼' : 'ä¿®æ¹å¤±è´¥ï¼') |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | // è·å页é¢é«åº¦ |
| | | getHeight() { |
| | | this.$nextTick(() => { |
| | | 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--text{--> |
| | | <!-- font-size: 14px ;--> |
| | | <!-- cursor: pointer ;--> |
| | | <!--}--> |
| | | <!--.el-icon-share ,.el-icon-delete,.el-icon-edit-outline{--> |
| | | <!-- color: $main_color;--> |
| | | <!-- cursor: pointer;--> |
| | | <!--}--> |
| | | <!--.el-icon-edit-outline{--> |
| | | <!-- margin-right: 15px;--> |
| | | <!--}--> |
| | | |
| | | <!--::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 {--> |
| | | <!-- display: flex;--> |
| | | <!-- justify-content: flex-end;--> |
| | | <!--}--> |
| | | |
| | | <!--::v-deep .el-table .caret-wrapper {--> |
| | | <!-- transform: scale(0.8);--> |
| | | <!--}--> |
| | | |
| | | <!--::v-deep .cell {--> |
| | | <!-- display: flex;--> |
| | | <!-- align-items: center;--> |
| | | <!-- justify-content: space-between;--> |
| | | <!--}--> |
| | | |
| | | <!--::v-deep .el-table::before {--> |
| | | <!-- height: 0;--> |
| | | <!--}--> |
| | | |
| | | <!--::v-deep .el-table__body-wrapper {--> |
| | | <!-- background-color: #f8f8fa;--> |
| | | <!--}--> |
| | | |
| | | <!--::v-deep .el-table__body .el-table__row.hover-row td{--> |
| | | <!-- background-color: #eaecef ;--> |
| | | <!--}--> |
| | | |
| | | <!--::v-deep .el-form--inline .el-form-item__label {--> |
| | | <!-- color: #a7a7a7;--> |
| | | <!--}--> |
| | | |
| | | <!--.body ::v-deep .el-divider {--> |
| | | <!-- border: 1px solid #eee;--> |
| | | <!-- width: 99%;--> |
| | | <!-- margin: 10px auto;--> |
| | | <!--}--> |
| | | |
| | | <!--.body ::v-deep .el-form-item {--> |
| | | <!-- margin-bottom: 0;--> |
| | | <!--}--> |
| | | |
| | | <!--.userDialogVisible ::v-deep .el-form-item {--> |
| | | <!-- 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>--> |
| | | |
| | | <!--.el-table .custom-row {--> |
| | | <!-- background: #f8f8fa;--> |
| | | <!--}--> |
| | | <!--</style>--> |