Vue组件-列表形式穿梭框

组件：公共 ShuttleBox

image.png

  1. <!----------------------------------------------------------------------------
  2.  @description：列表形式穿梭框
  3.  @author：王浩
  4.  @date：Created in  2022/1/20 11:46
  5.  @modified By：
  6.  @version: 1.0.0
  7.  ---------------------------------------------------------------------------->
  8. <template>
  9.   <div class="shuttle-box" :style="{ height }">
  10.     <div class="shuttle-box-left">
  11.       <p>{{ titleObj.leftTitle }}</p>
  12.       <div class="shuttle-box-content">
  13.         <slot name="left" />
  14.       </div>
  15.     </div>
  16.     <div class="shuttle-box-center">
  17.       <sg-button @click="toRight" :disabled="disabledLeft" type="primary" size="mini" icon="sg-icon-d-arrow-left" />
  18.       <sg-button @click="toLeft" type="primary" size="mini" icon="sg-icon-d-arrow-right" />
  19.     </div>
  20.     <div class="shuttle-box-right">
  21.       <p>{{ titleObj.rightTitle }}</p>
  22.       <div class="shuttle-box-content">
  23.         <slot name="right" />
  24.       </div>
  25.     </div>
  26.   </div>
  27. </template>
  29. <script>
  30. export default {
  31.   name: "ShuttleBox",
  32.   props: {
  33.     /**
  34.      * @description：穿梭框的高度
  35.      */
  36.     height: {
  37.       type: String,
  38.       default: "460px",
  39.     },
  40.     /**
  41.      * @description：禁用到到右去按钮
  42.      */
  43.     disabledLeft: {
  44.       type: Boolean,
  45.       default: false,
  46.     },
  47.     /**
  48.      * @description：禁用到到左去按钮
  49.      */
  50.     disabledRight: {
  51.       type: Boolean,
  52.       default: false,
  53.     },
  54.     /**
  55.      * @description：左右两侧标题
  56.      */
  57.     titleObj: {
  58.       type: Object,
  59.       default: () => {
  60.         return {
  61.           leftTitle: "选择数据",
  62.           rightTitle: "已选择数据",
  63.         };
  64.       },
  65.     },
  66.   },
  67.   data() {
  68.     return {};
  69.   },
  70.   methods: {
  71.     toRight() {
  72.       this.$emit("toRight");
  73.     },
  74.     toLeft() {
  75.       this.$emit("toLeft");
  76.     },
  77.   },
  78. };
  79. </script>
  81. <style scoped lang="scss">
  82. $_WIDTH_100: 100%;
  83. .shuttle-box {
  84.   width: $_WIDTH_100;
  85.   background-color: rgba(255, 255, 255, 1);
  86.   display: flex;
  87.   &-left {
  88.     width: calc((#{$_WIDTH_100} - 90px) / 2);
  89.   }
  90.   &-center {
  91.     width: 200px;
  92.     display: flex;
  93.     flex-direction: column;
  94.     justify-content: center;
  95.     align-items: center;
  97.     button:first-child {
  98.       margin-bottom: 20px;
  99.     }
  100.     /deep/ .sg-button {
  101.       margin-left: 0;
  102.       color: #ffffff;
  103.       font-size: 20px;
  104.       font-weight: 900;
  105.     }
  106.   }
  107.   &-right {
  108.     width: calc((#{$_WIDTH_100} - 400px) / 2);
  109.   }
  110.   .shuttle-box-left,
  111.   .shuttle-box-right {
  112.     width: 100%;
  113.     border-radius: 8px;
  114.     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  115.     padding-left: 10px;
  116.     padding-right: 10px;
  118.     p {
  119.       height: 40px;
  120.       line-height: 40px;
  121.       margin-block-start: 0;
  122.       margin-block-end: 0;
  123.       margin-inline-start: 0;
  124.       margin-inline-end: 0;
  125.     }
  126.     .shuttle-box-content {
  127.       width: 100%;
  128.       margin-top: 12px;
  129.       height: calc(100% - 40px - 12px - 12px);
  130.     }
  131.   }
  132. }
  133. </style>

在组件中引用：shuttle_box.vue

  2. <template>
  3.   <div>
  4.     <div>
  5.       <div class="level">
  6.         <!-- 左边框框 -->
  7.         <div class="transferbox">
  8.           <div class="topbox">
  9.             <span style="color:#1E90FF;font-size:16px;font-weight: 550;">待选设备</span>
  10.           </div>
  11.           <div class="level searchbox">
  12.             <el-input v-model="input" placeholder="请输入内容" style="width:300px" />
  13.             <el-button type="primary" style="margin:0 0 0 20px">搜索</el-button>
  14.           </div>
  16.           <el-table
  17.             ref="multipleTable"
  18.             :data="currentPageData"
  19.             highlight-current-row
  20.             tooltip-effect="dark"
  21.             height="460"
  22.             style="width: 100%;height:460px;cursor:pointer;"
  23.             :row-style="setColor"
  24.             @current-change="lineClick"
  25.           >
  26.             <el-table-column
  27.               label="日期"
  28.               width="430"
  29.             >
  30.               <template slot-scope="scope">{{ scope.row.date }}</template>
  31.             </el-table-column>
  32.           </el-table>
  33.           <!-- 分页 -->
  34.           <el-pagination
  35.             :current-page="listForm.currentPage"
  36.             :page-sizes="[5,10,25,50,100,200]"
  37.             :page-size="listForm.pageSize"
  38.             layout="total, sizes, prev, pager, next, jumper"
  39.             :total="totalSize"
  40.             style="margin-bottom:10px;margin-top:16px"
  41.             @size-change="handleSizeChange"
  42.             @current-change="handleCurrentChange"
  43.           />
  44.         </div>
  45.         <!-- 中间按钮 -->
  46.         <div class="vertical center3 centrebtn">
  47.           <el-button type="primary" icon="el-icon-arrow-right" @click="singleSel()" />
  48.           <el-button type="primary" style="margin:20px 0 0 0" icon="el-icon-d-arrow-right" @click="mutiSel()" />
  49.         </div>
  50.         <!-- 右边框框 -->
  51.         <div class="transferbox">
  52.           <div class="topbox">
  53.             <span style="color:#1E90FF;font-size:16px;font-weight: 550;">已选设备</span>
  54.           </div>
  56.           <el-table
  57.             ref="multipleTable"
  58.             :data="yxData"
  59.             tooltip-effect="dark"
  60.             height="500"
  61.             style="width: 100%;height:500px;cursor:pointer;"
  62.           >
  63.             <el-table-column
  64.               label="日期"
  65.               width="360"
  66.             >
  67.               <template slot-scope="scope">{{ scope.row.date }}</template>
  68.             </el-table-column>
  69.             <el-table-column label="操作" width="70">
  70.               <template slot-scope="scope">
  71.                 <div>
  72.                   <span class="look" style="color:    #FF0000" title @click="deletedetails(scope.row)">删除</span>
  73.                 </div>
  74.               </template>
  75.             </el-table-column>
  76.           </el-table>
  77.         </div>
  78.       </div>
  79.       <div class="dialog-btn">
  80.         <el-button>取消</el-button>
  81.         <el-button type="primary">确定</el-button>
  82.       </div>
  83.     </div>
  84.   </div>
  85. </template>
  87. <script>
  88. export default {
  89.   data() {
  90.     return {
  91.       // 分页
  92.       listForm: {
  93.         name: '',
  94.         type: '',
  95.         currentPage: 1,
  96.         pageSize: 25,
  97.         placeName: '',
  98.         eui: ''
  99.       },
  100.       totalSize: 0,
  101.       input: '',
  102.       currentPageData: [{
  103.         date: '2016-05-03'
  104.       }, {
  105.         date: '2016-05-02'
  106.       }, {
  107.         date: '2016-05-04'
  109.       }, {
  110.         date: '2016-05-01'
  112.       }, {
  113.         date: '2016-05-04'
  115.       }, {
  116.         date: '2016-05-01'
  118.       }
  119.       ],
  120.       multipleSelection: [],
  121.       currentRowData: null,
  122.       yxData: []
  124.     }
  125.   },
  126.   // 生命周期 - 挂载完成（可以访问DOM元素）
  127.   mounted() {
  129.   },
  130.   methods: {
  132.     // 页容量改变
  133.     handleSizeChange(val) {
  134.       console.log(val)
  135.       this.listForm.pageSize = val
  136.       this.deviceList()
  137.     },
  138.     // 改变当前页
  139.     handleCurrentChange(val) {
  140.       console.log(val)
  141.       this.listForm.currentPage = val
  142.       this.deviceList()
  143.     },
  145.     // 选中
  146.     lineClick(val) {
  147.       console.log(val)
  148.       this.currentRowData = val
  149.     },
  150.     // 单选
  151.     singleSel() {
  152.       if (this.currentRowData !== null) {
  153.         if (JSON.stringify(this.yxData).indexOf(JSON.stringify(this.currentRowData)) === -1) {
  154.           this.yxData.push(this.currentRowData)
  155.         }
  156.       }
  157.     },
  159.     // 选择整个页面
  160.     mutiSel() {
  161.       if (this.currentRowData !== null) {
  162.         this.currentPageData.forEach((item, index) => {
  163.           if (JSON.stringify(this.yxData).indexOf(JSON.stringify(item)) === -1) {
  164.             this.yxData.push(item)
  165.             this.setColor(item, index)
  166.           }
  167.         })
  168.       }
  169.     },
  170.     // 删除
  171.     deletedetails(row) {
  172.     if (JSON.stringify(this.yxData).indexOf(JSON.stringify(row)) !== -1) {
  173.         var index = this.yxData.indexOf(row)
  174.         this.yxData.splice(index, 1)
  175.       }
  176.     },
  177.     // 选中之后设置颜色
  178.     setColor({ row, rowIndex }) {
  179.       if (JSON.stringify(this.yxData).indexOf(JSON.stringify(row)) !== -1) {
  180.         return {
  181.           color: 'red'
  182.         }
  183.       }
  184.     }
  186.   }
  187. }
  189. </script>
  191. <style lang="scss" scoped>
  193.   .transferbox{
  194.     height: 600px;
  195.     width: 36%;//右边盒子的宽占比
  196.     border: 3px solid  #009cde;
  197.     .topbox{
  198.       margin: 10px 10px;
  199.     }
  200.     .searchbox{
  201.       margin: 0 0 0 10px;
  202.     }
  203.   }
  204.   .centrebtn{
  205.     width: 80px;
  206.     height: 600px;
  207.     margin: 0 10px 0 10px;
  208.     background-color: #009cde;
  209.     background-image: radial-gradient(circle farthest-side at left bottom,#009cde,#004687c7 125%);
  210.     color: #ffff;
  211.   }
  212.  /* 水平居中 */
  213.   .center1{
  214.     display: flex;
  215.     justify-content: center;
  216.     }
  218.     /* 垂直居中 */
  219.     .center2{
  220.       display: flex;
  221.       align-items: center;
  222.     }
  224.     /* 垂直水平居中 */
  225.     .center3{
  226.       display: flex;
  227.       align-items: center;
  228.       justify-content: center;
  229.     }
  230.     /* 水平布局 */
  231.     .level{
  232.       display: flex;
  233.       flex-direction: row;
  235.     }
  236.     // 垂直布局
  237.     .vertical{
  238.       display: flex;
  239.       flex-direction: column;
  240.       }
  241. </style>

demo

image.png

  1. <!--
  2.  * @description: 
  3.  * @author: wanghao
  4.  * @Date: 2022-01-24 14:19:20
  5.  * @Modified By: 
  6.  * @version: 1.0.0
  7. -->
  8. <template>
  9. <div class="hello">
  10.   <div class="one">
  11.     <p v-for="msg in message" @click="clickP(msg)" :key="msg">{{ msg.name }}</p>
  12.   </div>
  13.   <div class="two">
  14.     <p v-for="data in newdatas" @click="deleteP(data)" :key="data">{{ data.name }}</p>
  15.   </div>
  16.   </div>
  17. </template>
  19. <script>
  20.   export default {
  21.     data() {
  22.       return {
  23.         msg: "哈哈",
  24.         hh: "呵呵",
  25.         message: [
  26.           { id: 1, name: "第一个" },
  27.           { id: 2, name: "第二个" },
  28.         ],
  29.         datas: [],
  30.         newdatas: [],
  31.       };
  32.     },
  33.     mounted: function () {},
  34.     methods: {
  35.       clickP: function (msg) {
  36.         this.datas.push(msg);
  37.         this.newdatas = this.unique(this.datas);
  38.       },
  39.       deleteP: function (data) {
  40.         for (let i = 0; i < this.newdatas.length; i++) {
  41.           console.log("输出");
  42.           console.log(this.newdatas[i]);
  43.           if (this.newdatas[i].id == data.id) {
  44.             this.newdatas.splice(i, 1);
  45.             this.datas.splice(0, this.datas.length);
  46.           }
  47.         }
  48.       },
  49.       // 除重
  50.       unique: function (a) {
  51.         let res = [];
  52.         for (let i = 0, len = a.length; i < len; i++) {
  53.           let item = a[i];
  54.           res.indexOf(item) === -1 && res.push(item);
  55.         }
  56.         return res;
  57.       },
  58.     },
  59.   };
  60. </script>
  62. <!-- Add "scoped" attribute to limit CSS to this component only -->
  63. <style scoped>
  64.   .hello {
  65.     display: flex;
  66.     justify-content: center;
  67.   }
  69.   .one,
  70.   .two {
  71.     width: 300px;
  72.     height: 400px;
  73.     outline: 1px solid red;
  74.   }
  75. </style>

Vue组件-版本号输入框

组件：公共 VersionNumber

  1. <!----------------------------------------------------------------------------
  2.  @description：版本号输入框
  3.  @author：张时友
  4.  @date：Created in  2022/3/3 16:51
  5.  @modified By：
  6.  @version: 1.0.0
  7.  ---------------------------------------------------------------------------->
  8. <template>
  9.   <div class="version-number" :class="disabled ? 'is-disabled' : ''">
  10.     <span class="separator" v-if="showV">V</span>
  11.     <sg-input
  12.       v-model.trim="viewList[0]"
  13.       oninput="value=value.replace(/[^\d]/g,'')"
  14.       :disabled="disabled"
  15.       v-bind="$attrs"
  16.     ></sg-input>
  17.     <span class="separator">{{ separator }}</span>
  18.     <sg-input
  19.       v-model.trim="viewList[1]"
  20.       oninput="value=value.replace(/[^\d]/g,'')"
  21.       :disabled="disabled"
  22.       v-bind="$attrs"
  23.     ></sg-input>
  24.     <span class="separator">{{ separator }}</span>
  25.     <sg-input
  26.       v-model.trim="viewList[2]"
  27.       oninput="value=value.replace(/[^\d]/g,'')"
  28.       :disabled="disabled"
  29.       v-bind="$attrs"
  30.     ></sg-input>
  31.     <div class="icon" v-if="showClear" @click="clear()">
  32.       <i class="sg-icon-circle-close"></i>
  33.     </div>
  34.   </div>
  35. </template>
  37. <script>
  38. export default {
  39.   name: "versionNumber",
  40.   props: {
  41.     /**
  42.      * @description： v-model绑定的值
  43.      * @param {string}
  44.      * @default： 1.2.2
  45.      * */
  46.     value: {
  47.       type: String,
  48.       default: "",
  49.     },
  50.     /**
  51.      * @description： 每个数字之间的分隔符
  52.      * @param {string}
  53.      * @default： .
  54.      * */
  55.     separator: {
  56.       type: String,
  57.       default: ".",
  58.     },
  59.     /**
  60.      * @description： 是否显示前面的字母V
  61.      * @param {boolean}
  62.      * @default：true
  63.      * */
  64.     showV: {
  65.       type: Boolean,
  66.       default: true,
  67.     },
  68.     /**
  69.      * @description： 是否禁用
  70.      * @param {boolean}
  71.      * @default：false
  72.      * */
  73.     disabled: {
  74.       type: Boolean,
  75.       default: false,
  76.     },
  77.     /**
  78.      * @description： 是否显示清空按钮
  79.      * @param {boolean}
  80.      * @default：true
  81.      * */
  82.     clearable: {
  83.       type: Boolean,
  84.       default: false,
  85.     },
  86.   },
  87.   data() {
  88.     return {
  89.       viewList: [],
  90.       blackValue: "",
  91.       isHasV: false,
  92.     };
  93.   },
  95.   computed: {
  96.     showClear() {
  97.       console.log(this.viewList.length);
  98.       if (this.clearable && this.viewList.length > 1) {
  99.         return true;
  100.       } else {
  101.         return false;
  102.       }
  103.     },
  104.   },
  105.   created() {
  106.     this.init();
  107.   },
  108.   methods: {
  109.     /**
  110.      * @description：初始化数据
  111.      * @param ,
  112.      * @returns null
  113.      **/
  114.     init() {
  115.       this.viewList = ["", "", ""];
  116.       this.blackValue = this.value;
  117.       const _C = this.blackValue.charCodeAt(0);
  118.       if ((_C >= 65 && _C <= 90) || (_C >= 97 && _C <= 122)) {
  119.         this.blackValue = this.blackValue.substring(1);
  120.         this.isHasV = true;
  121.       }
  122.       this.viewList = this.blackValue.split(this.separator);
  123.     },
  124.     /**
  125.      * @description：处理数据给父元素
  126.      * @param ,
  127.      * @returns null
  128.      **/
  129.     valueHandler() {
  130.       let list = this.viewList;
  131.       if (this.isHasV) {
  132.         return "V" + list.join(this.separator);
  133.       }
  134.       return list.join(this.separator);
  135.     },
  136.     /**
  137.      * @description：清空事件
  138.      * @param ,
  139.      * @returns null
  140.      **/
  141.     clear() {
  142.       this.viewList = [];
  143.     },
  144.   },
  145.   watch: {
  146.     value() {
  147.       this.init();
  148.     },
  149.     /**
  150.      * @description：将数据绑定给v-model
  151.      * @param ,
  152.      * @returns null
  153.      **/
  154.     viewList: {
  155.       deep: true,
  156.       handler() {
  157.         this.$emit("input", this.valueHandler());
  158.       },
  159.     },
  160.   },
  161. };
  162. </script>
  164. <style scoped lang="scss">
  165. .version-number {
  166.   width: 100%;
  167.   border: 1px solid #d9d9d9;
  168.   display: flex;
  169.   background-color: #ffffff;
  170.   /deep/ .sg-input__inner {
  171.     border: 0;
  172.     border-radius: 0;
  173.   }
  174.   .separator {
  175.     padding: 0 10px;
  176.   }
  177.   .icon {
  178.     box-sizing: content-box;
  179.     padding: 0 12px;
  180.     visibility: hidden;
  181.   }
  182. }
  183. .version-number:hover .icon {
  184.   visibility: visible;
  185.   cursor: pointer;
  186. }
  187. .is-disabled {
  188.   background-color: #eee;
  189. }
  190. </style>

在组件中引用：other.vue

image.png

  1. <!----------------------------------------------------------------------------
  2.  @description：小功能性组件
  3.  @author：王浩
  4.  @date：Created in  2022/3/4 09:28
  5.  @modified By：
  6.  @version: 1.0.0
  7.  ---------------------------------------------------------------------------->
  8. <template>
  9.   <div class="other">
  10.     <sg-row>
  11.       <sg-col :span="8">
  12.         <div>{{ form }}</div>
  13.         <sg-form :rules="rules" ref="ruleForm" :model="form" label-width="100px">
  14.           <sg-form-item label="版本号" prop="vn">
  15.             <VersionNumber v-model="form.vn" clearable :disabled="false" />
  16.           </sg-form-item>
  17.           <sg-form-item>
  18.             <sg-button type="primary" @click="submitForm('ruleForm')">立即创建</sg-button>
  19.           </sg-form-item>
  20.         </sg-form>
  21.       </sg-col>
  22.     </sg-row>
  23.   </div>
  24. </template>
  26. <script>
  27. import VersionNumber from "_c/VersionNumber/index";
  28. import * as valid from "@/utils/rules";
  29. export default {
  30.   name: "Other",
  31.   components: {
  32.     VersionNumber,
  33.   },
  34.   data() {
  35.     return {
  36.       form: {
  37.         vn: "0.0.3",
  38.       },
  39.       rules: {
  40.         vn: [
  41.           { required: true, message: "请输入活动名称", trigger: "blur" },
  42.           { validator: valid.numberValidUppers, message: "不允许输入特殊字符", trigger: "blur" },
  43.         ],
  44.       },
  45.     };
  46.   },
  47.   methods: {
  48.     submitForm(formName) {
  49.       this.$refs[formName].validate((valid) => {
  50.         if (valid) {
  51.           console.log("submitForm");
  52.           // alert("submit!");
  53.         } else {
  54.           console.log("error submit!!");
  55.           return false;
  56.         }
  57.       });
  58.     },
  59.   },
  60. };
  61. </script>
  63. <style scoped lang="scss"></style>

Vue-穿梭框组件

image.png

附件：代码

  1. <template>
  2.   <div class="usereq">
  3.     <el-row :gutter="10">
  4.       <el-col :span="14"><div class="grid-content">全部设备</div></el-col>
  5.       <el-col :span="2"><div class="grid-content"></div></el-col>
  6.       <el-col :span="8"><div class="grid-content">已选设备</div></el-col>
  7.     </el-row>
  8.     <el-row :gutter="10">
  9.       <el-col :span="14">
  10.          <div class="left_content">
  11.             <el-row :gutter="10">
  12.               <el-col :span="7">
  13.                 <el-select v-model="condition_equipment" multiple placeholder="全部设备">
  14.                   <el-option
  15.                     v-for="item in condition_equipmentArr"
  16.                     :key="item.value"
  17.                     :label="item.label"
  18.                     :value="item.value"
  19.                   ></el-option>
  20.                 </el-select>
  21.               </el-col>
  22.               <el-col :span="7">
  23.                 <el-select v-model="condition_area" multiple placeholder="全部区域">
  24.                   <el-option
  25.                     v-for="item in condition_areaArr"
  26.                     :key="item.value"
  27.                     :label="item.label"
  28.                     :value="item.value"
  29.                   ></el-option>
  30.                 </el-select>
  31.               </el-col>
  32.               <el-col :span="10">
  33.                 <el-input style="border-radius:5px;" v-model="equipment[2]"  placeholder="搜索" prefix-icon="el-icon-search"></el-input>
  34.               </el-col>
  35.             </el-row>
  36.             <el-row :gutter="10" style="padding:20px 0;margin-bottom:0;border-top:1px solid #323541;border-bottom:1px solid #323541;">
  37.               <el-col class="center" :span="3"><el-checkbox class="grid-content able_checkbox" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox></el-col>
  38.               <el-col :span="1"><div class="grid-content"></div></el-col>
  39.               <el-col :span="7"><div class="grid-content">设备编号</div></el-col>
  40.               <el-col :span="6"><div class="grid-content">设备类型</div></el-col>
  41.               <el-col :span="2"><div class="grid-content">区域</div></el-col>
  42.               <el-col :span="5"><div class="grid-content"></div></el-col>
  43.             </el-row>
  44.             <el-checkbox-group v-model="checkedleft" @change="handleCheckedLeftChange">
  45.               <el-row v-for="(equipmentInfos, index) in equipmentInfo" :key="index" :gutter="10" style="margin:0;padding:10px 0;border-bottom:1px solid #323541;">
  46.                 <div v-if="equipmentInfos.warn">
  47.                   <el-col class="center" :span="3">
  48.                     <el-checkbox class="prohibit_checkbox" disabled :label="equipmentInfos" :key="equipmentInfos.number"></el-checkbox>
  49.                   </el-col>
  50.                   <el-col :span="1"><div class="grid-content grid-Prohibit">{{index+1}}</div></el-col>
  51.                   <el-col :span="7"><div class="grid-content grid-Prohibit">{{equipmentInfos.number}}</div></el-col>
  52.                   <el-col :span="6"><div class="grid-content grid-Prohibit">{{equipmentInfos.type}}</div></el-col>
  53.                   <el-col :span="2"><div class="grid-content grid-Prohibit">{{equipmentInfos.area}}</div></el-col>
  54.                   <el-col :span="5"><div class="grid-content grid-Prohibit">{{equipmentInfos.warn}}</div></el-col>
  55.                 </div>
  56.                 <div v-else>
  57.                   <el-col class="center" :span="3">
  58.                     <el-checkbox class="able_checkbox" :label="equipmentInfos" :key="equipmentInfos.number"></el-checkbox>
  59.                   </el-col>
  60.                   <el-col :span="1"><div class="grid-content">{{index+1}}</div></el-col>
  61.                   <el-col :span="7"><div class="grid-content">{{equipmentInfos.number}}</div></el-col>
  62.                   <el-col :span="6"><div class="grid-content">{{equipmentInfos.type}}</div></el-col>
  63.                   <el-col :span="2"><div class="grid-content">{{equipmentInfos.area}}</div></el-col>
  64.                 </div>
  65.               </el-row>
  66.             </el-checkbox-group>
  67.          </div>
  68.       </el-col>
  69.       <el-col :span="2">
  70.         <div class="center_content">
  71.           <div class="center_content_r">
  72.             <div class="rule_btn rule_btn_left" icon="el-icon-plus" type="warning" @click="PutDataToRight()">
  73.               <img src="./img/left.png">
  74.             </div>
  75.            <div style="margin-top:20px" class="rule_btn rule_btn_right" icon="el-icon-plus" type="warning" @click="PutDataToLeft()">
  76.               <img src="./img/left.png">
  77.            </div>
  78.           </div>
  79.         </div>
  80.       </el-col>
  81.       <el-col :span="8">
  82.         <div class="left_content">
  83.             <el-row :gutter="10" style="padding:20px 0;margin-bottom:0;border-bottom:1px solid #323541;">
  84.               <el-col class="center" :span="6"><el-checkbox class="grid-content able_checkbox" :indeterminate="risIndeterminate" v-model="rcheckAll" @change="rhandleCheckAllChange">全选</el-checkbox></el-col>
  85.               <el-col :span="4"><div class="grid-content"></div></el-col>
  86.               <el-col :span="14"><div class="grid-content">设备编号</div></el-col>
  87.             </el-row>
  88.             <el-checkbox-group v-model="rcheckedleft" @change="rhandleCheckedLeftChange">
  89.               <el-row v-for="(requipmentInfos, index) in requipmentInfo" :key="index" :gutter="10" style="margin:0;padding:10px 0;border-bottom:1px solid #323541;">
  90.                   <el-col class="center" :span="6">
  91.                     <el-checkbox class="able_checkbox" :label="requipmentInfos" :key="requipmentInfos.number"></el-checkbox>
  92.                   </el-col>
  93.                   <el-col :span="4"><div class="grid-content">{{index+1}}</div></el-col>
  94.                   <el-col :span="14"><div class="grid-content">{{requipmentInfos.number}}</div></el-col>
  95.               </el-row>
  96.             </el-checkbox-group>
  97.         </div>
  98.       </el-col>
  99.     </el-row>
  100.   </div>
  101. </template>
  102. <script>
  103. export default {
  104.   data() {
  105.     return {
  106.       equipment: ['', '', ''], // 查询条件
  107.       checkAll: false,
  108.       isIndeterminate: true,
  109.       checkedleft: [],
  110.       rcheckAll: false,
  111.       risIndeterminate: true,
  112.       rcheckedleft: [],
  113.       condition_equipment: '',
  114.       condition_area: '',
  115.       condition_equipmentArr: [], // 查询条件code
  116.       condition_areaArr: [],
  117.       equipmentInfo: [
  118.         {
  119.           number: 'AHU-L28-01',
  120.           type: 'AHU',
  121.           area: 'L55'
  122.         },
  123.         {
  124.           number: 'AHU-L28-02',
  125.           type: 'AHU',
  126.           area: 'L55',
  127.           warn: '数据不足'
  128.         },
  129.         {
  130.           number: 'AHU-L28-03',
  131.           type: 'AHU',
  132.           area: 'L55'
  133.         }
  134.       ],
  135.       requipmentInfo: [
  136.         {
  137.           number: 'AHU-L28-05',
  138.           type: 'AHU',
  139.           area: 'L55'
  140.         }
  141.       ]
  142.     }
  143.   },
  144.   methods: {
  145.     handleCheckAllChange(val) {
  146.       this.checkedleft = val ? this.equipmentInfo : []
  147.       this.isIndeterminate = false
  148.     },
  149.     handleCheckedLeftChange(v) {
  150.       const checkedCount = v.length
  151.       this.checkAll = checkedCount === this.equipmentInfo.length
  152.       this.isIndeterminate = checkedCount > 0 && checkedCount < this.equipmentInfo.length
  153.     },
  154.     rhandleCheckAllChange(val) {
  155.       this.rcheckedleft = val ? this.requipmentInfo : []
  156.       this.risIndeterminate = false
  157.     },
  158.     rhandleCheckedLeftChange(v) {
  159.       const checkedCount = v.length
  160.       this.rcheckAll = checkedCount === this.requipmentInfo.length
  161.       this.risIndeterminate = checkedCount > 0 && checkedCount < this.requipmentInfo.length
  162.     },
  163.     PutDataToRight() {
  164.       console.log(JSON.parse(JSON.stringify(this.checkedleft)))
  165.       this.requipmentInfo = this.handleConcatArr(this.requipmentInfo, this.checkedleft)
  166.       this.handleRemoveTabList(this.checkedleft, this.equipmentInfo)
  167.       console.log(this.equipmentInfo)
  168.       this.checkedleft = []
  169.     },
  170.     PutDataToLeft() {
  171.       this.equipmentInfo = this.handleConcatArr(this.equipmentInfo, this.rcheckedleft)
  172.       this.handleRemoveTabList(this.rcheckedleft, this.requipmentInfo)
  173.       this.rcheckedleft = []
  174.     },
  175.     handleConcatArr(selectArr, nowSelectData) {
  176.       let arr = []
  177.       arr = arr.concat(selectArr, nowSelectData)
  178.       return arr
  179.     },
  180.     handleRemoveTabList(checkArr, originalArr) {
  181.       for (const item of checkArr) {
  182.         if (originalArr.indexOf(item) > -1) {
  183.           this.$nextTick(() => {
  184.             originalArr.splice(originalArr.indexOf(item), 1)
  185.           })
  186.         }
  187.       }
  188.     }
  189.   }
  190. }
  191. </script>
  192. <style lang="scss" scoped>
  193. .usereq{
  194.   .el-row{
  195.       margin: 20px 0 !important;
  196.     }
  197.    .grid-content,.grid-Prohibit {
  198.     text-align: center;
  199.     color: #fff;
  200.     font-size: 16px;
  201.     border-radius: 4px;
  202.     min-height: 36px;
  203.   }
  204.   .grid-Prohibit {
  205.     color: #414346;
  206.   }
  207.    .grid-content /deep/.el-checkbox__label{
  208.      font-size:16px;
  209.    }
  210.   .left_content{
  211.     height:500px;
  212.     padding:0 20px 20px 20px;
  213.     overflow-y: auto;
  214.     background: #020913;
  215.     border-radius:5px;
  216.   }
  217.   .center_content{
  218.     height:500px;
  219.     display: flex;
  220.     justify-content: center;
  221.     align-items: center;
  222.     border-radius:5px;
  223.   }
  224.   .el-select,/deep/ .el-input--small .el-input__inner{
  225.       color:#616B80;
  226.       width:100%;
  227.       background: #152841;
  228.       border-color:#152841;
  229.       border-radius: 5px;
  230.   }
  231.   /deep/ .el-checkbox-group .el-checkbox__label{
  232.     display: none;
  233.   }
  234.   .able_checkbox /deep/ .el-checkbox__inner {
  235.     border-color: #868692;
  236.     background: #020913;
  237.   }
  238.   .prohibit_checkbox /deep/.el-checkbox__inner{
  239.     border-color: #414346;
  240.     background: #020913;
  241.   }
  242.   .center{
  243.     text-align: center;
  244.   }
  245.   .center_content_r{
  246.     width:75%;
  247.     height:180px;
  248.   }
  249.   .rule_btn{
  250.     width:100%;
  251.     height:60px;
  252.     background:#152841;
  253.     float:left;
  254.     border:none;
  255.   }
  256.   .rule_btn_left, .rule_btn_right{
  257.     background: #152841;
  258.     display: flex;
  259.     align-items: center;
  260.     justify-content: center;
  261.     cursor: pointer;
  262.     border-radius:3px;
  263.   }
  264.   .rule_btn_left img{
  265.    transform:rotate(180deg);
  266.   }
  267.   .rule_btn_left:hover, .rule_btn_right:hover{
  268.     background:#1E3A5F
  269.   }
  270. }
  272. </style>