wms-antdvue/.svn/pristine/70/709f3aa03c2a382cb9761059348483b2d6d4b0c5.svn-base

<template>
  <PageWrapper>
    <a-row :gutter="10" class="mt-3">
      <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="mb-4">
        <a-card shadow="hover" class="border-0">
          <template #title>
            <a-row>
              <a-col :span="18">
                <a-input type="text" v-model:value="params.name" placeholder="请输入配置名称" allow-clear/>
              </a-col>
              <a-col :span="6" style="text-align: right;">
                <a-button type="primary" @click="pager.page=1;loadDataTable()"> 
                  <template #icon>
                    <SearchOutlined />
                  </template>查询
              </a-button>
              </a-col>
            </a-row>
            <div style="margin-top:15px;">
              <a-space>
                <a-button type="primary" @click="addConfig"  v-perm="['sys:config:add']">
                  <template #icon>
                      <PlusOutlined />
                    </template>
                    新建
                </a-button>
                <a-button type="warning" @click="handleEdit" v-perm="['sys:config:edit']">
                  <template #icon>
                      <EditOutlined />
                    </template>编辑
                </a-button>
                <a-button type="danger" @click="handleDelete()" v-perm="['sys:config:delete']">
                  <template #icon>
                      <DeleteOutlined />
                    </template>删除
                </a-button>
            </a-space>
            </div>
          </template>
          <div :style="{ height: fwbHeight + 'px' }" class="dict-list-box">
            <div v-for="(item, index) in configDataList" :key="index" @click="onCheckedRow(item)" class="dict-item"
              :class="item.id == configId ? 'active' : ''">
              <span class="t1">{{ item.name }}<span class="t2">({{ item.code }})</span></span>
            </div>
          </div>
          <pagination style="justify-content: flex-end" class="mt-10 flex" @change="loadDataTable" v-model="pager">
          </pagination>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" class="mb-4">
        <a-card shadow="hover" class="mb-4 border-0 proCard">
          <configItem :configId="configId" v-if="configItemShow"></configItem>
        </a-card>
      </a-col>
    </a-row>
    <editDialog v-if="editVisible" :configId="configId" v-model:visible="editVisible" @success="loadDataTable()">
    </editDialog>
  </PageWrapper>
</template>

<script lang="ts" setup>
import { ref,nextTick, defineAsyncComponent,onMounted } from 'vue';
import { SearchOutlined }  from '@ant-design/icons-vue';;
import { getConfigList, configDelete } from '@/api/data/config';
import { PlusOutlined,EditOutlined,DeleteOutlined} from '@ant-design/icons-vue';
import configItem from './configItem.vue';
import { Modal,message } from 'ant-design-vue';
const editDialog = defineAsyncComponent(() =>
  import('./edit.vue')
)
const configId = ref(0)
const configItemShow = ref(false)
const tableRef = ref();
const editVisible = ref(false)
const params = ref({
  name: '',
});
const configDataList = ref([])
const pager = ref({
  page: 1,
  size: 10,
  count: configDataList.value.length
});
const fwbHeight = document.body.clientHeight - 415


const addConfig = async () => {
  configId.value=0
  await nextTick();
  editVisible.value=true
};

const handleEdit = () => {
  editVisible.value=true
};

function onCheckedRow(row) {
  configId.value = row.id
}


const loadDataTable = async () => {
  const result = await getConfigList({ ...params.value, pageNo:pager.value.page,pageSize:pager.value.size });
  configId.value = result?.records[0]?.id
  configItemShow.value = true
  configDataList.value = result.records
  pager.value.count = result.total
};

async function handleDelete() {
  Modal.confirm({
      title: '提示',
      content: "确定要删除？",
      onOk: async () => {
        configDelete(configId.value);
          message.success("删除成功");
          pager.value.page = 1
          loadDataTable()
      }
    });
}
onMounted(() => {
  loadDataTable()
})
</script>
<style lang="less" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dict-list-box {
  overflow: auto;
  .dict-item {
    height: 40px;
    line-height: 40px;
    padding: 0 6px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;

    .t1 {
      font-size: 14px;
      display: block;
      font-weight: 700;
      .t2 {
        font-size: 12px;
        font-weight: normal;
      }
    }

    &.active {
      background-color: #e8f1ff;
      border-radius: 3px;

      .t1 {
        color: #1677ff;
      }
      .t2 {
        color:rgb(22, 119, 255,.8)
      }
    }

    .ant-badge__content.is-fixed {
      top: 20px;
      right: calc(-10px + var(--ant-badge-size)/ 2);
    }
  }
}
</style>