| | |
| | | >åå¸</el-button |
| | | > |
| | | </div> |
| | | <div class="config_list_list"> |
| | | <div class="item"> |
| | | <div class="item_label">å起人</div> |
| | | <div class="item_child"> |
| | | <div class="item_child_label">ç¨æ¥æ</div> |
| | | <div class="item_child_val">访客</div> |
| | | <div class="config_content"> |
| | | <div class="item active"> |
| | | <div class="head">å起人</div> |
| | | <div class="content">访客</div> |
| | | </div> |
| | | <div class="item_down"> |
| | | <div class="item_down_x"> |
| | | <div class="arrows"> |
| | | <div class="line"></div> |
| | | <img src="@/assets/images/peizhi_ar@2x.png" alt="" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div |
| | | :class="item.active ? 'item yellow active' : 'item yellow'" |
| | | v-for="(item, index) in list" |
| | | :key="index" |
| | | @click="seleItem(index)" |
| | | class="item yellow" |
| | | :class="{ active: activeSel === 'one' }" |
| | | @click="flowClick('one')" |
| | | > |
| | | <div class="item_label">审æ¹äºº</div> |
| | | <div class="item_child" style="cursor: pointer"> |
| | | <img |
| | | class="item_child_right" |
| | | src="@/assets/images/ar_more@2x.png" |
| | | /> |
| | | <div class="item_child_label">被访人</div> |
| | | <div class="item_child_val">访客</div> |
| | | <div class="head">审æ¹äºº</div> |
| | | <div class="content"> |
| | | <div>被访人</div> |
| | | <i class="el-icon-arrow-right"></i> |
| | | </div> |
| | | <div class="item_down"> |
| | | <!-- <img |
| | | class="item_down_add" |
| | | v-if="list.length - 1 === index" |
| | | src="@/assets/images/peizhi_add@2x.png" |
| | | @click.stop="add" |
| | | /> --> |
| | | <div class="item_down_x"> |
| | | </div> |
| | | <div class="arrows"> |
| | | <div class="line"></div> |
| | | <img src="@/assets/images/peizhi_ar@2x.png" alt="" /> |
| | | </div> |
| | | <template v-if="false"> |
| | | <div |
| | | class="item yellow" |
| | | :class="{ active: activeSel === 'one' }" |
| | | @click="flowClick('one')" |
| | | > |
| | | <div class="head">审æ¹äºº</div> |
| | | <div class="content"> |
| | | <div>æç³-综åç§</div> |
| | | <i class="el-icon-arrow-right"></i> |
| | | </div> |
| | | </div> |
| | | <div class="item blue" style="height: 81px"> |
| | | <div class="item_label">æé人</div> |
| | | <div class="item_child" style="cursor: pointer; height: 40px"> |
| | | <img |
| | | class="item_child_right" |
| | | src="@/assets/images/ar_more@2x.png" |
| | | /> |
| | | <div class="item_child_val" style="margin-top: 3px"> |
| | | 请设置æé人 |
| | | </div> |
| | | </div> |
| | | <div class="item_down"> |
| | | <div class="item_down_x"> |
| | | <div class="arrows"> |
| | | <div class="line"></div> |
| | | <img src="@/assets/images/peizhi_ar@2x.png" alt="" /> |
| | | </div> |
| | | </template> |
| | | <div |
| | | class="item blue" |
| | | :class="{ active: activeSel === 'two' }" |
| | | @click="flowClick('two')" |
| | | > |
| | | <div class="head">æé人</div> |
| | | <div class="content"> |
| | | <div>è¯·éæ©</div> |
| | | <i class="el-icon-arrow-right"></i> |
| | | </div> |
| | | </div> |
| | | <div class="footer"> |
| | | <span>æµç¨ç»æ</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <el-radio :label="1">ä¼ç¾ï¼ææå®¡æ¹äººé½åææå¯éè¿ï¼</el-radio> |
| | | </el-radio-group> |
| | | </div> |
| | | <div class="config_data_item" v-if="radio === 2"> |
| | | <div class="config_data_item_label">审æ¹äººä¸ºç©ºæ¶</div> |
| | | <el-checkbox-group |
| | | v-model="checkList" |
| | | style="display: flex; flex-direction: column" |
| | | <div class="df_ac"> |
| | | <span class="mr10"><strong>å
许修æ¹ç³è¯·é¡¹</strong></span> |
| | | <el-switch v-model="param.aa" active-value="1" inactive-value="0"> |
| | | </el-switch> |
| | | </div> |
| | | <div class="df_ac mt10"> |
| | | <span class="mr20">éæ©ä¿®æ¹é¡¹</span> |
| | | <el-select v-model="param.list" collapse-tags multiple placeholder="è¯·éæ©,å¤é"> |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | <el-checkbox |
| | | label="å¤éæ¡ A" |
| | | style="margin-bottom: 20px" |
| | | ></el-checkbox> |
| | | <el-checkbox |
| | | label="å¤éæ¡ B" |
| | | style="margin-bottom: 20px" |
| | | ></el-checkbox> |
| | | <el-checkbox label="å¤éæ¡ C"></el-checkbox> |
| | | </el-checkbox-group> |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | <div class="config_data_submit" v-if="radio !== 0"> |
| | | <el-button style="background: #435ebe" type="primary" |
| | | >ä¿æé
置项</el-button |
| | | >ä¿åé
置项</el-button |
| | | > |
| | | </div> |
| | | </div> |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | list: [ |
| | | { |
| | | name: '', |
| | | active: false |
| | | } |
| | | ], |
| | | |
| | | value: '', |
| | | options: [], |
| | | radio: 0, |
| | | radio1: 0, |
| | | checked: '', |
| | | checkList: [], |
| | | |
| | | param: {}, |
| | | activeSel: 'one', |
| | | activeName: 'first', |
| | | isShowTransfer: false, |
| | | fromData: [ |
| | |
| | | ] |
| | | } |
| | | ], |
| | | options: [{ |
| | | value: 'é项1', |
| | | label: 'é»éç³' |
| | | }, { |
| | | value: 'é项2', |
| | | label: 'åç®å¥¶' |
| | | }, { |
| | | value: 'é项3', |
| | | label: 'èµä»ç
' |
| | | }, { |
| | | value: 'é项4', |
| | | label: 'é¾é¡»é¢' |
| | | }, { |
| | | value: 'é项5', |
| | | label: 'å京ç¤é¸' |
| | | }], |
| | | selData: [] |
| | | } |
| | | }, |
| | | methods: { |
| | | add() { |
| | | this.list.push({ |
| | | name: '', |
| | | active: false |
| | | }) |
| | | flowClick (val) { |
| | | this.activeSel = val |
| | | }, |
| | | |
| | | selStaff() { |
| | | this.isShowTransfer = true |
| | | }, |
| | |
| | | color: #222222; |
| | | } |
| | | } |
| | | .config_list_list { |
| | | .config_content { |
| | | width: 100%; |
| | | height: calc(100% - 40px); |
| | | padding-top: 45px; |
| | |
| | | width: 0; |
| | | } |
| | | .active { |
| | | border: 2px solid #e84a08 !important; |
| | | border: 2px solid #4456ac !important; |
| | | } |
| | | .yellow { |
| | | background: #ee8921 !important; |
| | | background: #e89e42 !important; |
| | | } |
| | | .blue { |
| | | background: #435ebe !important; |
| | | background: #5094f3 !important; |
| | | } |
| | | .footer { |
| | | width: 106px; |
| | | height: 41px; |
| | | background: #ffffff; |
| | | box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1); |
| | | border-radius: 25px; |
| | | .arrows { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | span { |
| | | font-size: 15px; |
| | | font-weight: 400; |
| | | color: #333333; |
| | | .line { |
| | | width: 1px; |
| | | height: 60px; |
| | | background-color: #ccc; |
| | | } |
| | | img { |
| | | width: 12px; |
| | | } |
| | | } |
| | | .item { |
| | | width: 200px; |
| | | height: 102px; |
| | | background: #7999d9; |
| | | box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1); |
| | | border-radius: 4px; |
| | | padding: 4px; |
| | | box-sizing: border-box; |
| | | cursor: pointer; |
| | | border: 2px solid #f7f7f7; |
| | | height: 80px; |
| | | background: #4456ac; |
| | | border-radius: 2px; |
| | | position: relative; |
| | | display: flex; |
| | | flex-direction: column; |
| | | .head { |
| | | height: 32px; |
| | | line-height: 32px; |
| | | padding: 2px 12px; |
| | | color: #fff; |
| | | } |
| | | .content { |
| | | flex: 1; |
| | | background-color: #fff; |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 0 12px; |
| | | justify-content: space-between; |
| | | position: relative; |
| | | margin-bottom: 60px; |
| | | } |
| | | &:last-child { |
| | | margin: 0 !important; |
| | | } |
| | | .item_down { |
| | | position: absolute; |
| | | bottom: -60px; |
| | | width: 100%; |
| | | height: 60px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | .item_down_add { |
| | | width: 46px; |
| | | height: 46px; |
| | | position: absolute; |
| | | z-index: 3; |
| | | top: 5px; |
| | | cursor: pointer; |
| | | } |
| | | .item_down_x { |
| | | width: 1px; |
| | | height: 60px; |
| | | background: #b2b2b2; |
| | | position: relative; |
| | | img { |
| | | position: absolute; |
| | | bottom: 0; |
| | | left: -4px; |
| | | width: 9px; |
| | | height: 9px; |
| | | } |
| | | } |
| | | } |
| | | .item_label { |
| | | width: 100%; |
| | | height: 30px; |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 15px; |
| | | font-weight: 400; |
| | | color: #ffffff; |
| | | } |
| | | .item_child { |
| | | width: 100%; |
| | | height: 61px; |
| | | padding: 10px; |
| | | box-sizing: border-box; |
| | | background: #ffffff; |
| | | border-radius: 4px; |
| | | position: relative; |
| | | .item_child_right { |
| | | position: absolute; |
| | | right: 10px; |
| | | top: 13px; |
| | | width: 8px; |
| | | height: 14px; |
| | | } |
| | | .item_child_label { |
| | | font-size: 14px; |
| | | font-weight: 400; |
| | | color: #333333; |
| | | margin-bottom: 4px; |
| | | } |
| | | .item_child_val { |
| | | font-size: 12px; |
| | | font-weight: 400; |
| | | color: #999999; |
| | | } |
| | | } |
| | | } |
| | | } |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <TableLayout> |
| | | <template v-slot:table-wrap> |
| | | <div class="config"> |
| | | <div class="config_list"> |
| | | <div class="config_list_head"> |
| | | <span>é
ç½®æµç¨</span> |
| | | <el-button style="background: #435ebe" type="primary" |
| | | >åå¸</el-button |
| | | > |
| | | </div> |
| | | <div class="config_content"> |
| | | <div class="item active"> |
| | | <div class="head">å起人</div> |
| | | <div class="content">å
é¨åå·¥</div> |
| | | </div> |
| | | <div class="arrows"> |
| | | <div class="line"></div> |
| | | <img src="@/assets/images/peizhi_ar@2x.png" alt="" /> |
| | | </div> |
| | | <template> |
| | | <div |
| | | class="item yellow" |
| | | :class="{ active: activeSel === 'one' }" |
| | | @click="flowClick('one')" |
| | | > |
| | | <div class="head">审æ¹äºº</div> |
| | | <div class="content"> |
| | | <div>æç³-综åç§</div> |
| | | <i class="el-icon-arrow-right"></i> |
| | | </div> |
| | | </div> |
| | | <div class="arrows"> |
| | | <div class="line"></div> |
| | | <img src="@/assets/images/peizhi_ar@2x.png" alt="" /> |
| | | </div> |
| | | </template> |
| | | <div |
| | | class="item blue" |
| | | :class="{ active: activeSel === 'two' }" |
| | | @click="flowClick('two')" |
| | | > |
| | | <div class="head">æé人</div> |
| | | <div class="content"> |
| | | <div>è¯·éæ©</div> |
| | | <i class="el-icon-arrow-right"></i> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="config_data"> |
| | | <div class="config_data_item"> |
| | | <div class="config_data_item_label">éæ©è¯¥èç¹ç审æ¹äºº</div> |
| | | <el-radio-group v-model="radio"> |
| | | <el-radio :label="0">被访人</el-radio> |
| | | <el-radio :label="1">æå®äººå</el-radio> |
| | | <el-radio :label="2">é¨é¨ä¸»ç®¡</el-radio> |
| | | </el-radio-group> |
| | | <div class="config_data_item_reviewed" v-if="radio === 1"> |
| | | <div class="config_data_item_reviewed_label"> |
| | | <span>æå®å®¡æ ¸äºº</span> |
| | | <span>ä¸è¶
è¿20人</span> |
| | | </div> |
| | | <div class="config_data_item_reviewed_content"> |
| | | <div class="config_data_item_reviewed_content_item"> |
| | | <span>æ åå¥</span> |
| | | <i class="el-icon-close"></i> |
| | | </div> |
| | | <span class="add" @click="selStaff">+æ·»å </span> |
| | | </div> |
| | | </div> |
| | | <div class="config_data_item_reviewed" v-if="radio === 2"> |
| | | <div class="config_data_item_reviewed_label"> |
| | | <span>é¨é¨ä¸»ç®¡</span> |
| | | </div> |
| | | <div class="config_data_item_reviewed_r"> |
| | | <span>被访人ç</span> |
| | | <el-select |
| | | v-model="value" |
| | | placeholder="è¯·éæ©" |
| | | style="margin: 0 20px 0 10px" |
| | | > |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | <el-checkbox v-model="checked" |
| | | >æ¾ä¸å°ä¸»ç®¡æ¶ï¼ç±ä¸çº§ä¸»ç®¡ä»£å®¡æ ¸</el-checkbox |
| | | > |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="config_data_item" v-if="radio !== 0"> |
| | | <div class="config_data_item_label"> |
| | | å®¡æ¹æ¹å¼ |
| | | <span>审æ¹äººä¸ºå¤ä¸ªæ¶ï¼éç¨çå®¡æ¹æ¹å¼</span> |
| | | </div> |
| | | <el-radio-group |
| | | v-model="radio1" |
| | | style="display: flex; flex-direction: column" |
| | | > |
| | | <el-radio :label="0" style="margin-bottom: 20px" |
| | | >æç¾ï¼å
¶ä¸ä¸å审æ¹äººåæææç»å³å¯ï¼</el-radio |
| | | > |
| | | <el-radio :label="1">ä¼ç¾ï¼ææå®¡æ¹äººé½åææå¯éè¿ï¼</el-radio> |
| | | </el-radio-group> |
| | | </div> |
| | | <div class="config_data_submit" v-if="radio !== 0"> |
| | | <el-button style="background: #435ebe" type="primary" |
| | | >ä¿åé
置项</el-button |
| | | > |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <!-- --> |
| | | <el-dialog title="éæ©åå·¥" :visible.sync="isShowTransfer" width="800px"> |
| | | <tree-transfer |
| | | v-model="param.menuIds" |
| | | :title="['æªé', 'å·²é']" |
| | | :from_data="fromData" |
| | | :to_data="selData" |
| | | :defaultProps="{ label: 'label' }" |
| | | mode="transfer" |
| | | height="500px" |
| | | filter |
| | | openAll |
| | | ref="treeTransfer" |
| | | > |
| | | </tree-transfer> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="isShowTransfer = false">å æ¶</el-button> |
| | | <el-button type="primary" @click="isShowTransfer = false" |
| | | >ç¡® å®</el-button |
| | | > |
| | | </span> |
| | | </el-dialog> |
| | | </TableLayout> |
| | | </template> |
| | | |
| | | <script> |
| | | import TableLayout from '@/layouts/TableLayout' |
| | | import treeTransfer from 'el-tree-transfer' |
| | | export default { |
| | | name: 'config', |
| | | components: { |
| | | TableLayout, |
| | | treeTransfer |
| | | }, |
| | | data () { |
| | | return { |
| | | |
| | | value: '', |
| | | radio: 0, |
| | | radio1: 0, |
| | | checked: '', |
| | | checkList: [], |
| | | |
| | | param: {}, |
| | | activeSel: 'one', |
| | | activeName: 'first', |
| | | isShowTransfer: false, |
| | | fromData: [ |
| | | { |
| | | id: '1', |
| | | pid: 0, |
| | | label: 'ä¸çº§ 1', |
| | | children: [ |
| | | { |
| | | id: '1-1', |
| | | pid: '1', |
| | | label: 'äºçº§ 1-1', |
| | | disabled: true, |
| | | children: [] |
| | | }, |
| | | { |
| | | id: '1-2', |
| | | pid: '1', |
| | | label: 'äºçº§ 1-2', |
| | | children: [ |
| | | { |
| | | id: '1-2-1', |
| | | pid: '1-2', |
| | | children: [], |
| | | label: 'äºçº§ 1-2-1' |
| | | }, |
| | | { |
| | | id: '1-2-2', |
| | | pid: '1-2', |
| | | children: [], |
| | | label: 'äºçº§ 1-2-2' |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | } |
| | | ], |
| | | options: [{ |
| | | value: 'é项1', |
| | | label: 'é»éç³' |
| | | }, { |
| | | value: 'é项2', |
| | | label: 'åç®å¥¶' |
| | | }, { |
| | | value: 'é项3', |
| | | label: 'èµä»ç
' |
| | | }, { |
| | | value: 'é项4', |
| | | label: 'é¾é¡»é¢' |
| | | }, { |
| | | value: 'é项5', |
| | | label: 'å京ç¤é¸' |
| | | }], |
| | | selData: [] |
| | | } |
| | | }, |
| | | methods: { |
| | | flowClick (val) { |
| | | this.activeSel = val |
| | | }, |
| | | |
| | | selStaff () { |
| | | this.isShowTransfer = true |
| | | }, |
| | | seleItem (i) { |
| | | this.list.forEach((item, index) => { |
| | | item.active = index === i |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .config { |
| | | width: 100%; |
| | | padding-bottom: 20px; |
| | | box-sizing: border-box; |
| | | height: calc(100vh - 140px); |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | .config_list { |
| | | width: 543px; |
| | | height: 100%; |
| | | flex-shrink: 0; |
| | | border-radius: 2px; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | border: 1px solid #eeeeee; |
| | | background: #f7f7f7; |
| | | .config_list_head { |
| | | width: 100%; |
| | | height: 40px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | span { |
| | | font-size: 18px; |
| | | font-weight: 500; |
| | | color: #222222; |
| | | } |
| | | } |
| | | .config_content { |
| | | width: 100%; |
| | | height: calc(100% - 40px); |
| | | padding-top: 45px; |
| | | box-sizing: border-box; |
| | | overflow-y: scroll; |
| | | display: flex; |
| | | align-items: center; |
| | | flex-direction: column; |
| | | &::-webkit-scrollbar { |
| | | width: 0; |
| | | } |
| | | .active { |
| | | border: 2px solid #4456ac !important; |
| | | } |
| | | .yellow { |
| | | background: #e89e42 !important; |
| | | } |
| | | .blue { |
| | | background: #5094f3 !important; |
| | | } |
| | | .arrows { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | .line { |
| | | width: 1px; |
| | | height: 60px; |
| | | background-color: #ccc; |
| | | } |
| | | img { |
| | | width: 12px; |
| | | } |
| | | } |
| | | .item { |
| | | width: 200px; |
| | | cursor: pointer; |
| | | border: 2px solid #f7f7f7; |
| | | height: 80px; |
| | | background: #4456ac; |
| | | border-radius: 2px; |
| | | position: relative; |
| | | display: flex; |
| | | flex-direction: column; |
| | | .head { |
| | | height: 32px; |
| | | line-height: 32px; |
| | | padding: 2px 12px; |
| | | color: #fff; |
| | | } |
| | | .content { |
| | | flex: 1; |
| | | background-color: #fff; |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 0 12px; |
| | | justify-content: space-between; |
| | | } |
| | | &:last-child { |
| | | margin: 0 !important; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .config_data { |
| | | flex: 1; |
| | | height: 100%; |
| | | margin-left: 20px; |
| | | .config_data_submit { |
| | | margin-top: 50px; |
| | | } |
| | | .config_data_item { |
| | | width: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | margin-bottom: 30px; |
| | | &:last-child { |
| | | margin: 0 !important; |
| | | } |
| | | .config_data_item_label { |
| | | font-size: 16px; |
| | | font-weight: 500; |
| | | color: #222222; |
| | | margin-bottom: 20px; |
| | | span { |
| | | font-size: 12px; |
| | | font-weight: 400; |
| | | color: #999999; |
| | | margin-left: 10px; |
| | | } |
| | | } |
| | | .config_data_item_reviewed { |
| | | width: 100%; |
| | | margin-top: 20px; |
| | | .config_data_item_reviewed_r { |
| | | margin-top: 10px; |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | span { |
| | | flex-shrink: 0; |
| | | font-size: 14px; |
| | | font-weight: 400; |
| | | color: #666666; |
| | | } |
| | | } |
| | | .config_data_item_reviewed_label { |
| | | display: flex; |
| | | align-items: center; |
| | | span { |
| | | &:nth-child(1) { |
| | | font-size: 14px; |
| | | font-weight: 400; |
| | | color: #222222; |
| | | } |
| | | &:nth-child(2) { |
| | | font-size: 12px; |
| | | font-weight: 400; |
| | | color: #999999; |
| | | margin-left: 8px; |
| | | } |
| | | } |
| | | } |
| | | .config_data_item_reviewed_content { |
| | | width: 400px; |
| | | margin-top: 10px; |
| | | height: 110px; |
| | | padding: 12px; |
| | | box-sizing: border-box; |
| | | border-radius: 2px; |
| | | border: 1px solid #dfe2e8; |
| | | display: flex; |
| | | align-items: flex-start; |
| | | flex-wrap: wrap; |
| | | .add { |
| | | font-size: 12px; |
| | | font-weight: 400; |
| | | color: #435ebe; |
| | | cursor: pointer; |
| | | margin-top: 3px; |
| | | } |
| | | .config_data_item_reviewed_content_item { |
| | | padding: 3px 5px; |
| | | background: #f4f7fc; |
| | | border-radius: 2px; |
| | | box-sizing: border-box; |
| | | margin-right: 10px; |
| | | margin-bottom: 10px; |
| | | span { |
| | | font-size: 12px; |
| | | font-weight: 400; |
| | | color: #333333; |
| | | } |
| | | i { |
| | | color: #949ba2; |
| | | margin-left: 10px; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | |
| | | <el-button |
| | | type="text" |
| | | icon="el-icon-delete" |
| | | @click="handleDetail(row)" |
| | | @click="handleDel(row)" |
| | | class="red" |
| | | >å é¤</el-button |
| | | > |
| | |
| | | } |
| | | }) |
| | | }, |
| | | handleEdit() { |
| | | handleEdit (row) { |
| | | this.isShowEdit = true |
| | | }, |
| | | handleDel (row) { |
| | | this.$confirm('确认å é¤æè®¿äºç±', 'æç¤º', { |
| | | confirmButtonText: 'ç¡®å®', |
| | | cancelButtonText: 'åæ¶', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | |
| | | }) |
| | | }, |
| | | getList(page) { }, |
| | | clear() { }, |
| | | handleSizeChange(capacity) { |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="main_app"> |
| | | <QueryForm |
| | | v-model="filters" |
| | | :query-form-config="queryFormConfig" |
| | | @handleQuery="getList(1)" |
| | | @clear="clear" |
| | | /> |
| | | <div class="table_btns"> |
| | | <el-button icon="el-icon-plus" @click="handleEdit()" type="primary" |
| | | >æ°å»º</el-button |
| | | > |
| | | <el-button @click="handleAppr" type="primary">ä¸åææ</el-button> |
| | | </div> |
| | | <el-table v-loading="loading" :data="list" stripe> |
| | | <el-table-column |
| | | prop="name" |
| | | label="车çç
§" |
| | | min-width="100" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | prop="name" |
| | | label="车è¾ç±»å" |
| | | min-width="80" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | prop="name" |
| | | label="ææå车åº" |
| | | min-width="100" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | prop="name" |
| | | label="车主å§å" |
| | | min-width="80" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | prop="name" |
| | | label="ç³è¯·æææ" |
| | | min-width="110" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | prop="name" |
| | | label="å车åºä¸å" |
| | | min-width="100" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | prop="name" |
| | | label="æä½äºº" |
| | | min-width="80" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | prop="name" |
| | | label="æä½æ¶é´" |
| | | min-width="110" |
| | | show-overflow-tooltip |
| | | /> |
| | | |
| | | <el-table-column label="æä½" width="230" fixed="right"> |
| | | <!-- v-permissions="['business:company:update']" --> |
| | | <template slot-scope="{ row }"> |
| | | <el-button type="text" icon="el-icon-edit" @click="handleEdit(row)" |
| | | >ç¼è¾</el-button |
| | | > |
| | | <el-button |
| | | type="text" |
| | | icon="el-icon-delete" |
| | | @click="handleDel(row)" |
| | | class="red" |
| | | >å é¤</el-button |
| | | > |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <pagination |
| | | @size-change="handleSizeChange" |
| | | @current-change="getList" |
| | | :pagination="pagination" |
| | | /> |
| | | <!-- --> |
| | | <el-dialog |
| | | :title="param.id ? 'ç¼è¾è½¦è¾' : 'æ°å¢è½¦è¾'" |
| | | :visible.sync="isShowEdit" |
| | | width="600px" |
| | | > |
| | | <el-form :model="param" :rules="rules" ref="ruleForm" label-width="100px"> |
| | | <el-form-item label="车çç
§"> |
| | | <el-input type="text" placeholder="请è¾å
¥" v-model="param.explain" /> |
| | | </el-form-item> |
| | | <el-form-item label="车è¾ç±»å"> |
| | | <el-radio v-model="param.aa" label="1">å工车è¾</el-radio> |
| | | </el-form-item> |
| | | <el-form-item label="车主å§å"> |
| | | <el-select |
| | | v-model="param.b" |
| | | filterable |
| | | placeholder="è¯·éæ©,åéï¼æ¯ææç´¢" |
| | | > |
| | | <el-option></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-form> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="isShowEdit = false">åæ¶</el-button> |
| | | <el-button type="primary" @click="handleSub">ç¡®å®</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | <!-- --> |
| | | <el-dialog title="åè½¦åºææ" :visible.sync="isShowAuthor" width="600px"> |
| | | <el-form |
| | | :model="authorization" |
| | | :rules="rules" |
| | | ref="authorForm" |
| | | label-width="100px" |
| | | > |
| | | <el-form-item label="ææå车åº"> |
| | | <el-select |
| | | v-model="authorization.b" |
| | | filterable |
| | | placeholder="è¯·éæ©,å¤é" |
| | | > |
| | | <el-option></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="ç³è¯·æææ"> |
| | | <el-radio v-model="authorization.aa" label="1">é¿æææ</el-radio> |
| | | <div class="mt10"> |
| | | <el-date-picker |
| | | v-model="authorization.ac" |
| | | type="daterange" |
| | | range-separator="è³" |
| | | start-placeholder="å¼å§æ¥æ" |
| | | format="yyyy-MM-dd HH:mm:ss" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | end-placeholder="ç»ææ¥æ" |
| | | > |
| | | </el-date-picker> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="isShowAuthor = false">åæ¶</el-button> |
| | | <el-button type="primary" @click="authorSub">æäº¤</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import Pagination from '@/components/common/Pagination' |
| | | import QueryForm from '@/components/common/QueryForm' |
| | | export default { |
| | | components: { |
| | | Pagination, |
| | | QueryForm |
| | | }, |
| | | data () { |
| | | return { |
| | | filters: {}, |
| | | loading: false, |
| | | queryFormConfig: { |
| | | formItems: [ |
| | | { |
| | | filed: 'idCard', |
| | | type: 'input', |
| | | label: '车çç
§' |
| | | }, |
| | | { |
| | | filed: 'name', |
| | | type: 'select', |
| | | label: '车è¾ç±»å', |
| | | options: [] |
| | | }, |
| | | { |
| | | filed: 'name', |
| | | type: 'select', |
| | | label: 'å车åºä¸å', |
| | | options: [] |
| | | } |
| | | ], |
| | | online: true |
| | | }, |
| | | pagination: { |
| | | capacity: 10, |
| | | page: 1 |
| | | }, |
| | | list: [{}], |
| | | total: 0, |
| | | |
| | | isShowEdit: false, |
| | | param: {}, |
| | | isShowAuthor: false, |
| | | authorization: {}, |
| | | rules: {} |
| | | } |
| | | }, |
| | | methods: { |
| | | handleSub () { |
| | | this.$refs.ruleForm.validate((valid) => { |
| | | if (valid) { |
| | | alert('submit!') |
| | | } |
| | | }) |
| | | }, |
| | | authorSub () {}, |
| | | handleEdit (row) { |
| | | this.isShowEdit = true |
| | | }, |
| | | handleAppr () { |
| | | this.isShowAuthor = true |
| | | }, |
| | | handleDel (row) { |
| | | this.$confirm('确认å é¤è¯¥è½¦è¾', 'æç¤º', { |
| | | confirmButtonText: 'ç¡®å®', |
| | | cancelButtonText: 'åæ¶', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | |
| | | }) |
| | | }, |
| | | getList (page) { }, |
| | | clear () { }, |
| | | handleSizeChange (capacity) { |
| | | this.pagination.capacity = capacity |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | </style> |