zhengbasai/library/components/SortInput/index.vue

<!--
 * @FilePath: index.vue
 * @Author: 旭颖
 * @Date: 2024-08-29 14:19:28
 * @LastEditors: liangxvying 1615026511@qq.com
 * @LastEditTime: 2024-11-01 22:26:34
-->
<template>
  <div class="edit">
    <el-icon
      class="no-inherit"
      color="#409efc"
      v-if="editForm.id == row.id && editStatus == 1"
      @click="cancelSort(row)"
      size="18"
    >
      <CircleClose />
    </el-icon>
    <span
      v-if="editForm.id !== row.id || editStatus == 0"
      class="sort-num"
      size="18"
    >
      {{ row.sort }}
    </span>

    <el-input
      v-if="editForm.id == row.id && editStatus == 1"
      ref="getFocus"
      v-model="row.sort"
      class="input-sort"
      @input="inputSort"
    />

    <el-icon
      class="no-inherit"
      color="#409efc"
      v-if="editForm.id !== row.id || editStatus == 0"
      @click="changeSort(row)"
      size="18"
    >
      <Edit />
    </el-icon>
    <el-icon
      class="no-inherit"
      color="#409efc"
      size="18"
      v-if="editForm.id == row.id && editStatus == 1"
      @click="sureChange"
    >
      <CircleCheck />
    </el-icon>
  </div>
</template>

<script>
  import { putApi } from '@/api/api'
  import {
    Delete,
    Plus,
    Search,
    Upload,
    Download,
    Refresh,
  } from '@element-plus/icons-vue'
  export default defineComponent({
    name: 'RoleManagement',
    props: {
      row: {
        type: Object,
        default: {},
      },
      api: {
        type: Object,
        default: '',
      },
    },
    setup(props, { emit }) {
      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')
      const state = reactive({
        //修改排序
        oldSort: 0,
        editForm: '',
        editStatus: 0, //排序编辑状态 0为正常 1显示输入框
        getFocus: null,
      })

      //修改排序事件
      const changeSort = (row) => {
        state.editStatus = 1
        state.editForm = row
        state.oldSort = row.sort
        nextTick(() => {
          state['getFocus'].focus()
        })
      }
      const cancelSort = (row) => {
        state.editStatus = 0
        row.sort = state.oldSort
      }
      //修改排序
      const inputSort = (e) => {
        console.log(e, '000000000')
        state.editForm.sort = e
      }
      const sureChange = async () => {
        state.editStatus = 0
        if (state.oldSort !== state.editForm.sort) {
          const { message } = await putApi(props.api, state.editForm)
          $baseMessage(message, 'success', 'vab-hey-message-success')
          emit('fetch-data')
        } else {
          return
        }
      }

      return {
        ...toRefs(state),
        Delete,
        Plus,
        Search,
        Upload,
        Download,
        Refresh,
        cancelSort,
        inputSort,
        sureChange,
        changeSort,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .edit {
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    justify-content: center;
  }
  .input-sort {
    display: inline-block;
    width: 80px;
    margin-right: 10px;
    margin-left: 10px;

    border: none;
  }
  .no-inherit {
    color: #1890ff;
    cursor: pointer;
  }
  .sort-num {
    display: inline-block;
    margin-right: 10px;
  }
</style>