初始化

ny

昨天 282fbc6488f4e8ceb5fda759f963ee88fbf7b999

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<script lang="ts" setup>
import { computed, ref, unref } from 'vue';
 
import { useMessage } from '@jnpf/hooks';
 
const props = defineProps(['conf', 'appConf']);
defineExpose({ getData });
const { createMessage } = useMessage();
 
const columns = [
  { title: '序号', width: 50, align: 'center', customRender: ({ index }) => index + 1 },
  { title: '名称', dataIndex: 'fullName', key: 'fullName' },
  { title: '编码', dataIndex: 'enCode', key: 'enCode' },
  { title: '操作', dataIndex: 'action', key: 'action', width: 50, align: 'center' },
];
const showType = ref('pc');
 
const getList = computed(() => (showType.value == 'pc' ? props.conf : props.appConf));
 
function getData() {
  return new Promise((resolve) => {
    if (!exist(props.conf) || !exist(props.appConf)) return;
    resolve({ target: 1 });
  });
}
function exist(list) {
  let isOk = true;
  for (let i = 0; i < list.length; i++) {
    const e = list[i];
    if (!e.fullName) {
      createMessage.warning('名称不能为空');
      isOk = false;
      break;
    }
    if (!e.enCode) {
      createMessage.warning('编码不能为空');
      isOk = false;
      break;
    }
    const idNum = list.filter((o) => o.enCode == e.enCode);
    if (idNum.length > 1) {
      createMessage.warning(`编码'${e.enCode}'已重复`);
      isOk = false;
      break;
    }
  }
  return isOk;
}
function handleDelItem(index) {
  unref(getList).splice(index, 1);
}
function handleAdd() {
  const item = { fullName: '', enCode: '' };
  unref(getList).push(item);
}
</script>
<template>
  <div class="sys-form-title-content">
    <jnpf-group-title content="按钮设置" :bordered="false" />
    <div class="action-bar">
      <div class="action-bar-left">
        <div class="jnpf-device-switch">
          <div class="jnpf-device-switch-item" :class="{ 'jnpf-device-switch-item--active': showType === 'pc' }" @click="showType = 'pc'">
            <a-tooltip title="PC">
              <i class="icon-ym icon-ym-pc"></i>
            </a-tooltip>
          </div>
          <div class="jnpf-device-switch-item" :class="{ 'jnpf-device-switch-item--active': showType === 'app' }" @click="showType = 'app'">
            <a-tooltip title="APP">
              <i class="icon-ym icon-ym-mobile"></i>
            </a-tooltip>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a-table :data-source="getList" :columns="columns" size="small" :pagination="false" row-key="id">
    <template #bodyCell="{ column, record, index }">
      <template v-if="column.key === 'fullName'">
        <a-input v-model:value="record.fullName" placeholder="输入名称" allow-clear />
      </template>
      <template v-if="column.key === 'enCode'">
        <a-input v-model:value="record.enCode" placeholder="输入编码" allow-clear />
      </template>
      <template v-if="column.key === 'action'">
        <a-button class="action-btn" type="link" color="error" @click="handleDelItem(index)" size="small">删除</a-button>
      </template>
    </template>
  </a-table>
  <div class="table-add-action" @click="handleAdd">
    <a-button type="link" pre-icon="icon-ym icon-ym-btn-add">新增一行</a-button>
  </div>
</template>