| | |
| | | <template> |
| | | <div> |
| | | <div class="body" style="background-color: #ffffff; padding: 20px 10px 0 20px;" :style="{height:mainHeight+'px'}"> |
| | | <div class="body" style="background-color: #ffffff; padding: 20px 10px 0 20px;"> |
| | | <div style="height: 50px;"> |
| | | <el-form |
| | | ref="form" |
| | |
| | | > |
| | | <div style="display: flex;justify-content: space-around;width: 85%"> |
| | | <el-form-item label="åä½ç¼ç " style=" display: flex;"> |
| | | <el-input v-model="form.OrgCode" placeholder="请è¾å
¥" style="width: calc(100%-30px)" /> |
| | | <el-input v-model="form.CuntUnitCode" placeholder="请è¾å
¥" style="width: calc(100%-30px)" /> |
| | | </el-form-item> |
| | | <el-form-item label="åä½åç§°" style=" display: flex;"> |
| | | <el-input v-model="form.OrgName" placeholder="请è¾å
¥" style="width: calc(100%-30px)" /> |
| | | <el-input v-model="form.CuntUnitName" placeholder="请è¾å
¥" style="width: calc(100%-30px)" /> |
| | | </el-form-item> |
| | | <el-form-item label="åä½å±æ§" style=" display: flex;"> |
| | | <el-select v-model="form.OrgType" style="width: calc(100%-30px)" placeholder="è¯·éæ©"> |
| | | <el-select v-model="form.UnitAttr" style="width: calc(100%-30px)" placeholder="è¯·éæ©"> |
| | | <el-option |
| | | v-for="item in OrgTypeArr" |
| | | v-for="item in UnitAttrArr" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="å建人å" style=" display: flex;"> |
| | | <el-input v-model="form.UserName" style="width: calc(100%-30px)" placeholder="请è¾å
¥" /> |
| | | <el-input v-model="form.CreateUser" style="width: calc(100%-30px)" placeholder="请è¾å
¥" /> |
| | | </el-form-item> |
| | | </div> |
| | | <div style="display: flex;align-items: start;margin-top: 5px;"> |
| | |
| | | <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-table |
| | | :data="tableData" |
| | | border |
| | | highlight-current-row |
| | | :style="{width: 100+'%',height:tableHeight+'px'}" |
| | | :header-cell-style="this.$headerCellStyle" |
| | | :cell-style="this.$cellStyle" |
| | | @sort-change="sortChange" |
| | |
| | | <!-- width="50"--> |
| | | <!-- />--> |
| | | <el-table-column |
| | | prop="id" |
| | | prop="RowNum" |
| | | width="50" |
| | | label="åºå·" |
| | | /> |
| | | <el-table-column |
| | | prop="org_code" |
| | | label="ç»ç»ç¼ç " |
| | | prop="code" |
| | | label="åä½ç¼ç " |
| | | sortable="custom" |
| | | /> |
| | | <el-table-column |
| | | prop="org_name" |
| | | label="ç»ç»åç§°" |
| | | prop="name" |
| | | label="åä½åç§°" |
| | | show-overflow-tooltip |
| | | sortable="custom" |
| | | min-width="200px" |
| | | /> |
| | | <el-table-column |
| | | prop="description" |
| | | label="ç»ç»ç±»å" |
| | | sortable="custom" |
| | | label="åä½å±æ§" |
| | | width="150" |
| | | > |
| | | <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> |
| | | <!-- sortable="custom"--> |
| | | |
| | | <el-table-column |
| | | prop="mtype" |
| | | width="120" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.mtype==='WG'">å¤è´ä¾æ¹</div> |
| | | <div v-else>/</div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="btype" |
| | | width="120" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.btype==='WX'">夿便¹</div> |
| | | <div v-else>/</div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="htype" |
| | | width="120" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.htype==='KH'">客æ·</div> |
| | | <div v-else>/</div> |
| | | </template> |
| | | </el-table-column> |
| | | <!-- <template slot-scope="{row}">--> |
| | | <!-- <div v-if="row.unitattribute==='WG'">å¤è´</div>--> |
| | | <!-- <div v-if="row.unitattribute==='WX'">å¤å</div>--> |
| | | <!-- <div v-if="row.unitattribute==='KH'">客æ·</div>--> |
| | | <!-- </template>--> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="parentorg_name" |
| | | label="ä¸çº§åä½" |
| | | prop="conttacts" |
| | | label="è系人" |
| | | sortable="custom" |
| | | /> |
| | | <el-table-column |
| | | prop="conttphone" |
| | | label="èç³»æ¹å¼" |
| | | sortable="custom" |
| | | /> |
| | | <el-table-column |
| | | prop="addr" |
| | | label="è¡¥å
æè¿°" |
| | | sortable="custom" |
| | | /> |
| | | <el-table-column |
| | |
| | | prop="lm_date" |
| | | label="å建æ¶é´" |
| | | sortable="custom" |
| | | width="200" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | label="æä½" |
| | |
| | | align="right" |
| | | layout="prev, pager, next,sizes" |
| | | popper-class="select_bottom" |
| | | @pagination="getOrganizationSearch" |
| | | @pagination="getCurrentUnitSearch" |
| | | /> |
| | | </div> |
| | | |
| | |
| | | @closed="handleClose" |
| | | @close="handleClose" |
| | | > |
| | | <el-form ref="dialogForm" :rules="dialogFormRules" :model="dialogForm" label-width="80px"> |
| | | <el-form-item label="ç»ç»ç±»å" prop="OrgType"> |
| | | <el-radio-group |
| | | v-model="dialogForm.OrgType" |
| | | style="display: flex;align-items: end;height: 29px;" |
| | | @change="changeRadio" |
| | | > |
| | | <el-radio |
| | | v-for="item in OrgTypeArr" |
| | | :key="item.value" |
| | | :value="item.value" |
| | | :label="item.label" |
| | | /> |
| | | </el-radio-group> |
| | | <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px"> |
| | | |
| | | <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="OrgCode"> |
| | | <el-input v-model="dialogForm.OrgCode" :disabled="operation!=='add'" style="width: 220px" /> |
| | | <el-form-item label="便¹åç§°" prop="unitname"> |
| | | <el-input v-model="dialogForm.unitname" style="width: 220px" /> |
| | | </el-form-item> |
| | | <el-form-item label="ç»ç»åç§°" prop="OrgName"> |
| | | <el-input v-model="dialogForm.OrgName" style="width: 220px" /> |
| | | <el-form-item style="width: 100%" label="便¹å±æ§" prop="checkboxIsSelected"> |
| | | <el-checkbox-group v-model="dialogForm.checkboxIsSelected" @change="checkboxGroupChange"> |
| | | <el-checkbox label="å¤è´ä¾æ¹" /> |
| | | <el-checkbox label="å¤å便¹" /> |
| | | <el-checkbox label="客æ·" /> |
| | | </el-checkbox-group> |
| | | </el-form-item> |
| | | <el-form-item v-if="dialogFormOrgTypeSelected!=='F'" prop="SupUnit" label="ä¸çº§åä½"> |
| | | <el-select |
| | | v-model="dialogForm.SupUnit" |
| | | style="width: 220px" |
| | | placeholder="è¯·éæ©" |
| | | > |
| | | <el-option |
| | | v-for="item in SupUnitArr" |
| | | :label="item.org_name" |
| | | :value="item.id" |
| | | /> |
| | | </el-select> |
| | | <el-form-item label="è系人" prop="person"> |
| | | <el-input v-model="dialogForm.person" style="width: 220px" /> |
| | | </el-form-item> |
| | | <el-form-item label="èç³»æ¹å¼" prop="contact"> |
| | | <el-input v-model="dialogForm.contact" style="width: 220px" /> |
| | | </el-form-item> |
| | | <el-form-item label="è¡¥å
æè¿°" prop="description"> |
| | | <el-input v-model="dialogForm.description" type="textarea" style="width: 220px" /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <span slot="footer" class="dialog-footer"> |
| | |
| | | |
| | | <script> |
| | | import Pagination from '@/components/Pagination' |
| | | import { AddUpdateOrganization, DeleteOrganization, OrganizationSearch, PrentOrganization } from '@/api/jcsz' |
| | | import { |
| | | AddUpdateCurrentUnit, |
| | | AddUpdateOrganization, |
| | | CurrentUnitSearch, |
| | | DeleteOrganization, |
| | | OrganizationSearch, |
| | | PrentOrganization |
| | | } from '@/api/jcsz' |
| | | import { getCookie } from '@/utils/auth' |
| | | |
| | | const SER_HZ = /^[\u4e00-\u9fa5]+$/ |
| | |
| | | } |
| | | } |
| | | } |
| | | const validateTypeCode = (rule, value, callback) => { |
| | | if (!value) { |
| | | return callback(new Error('è¯·éæ©ä¸çº§')) |
| | | } else { |
| | | callback() |
| | | } |
| | | } |
| | | return { |
| | | isCompatible: false, // æ¯å¦å
¼å®¹ |
| | | mainHeight: 0, |
| | | tableHeight: 0, |
| | | form: { |
| | |
| | | page: 1, // 第å 页 |
| | | rows: 10 // æ¯é¡µå¤å°æ¡ |
| | | }, |
| | | OrgTypeArr: [ |
| | | { label: 'å·¥å', value: 'F' }, |
| | | { label: 'é¨é¨', value: 'D' }, |
| | | { label: '车é´', value: 'W' }, |
| | | { label: 'ç§å®¤', value: 'K' }, |
| | | { label: 'ç产线', value: 'L' } |
| | | UnitAttrArr: [ |
| | | { label: 'å¤è´ä¾æ¹', value: 'WG' }, |
| | | { label: 'å¤å便¹', value: 'WX' }, |
| | | { label: '客æ·', value: 'KH' } |
| | | ], |
| | | |
| | | total: 10, |
| | | tableData: [], |
| | | total: 10, |
| | | dialogVisible: false, |
| | | dialogForm: { |
| | | OrgType: '', |
| | | OrgCode: '', |
| | | OrgName: '', |
| | | SupUnit: ''// ä¸çº§åä½ |
| | | checkboxIsSelected: [], // åå¨el-checkbox-grounpéä¸çå¼ |
| | | |
| | | id: '', // 徿¥åä½id |
| | | unitcode: '', // 徿¥åä½ç¼ç |
| | | unitname: '', // 徿¥åä½åç§° |
| | | // mtypecode: '', // å¤è´ç¼ç |
| | | // btypecode: '', // å¤åç¼ç |
| | | // htypecode: '', // 客æ·ç¼ç |
| | | person: '', // è系人 |
| | | contact: '', // èç³»æ¹å¼ |
| | | description: '', // è¡¥å
æè¿° |
| | | OperType: '' // æä½ç±»å |
| | | }, |
| | | SupUnitArr: [], |
| | | dialogFormOrgTypeSelected: '', |
| | | operation: '', |
| | | dialogFormRules: { |
| | | OrgType: [ |
| | | { required: true, message: '请è¾å
¥éæ©ç±»å', trigger: ['blur', 'change'] } |
| | | ], |
| | | OrgCode: [ |
| | | unitcode: [ |
| | | { required: true, validator: validateName, trigger: ['blur', 'change'] } |
| | | ], |
| | | OrgName: [ |
| | | { required: true, message: '请è¾å
¥åç§°', trigger: ['blur', 'change'] } |
| | | unitname: [ |
| | | { required: true, message: '请è¾å
¥ä¾æ¹åç§°', trigger: ['blur', 'change'] } |
| | | ], |
| | | SupUnit: [ |
| | | { required: true, validator: validateTypeCode, trigger: ['blur', 'change'] } |
| | | checkboxIsSelected: [ |
| | | { required: true, message: 'è¯·éæ©ä¾æ¹å±æ§', trigger: ['blur', 'change'] } |
| | | ] |
| | | } |
| | | |
| | | } |
| | | }, |
| | | created() { |
| | | this.getOrganizationSearch() |
| | | this.getCurrentUnitSearch() |
| | | }, |
| | | mounted() { |
| | | window.addEventListener('resize', this.getHeight) |
| | | this.getHeight() |
| | | |
| | | // 夿å½åæç¨æµè§å¨ |
| | | // const explorer = navigator.userAgent |
| | | // if (explorer.indexOf('Firefox') >= 0) { |
| | | // // firefox |
| | | // console.log('Firefox') |
| | | // this.isCompatible = true |
| | | // } else if (explorer.indexOf('Chrome') >= 0) { |
| | | // // Chrome |
| | | // console.log('Chrome') |
| | | // this.isCompatible = true |
| | | // } else { |
| | | // console.log('other') |
| | | // this.isCompatible = false |
| | | // } |
| | | }, |
| | | methods: { |
| | | async getOrganizationSearch() { |
| | | const res = await OrganizationSearch(this.form) |
| | | async getCurrentUnitSearch() { |
| | | const res = await CurrentUnitSearch(this.form) |
| | | this.tableData = res.data |
| | | this.total = res.count |
| | | }, |
| | |
| | | } |
| | | this.form.order = order |
| | | this.form.prop = prop |
| | | this.getOrganizationSearch() |
| | | this.getCurrentUnitSearch() |
| | | }, |
| | | // æ¥è¯¢ |
| | | search() { |
| | | this.getOrganizationSearch() |
| | | this.getCurrentUnitSearch() |
| | | }, |
| | | // éç½® |
| | | reset() { |
| | | this.form.OrgCode = '' |
| | | this.form.OrgName = '' |
| | | this.form.OrgType = '' |
| | | this.form.UserName = '' |
| | | this.getOrganizationSearch() |
| | | this.form.CuntUnitCode = '' |
| | | this.form.CuntUnitName = '' |
| | | this.form.UnitAttr = '' |
| | | this.form.CreateUser = '' |
| | | this.getCurrentUnitSearch() |
| | | }, |
| | | // åéæ¡æ¹åæ¶ |
| | | async changeRadio(val) { |
| | | if (val.length > 1) { |
| | | this.OrgTypeArr.forEach(item => { |
| | | if (item.label === val) { |
| | | this.dialogFormOrgTypeSelected = item.value |
| | | } |
| | | }) |
| | | this.dialogForm.SupUnit = '' |
| | | } else { |
| | | this.dialogFormOrgTypeSelected = val |
| | | } |
| | | if (this.dialogFormOrgTypeSelected !== 'F') { |
| | | const { data: res } = await PrentOrganization({ orgcode: this.dialogFormOrgTypeSelected }) |
| | | this.SupUnitArr = res |
| | | } |
| | | // å¤éæ¡æ¹åäºä»¶ |
| | | checkboxGroupChange(val) { |
| | | console.log(val) |
| | | }, |
| | | |
| | | // æ°å¢æé® |
| | | add(operation) { |
| | | this.operation = operation |
| | |
| | | edit(operation, row) { |
| | | this.operation = operation |
| | | this.dialogVisible = true |
| | | if (row.description === 'F') { |
| | | this.dialogForm.OrgType = 'å·¥å' |
| | | } else if (row.description === 'D') { |
| | | this.dialogForm.OrgType = 'é¨é¨' |
| | | } else if (row.description === 'W') { |
| | | this.dialogForm.OrgType = '车é´' |
| | | } else if (row.description === 'K') { |
| | | this.dialogForm.OrgType = 'ç§å®¤' |
| | | } else if (row.description === 'L') { |
| | | this.dialogForm.OrgType = 'ç产线' |
| | | } |
| | | |
| | | this.$nextTick(() => { |
| | | this.changeRadio(this.dialogForm.OrgType) |
| | | this.dialogForm.OrgCode = row.org_code |
| | | this.dialogForm.OrgName = row.org_name |
| | | this.dialogForm.SupUnit = row.parent_id |
| | |
| | | cancelButtonText: 'åæ¶', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | DeleteOrganization({ orgid: id }).then(res => { |
| | | if (res.code === '200') { |
| | | this.$message.success('å 餿å!') |
| | | this.getOrganizationSearch() |
| | | } |
| | | }) |
| | | // DeleteOrganization({ orgid: id }).then(res => { |
| | | // if (res.code === '200') { |
| | | // this.$message.success('å 餿å!') |
| | | // this.getCurrentUnitSearch() |
| | | // } |
| | | // }) |
| | | }).catch(() => { |
| | | this.$message.info('已忶å é¤') |
| | | }) |
| | | }, |
| | | // å¯¹è¯æ¡å
³éäºä»¶ |
| | | handleClose() { |
| | | this.dialogForm.OrgType = '' |
| | | this.dialogForm.OrgCode = '' |
| | | this.dialogForm.OrgName = '' |
| | | this.dialogForm.SupUnit = '' |
| | | this.dialogForm.unitcode = '' |
| | | this.dialogForm.unitname = '' |
| | | this.dialogForm.person = '' |
| | | this.dialogForm.contact = '' |
| | | this.dialogForm.description = '' |
| | | this.$refs.dialogForm.clearValidate() |
| | | }, |
| | | // å¯¹è¯æ¡åæ¶ |
| | |
| | | dialogVisibleConfirm() { |
| | | this.$refs.dialogForm.validate(valid => { |
| | | if (valid) { |
| | | const data = { |
| | | OrganType: this.dialogFormOrgTypeSelected, |
| | | OrganCode: this.dialogForm.OrgCode, |
| | | OrganName: this.dialogForm.OrgName, |
| | | SupUnit: this.dialogFormOrgTypeSelected === 'F' ? '0' : this.dialogForm.SupUnit, |
| | | OperType: this.operation === 'add' ? 'Add' : 'Update', |
| | | Operator: getCookie('admin') |
| | | let mtypecode = null // å¤è´ç¼ç |
| | | let btypecode = null // å¤åç¼ç |
| | | let htypecode = null // 客æ·ç¼ç |
| | | const checkboxIsSelected = this.dialogForm.checkboxIsSelected// åå¨el-checkbox-grounpéä¸çå¼ |
| | | if (checkboxIsSelected.includes('å¤è´ä¾æ¹')) { |
| | | mtypecode = 'WG' |
| | | } |
| | | AddUpdateOrganization(data).then(res => { |
| | | if (checkboxIsSelected.includes('å¤å便¹')) { |
| | | btypecode = 'WX' |
| | | } |
| | | if (checkboxIsSelected.includes('客æ·')) { |
| | | htypecode = 'KH' |
| | | } |
| | | const data = { |
| | | id: this.dialogForm.id, |
| | | unitcode: this.dialogForm.unitcode, |
| | | unitname: this.dialogForm.unitname, |
| | | mtypecode: mtypecode, |
| | | btypecode: btypecode, |
| | | htypecode: htypecode, |
| | | person: this.dialogForm.person, |
| | | contact: this.dialogForm.contact, |
| | | description: this.dialogForm.description, |
| | | OperType: this.operation === 'add' ? 'Add' : 'Update' |
| | | // Operator: getCookie('admin') |
| | | } |
| | | console.log(data) |
| | | AddUpdateCurrentUnit(data).then(res => { |
| | | if (res.code === '200') { |
| | | this.$message.success(this.operation === 'add' ? 'æ·»å æåï¼' : 'ä¿®æ¹æåï¼') |
| | | this.getOrganizationSearch() |
| | | this.dialogVisible = false |
| | | this.getCurrentUnitSearch() |
| | | } else { |
| | | this.$message.error(this.operation === 'add' ? 'æ·»å 失败ï¼' : 'ä¿®æ¹å¤±è´¥ï¼') |
| | | } |
| | | }) |
| | | |
| | | this.dialogVisible = false |
| | | } |
| | | }) |
| | | }, |
| | |
| | | } |
| | | |
| | | ::v-deep .el-input__inner { |
| | | height: 30px |
| | | height: 30px; |
| | | line-height:30px; |
| | | |
| | | } |
| | | |
| | | ::v-deep .el-table .caret-wrapper { |
| | |
| | | .el-checkbox.is-bordered.is-checked { |
| | | border-color: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-radio__input.is-checked .el-radio__inner { |
| | | border-color: $main_color; |
| | | background: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{ |
| | | ::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{ |
| | | ::v-deep .el-checkbox.is-bordered + .el-checkbox.is-bordered { |
| | | margin: 10px 30px 0px 0; |
| | | } |
| | | |