Smartline Technical Blog

<template>
  <swiper
    class="swipercard"
    :circular="true"
    :autoplay="false"
    :current="swiperCurrentIndex"
    @change="eventHandle"
    :duration="300"
  >
    <block v-for="(item, index) in swiperList" :key="item.id">
      <swiper-item class="swiperItem">
        <view>{{item.name}}</view>
      </swiper-item>
    </block>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      questionList: [ { id: 1, name: 'Question 1' }, ... ], // Full dataset
      swiperList: [], // The 3-item sliding window
      questionListIndex: 0, // Index of current item in full dataset
      swiperCurrentIndex: 0, // Current index within the 3-item swiper
    };
  },
  onLoad() {
    this.upDateSwiperList();
  },
  methods: {
    eventHandle(e) {
      let current = e.detail.current;
      
      // Detect forward slide
      if (this.swiperCurrentIndex - current == 2 || this.swiperCurrentIndex - current == -1) {
        this.questionListIndex = (this.questionListIndex + 1 == this.questionList.length) ? 0 : this.questionListIndex + 1;
        this.swiperCurrentIndex = (this.swiperCurrentIndex + 1 == 3) ? 0 : this.swiperCurrentIndex + 1;
        this.upDateSwiperList();
      }
      // Detect backward slide
      else if (this.swiperCurrentIndex - current == -2 || this.swiperCurrentIndex - current == 1) {
        this.questionListIndex = (this.questionListIndex - 1 == -1) ? this.questionList.length - 1 : this.questionListIndex - 1;
        this.swiperCurrentIndex = (this.swiperCurrentIndex - 1 == -1) ? 2 : this.swiperCurrentIndex - 1;
        this.upDateSwiperList();
      }
    },
    upDateSwiperList() {
      let displayList = [];
      // Current item
      displayList[this.swiperCurrentIndex] = this.questionList[this.questionListIndex];
      
      // Previous item
      let prevIdx = this.swiperCurrentIndex - 1 == -1 ? 2 : this.swiperCurrentIndex - 1;
      let prevDataIdx = this.questionListIndex - 1 == -1 ? this.questionList.length - 1 : this.questionListIndex - 1;
      displayList[prevIdx] = this.questionList[prevDataIdx];

      // Next item
      let nextIdx = this.swiperCurrentIndex + 1 == 3 ? 0 : this.swiperCurrentIndex + 1;
      let nextDataIdx = this.questionListIndex + 1 == this.questionList.length ? 0 : this.questionListIndex + 1;
      displayList[nextIdx] = this.questionList[nextDataIdx];

      this.swiperList = displayList;
    }
  }
};
</script>

<template>
  <el-tree-select
    v-model="formDataModel.deptId"
    lazy
    :load="loadNode"
    filterable
    remote
    :filter-method="remoteMethod"
    :data="deptOptions"
    :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
    :loading="treeloading"
    value-key="deptId"
  />
</template>

<script setup>
import { ref } from 'vue';

const treeloading = ref(false);
const deptOptions = ref([]);

// Lazy load child nodes
const loadNode = (node, resolve) => {
  findRootListByDeptIdList({
    parentId: node.data.deptId
  }).then((res) => {
    return resolve(res.data);
  });
};

// Remote search method
const remoteMethod = (query) => {
  if (query) {
    treeloading.value = true;
    findRootListByDeptIdList({
      deptName: query
    }).then((res) => {
      deptOptions.value = res.data;
      treeloading.value = false;
    });
  }
};
</script>

<template>
  <el-form :model="fullInfo" ref="form">
    <el-row v-for="(item, index) in beltData" :key="item.id">
      <el-col :span="12">
        <el-form-item
          :rules="rules.weightRule"
          :label="item.label"
          :prop="`data.${index}.muckWeight`"
          label-width="100px">
          <el-input v-model="fullInfo.data[index].muckWeight"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item>
      <el-button type="primary" @click="submitForm">Submit</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      beltData: [{ id: 1, label: 'Ring 1' }],
      fullInfo: {
        data: [{ muckWeight: '' }]
      },
      rules: {
        weightRule: [
          { required: true, message: 'Field cannot be empty', trigger: 'change' },
          { pattern: '^[0-9]+$', message: 'Please enter a valid number' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) alert('submit!')
      })
    }
  }
}
</script>

git rm --cached "filename"

<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
    <el-form-item label="Activity Name" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: ''
      },
      rules: {
        name: [
          { required: true, message: 'Please input activity name', trigger: 'blur' },
          { min: 3, max: 5, message: 'Length should be 3 to 5 characters', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          return false
        }
      })
    }
  }
}
</script>

/* Option 1: Declare color AFTER the image */
background: url('./images/banner11.png') no-repeat scroll left bottom/cover;
background-color: #f5f5f5;

/* Option 2: Use the shorthand property */
background: #f5f5f5 url('./images/banner11.png') no-repeat scroll left bottom/cover;