github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/views/Plugins/components/SettingsEditor.vue (about)

     1  <script setup lang="ts">
     2  import {useI18n} from '@/hooks/web/useI18n'
     3  import {Table} from '@/components/Table'
     4  import {computed, PropType, reactive, ref, unref, watch} from 'vue'
     5  import {TableColumn} from '@/types/table'
     6  import {ElButton, ElInput, ElInputNumber, ElSelect, ElOption} from 'element-plus'
     7  import {ApiAttribute} from "@/api/stub";
     8  import {useEmitt} from "@/hooks/web/useEmitt";
     9  
    10  const { emitter } = useEmitt()
    11  const {t} = useI18n()
    12  
    13  
    14  interface TableObject {
    15    tableList: ApiAttribute[]
    16    loading: boolean
    17  }
    18  
    19  const props = defineProps({
    20    attrs: {
    21      type: Array as PropType<ApiAttribute[]>,
    22      default: () => []
    23    }
    24  })
    25  
    26  
    27  const tableObject = reactive<TableObject>(
    28      {
    29        tableList: [],
    30        loading: false,
    31      },
    32  );
    33  
    34  const columns: TableColumn[] = [
    35    {
    36      field: 'name',
    37      label: t('plugins.name'),
    38      width: "170px"
    39    },
    40    {
    41      field: 'type',
    42      label: t('plugins.attrType'),
    43      width: "100px"
    44    },
    45    {
    46      field: 'value',
    47      label: t('plugins.attrValue'),
    48    },
    49  ]
    50  
    51  
    52  watch(
    53      () => props.attrs,
    54      (currentRow) => {
    55        if (!currentRow) return
    56        tableObject.tableList = currentRow
    57      },
    58      {
    59        deep: true,
    60        immediate: true
    61      }
    62  )
    63  
    64  const boolOptions = [
    65    {
    66      value: true,
    67      label: 'TRUE',
    68    },
    69    {
    70      value: false,
    71      label: 'FALSE',
    72    },
    73  ]
    74  
    75  const save = async () => {
    76    const settings = unref(tableObject.tableList)
    77    emitter.emit('settingsUpdated', settings)
    78  }
    79  </script>
    80  
    81  <template>
    82    <Table
    83        :selection="false"
    84        :columns="columns"
    85        :data="tableObject.tableList"
    86        :loading="tableObject.loading"
    87        style="width: 100%"
    88    >
    89  
    90      <template #value="{ row }">
    91        <div v-if="row.type === 'STRING'">
    92          <el-input type="string" v-model="row.string"/>
    93        </div>
    94        <div v-if="row.type === 'IMAGE'">
    95          <el-input type="string" v-model="row.imageUrl"/>
    96        </div>
    97        <div v-if="row.type === 'ICON'">
    98          <el-input type="string" v-model="row.icon"/>
    99        </div>
   100        <div v-if="row.type === 'INT'" class="w-[100%]">
   101          <ElInputNumber  v-model="row.int" class="w-[100%]"/>
   102        </div>
   103        <div v-if="row.type === 'FLOAT'">
   104          <el-input type="number" v-model="row.float"/>
   105        </div>
   106        <div v-if="row.type === 'ARRAY'">
   107          <el-input type="string" v-model="row.array"/>
   108        </div>
   109        <div v-if="row.type === 'POINT'">
   110          <el-input type="string" v-model="row.point"/>
   111        </div>
   112        <div v-if="row.type === 'ENCRYPTED'">
   113          <el-input type="password" v-model="row.encrypted" show-password/>
   114        </div>
   115        <el-select v-model="row.bool" placeholder="please select value" v-if="row.type === 'BOOL'">
   116          <el-option
   117              v-for="item in boolOptions"
   118              :key="item.value"
   119              :label="item.label"
   120              :value="item.value"
   121          />
   122        </el-select>
   123  
   124        <div v-if="row.type === 'TIME'">
   125          <el-input type="string" v-model="row.time"/>
   126        </div>
   127  
   128        <div v-if="row.type === 'MAP'">
   129          <el-input type="string" v-model="row.map"/>
   130        </div>
   131      </template>
   132    </Table>
   133  
   134    <div style="text-align: right" class="mt-20px">
   135      <ElButton type="primary" @click="save()">
   136        {{ t('main.save') }}
   137      </ElButton>
   138    </div>
   139  
   140  </template>
   141  
   142  <style lang="less">
   143  
   144  </style>