123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156 |
- <!--
- @param name 表头文案
- @param isSelected 是否显示前一级的完成
- @param renderData 数据
- @param infosKey dom中显示renderData中的某个字段
- -->
- <template>
- <div class="select-own-one saga-border">
- <p>{{name}}</p>
- <ul v-if="renderData.length">
- <li v-for="(item,index) in renderData" :key="index">
- <div @click="checkItem(item,index)" :class="{'saga-active-select': index == active,'disabled':item.RelationStatus=='Waiting'||item.RelationStatus=='Pending'}" class="select-item border-bottom pointer">
- <!-- <span v-if="isSelected" :class="{'is-checked': item[isCheckInfo]}" class="el-checkbox__input">
- <span class="el-checkbox__inner"></span>
- </span> -->
- <span v-if="isSelected" :class="item.RelationStatus=='Waiting'||item.RelationStatus=='Pending'?'iconfont icon-shenglvehao load-color':item[isCheckInfo] ? 'el-icon-success success-color' : 'el-icon-error error-color'">
- </span>
- {{overString(item[infosKey])}}
- <i v-if="isDel" @click.stop="delItem(item)" class="el-icon-error saga-delete pointer"></i>
- </div>
- </li>
- </ul>
- <div v-else class="center" style="padding-top: 50px;box-sizing:border-box;">
- <i class="icon-wushuju iconfont"></i> 暂无数据
- </div>
- </div>
- </template>
- <script>
- export default {
- name: "select_one",
- props: {
- name: {
- default: "原始点位描述"
- },
- isSelected: {
- default: false
- },
- isCheckInfo: {
- default: ""
- },
- renderData: {
- default: function() {
- return []
- }
- },
- infosKey: {
- default: "name"
- },
- isDel: {
- default: false
- }
- },
- data() {
- return {
- active: 0,
- }
- },
- created() {},
- mounted() {},
- methods: {
- checkItem(item, index) {
- if(item.RelationStatus=='Waiting'||item.RelationStatus=='Pending'){
- this.$message('正在执行')
- return
- }
- this.$emit("check", item)
- this.active = index
- },
- delItem(item) {
- this.$emit('deleteItem', item)
- },
- change() {
- this.$emit("check", this.renderData[this.active])
- },
- overString(val) {
- if (val.length > 13) {
- return val.substring(0, 13) + '...'
- } else {
- return val
- }
- }
- },
- watch: {
- renderData: {
- deep: true,
- handler: function() {
- this.change()
- //do something
- console.log("change")
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .saga-active-select {
- background-color: #9FC5F8;
- }
- .select-own-one {
- display: inline-block;
- height: 340px;
- width: 230px;
- overflow: hidden;
- p {
- line-height: 40px;
- height: 40px;
- padding-left: 10px;
- box-sizing: border-box;
- }
- ul {
- height: 300px;
- max-height: 300px;
- overflow-y: auto;
- li {
- // padding-left: 10px;
- box-sizing: border-box;
- div {
- padding-left: 10px;
- }
- }
- }
- }
- .border-bottom {
- border-bottom: 1px solid #ccc;
- }
- .select-item {
- height: 30px;
- line-height: 30px;
- &.disabled{
- background-color: #ccc;
- }
- .success-color{
- color: #409EFF;
- }
- .error-color{
- color: #F56C6C;
- }
- .load-color{
- color: #909399;
- }
- }
- .saga-delete {
- display: none;
- float: right;
- line-height: 31px;
- padding-right: 10px;
- box-sizing: border-box;
- }
- .select-item:hover {
- background-color: #9FC5F8;
- .saga-delete {
- display: inline;
- }
- }
- </style>
|