foms/app/public/admin/templates/components/affiliate1.vue

<template>
<h1>
<span class="action-span"><a href="privilege.php?act=add">添加管理員</a></span>
<span class="action-span1"><a href="index.php?act=main">商城網站管理中心</a> </span><span id="search_id" class="action-span1"> - 管理員列表 </span>
<div style="clear:both"></div>
</h1>
<div class="form-div">
  <a-radio-group v-model:value="affiliate.on" name="on">
    <a-radio :value="1">開</a-radio>
    <a-radio :value="0">關</a-radio>
  </a-radio-group>    
</div>
<div id="separate" v-if="affiliate.on === 1">
<div>
    <a-form
    :model="affiliate.config"
    name="affiliateForm"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item
      label="推薦有效時間"
      name="expire"
      :rules="[{ required: true, message: '推薦有效時間必填!' }]"
    >
      <a-input v-model:value="affiliate.config.expire" />
    </a-form-item>

    <a-form-item :wrapper-col="{ span: 16 }">
      <a-button type="primary" html-type="submit">確定</a-button>
    </a-form-item>
  </a-form>
</div>
<div id="listDiv">
    <a-table bordered :data-source="tableData" :columns="columns">
        <template #bodyCell="{ column, index, text, record }">
        <template v-if="column.dataIndex === 'no'">
          {{ index + 1 }}
        </template>


        <template v-else-if="column.dataIndex === 'level_money'">
        <div class="editable-cell">
          <!-- <div v-if="editableData[index]" class="editable-cell-input-wrapper"> -->
            <!-- <a-input v-model:value="editableData[index].level_money" @pressEnter="save(index)" /> -->
            <!-- <check-outlined class="editable-cell-icon-check" @click="save(index)" /> -->
          <!-- </div> -->
          <div  class="editable-cell-text-wrapper">
            {{ text || ' ' }}
            <edit-outlined class="editable-cell-icon" @click="edit(index)" />
          </div>
        </div>
        </template>

        <template v-else-if="column.dataIndex === 'action'">
          <a>Delete</a>
        </template>
        </template>
    </a-table>
</div>
</div>

</template>

<script setup>
import { ref, onMounted } from 'vue'

const columns = [
      {
        title: '級別',
        dataIndex: 'no',
        width: '30%',
      },
      {
        title: '積分分成百分比',
        dataIndex: 'level_point',
      },
      {
        title: '現金分成百分比',
        dataIndex: 'level_money',
      },
      {
        title: '操作',
        dataIndex: 'action',
        key: 'action'
      },
];

onMounted(() => {
    init()    
})

const affiliate = ref({
    config:{
        expire: 24,
        expire_unit: 'hour',
        separate_by: '1',
        level_point_all: '5%',
        level_money_all: '1%',
        level_register_all: '2',
        level_register_up: '50'
    },
    item:[],
    on: 1
})


const tableData = ref([])

const init = async () =>{
    let res = await axios.get('https://shop.h888.fun/admin/affiliate.php?act=get_config')
    affiliate.value = res.data.data
    tableData.value = affiliate.value.item
}

const edit = key => {
    console.log(key)
    //   editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
};

const handleDelete = ()=>{

}

</script>

<style lang="less">
.editable-cell {
  position: relative;
  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
}
.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}
</style>