shuiwu/src/system/moduleNormal/customOptions/modules/detail.vue

<template>
  <div>
    <a-button type="link" @click="showDrawer">管理二级</a-button>
    <a-drawer
      v-model:visible="visible"
      class="custom-class"
      title="二级分类"
      placement="right"
      width="900"
      :closable="false"
      @close="onClose"
    >
    <a-button class="mt-10" type="primary" @click="showModal">添加分类</a-button>
    <normalTable rowKey="optiontypemxid" ref="list" size="small" :param="param" :columns="utils.TBLayout('optionDetailsTable')">
      <template #tb_cell="{data}">
        <template v-if="data.column.dataIndex == 'subvalues'">
          <a-tag v-for="item in data.record.subvalues" :key="item.optiontypeid">{{item}}</a-tag>
        </template>
        <template v-if="data.column.dataIndex == 'operation'">
          <a-space v-if="data.record.siteid !== ''">
            <a-button type="link" @click="editOption(data.record)">编辑</a-button>
            <a-button type="link" @click="deleteOption(data.record)">删除</a-button>
          </a-space>
        </template>
      </template>
    </normalTable>
      <template #extra>
        <a-space>
          <a-button @click="onClose">关闭</a-button>
        </a-space>
      </template>
    </a-drawer>
    <a-modal
      v-model:visible="modalVisble"
      class="custom-class"
      title="分类"
      placement="right"
      size="900"
      :closable="false"
      @close="onClose"
      @ok="submit">
      <a-form ref="formRef" :model="form" size="small" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="分类名称" name="value" :rules="[{ required: true, message: '请输入分类名称' }]">
              <a-input v-model:value="form.value" placeholder="分类名称" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="分类描述" name="remarks" :rules="[{ required: true, message: '请输入分类描述' }]">
              <a-input v-model:value="form.remarks" placeholder="分类描述" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="二级分类">
              <a-tag v-for="item in form.subvalues" :key="item.index"  @close="handleClose(item)" closable>{{item}}</a-tag>
              <a-input
                v-if="inputVisible"
                ref="inputRef"
                v-model:value="inputValue"
                type="text"
                size="small"
                :style="{ width: '78px' }"
                @blur="handleInputConfirm"
                @keyup.enter="handleInputConfirm"
              />
              <a-tag v-else style="background: #fff; border-style: dashed" @click="showInput">
                <plus-outlined />
                添加子分类
              </a-tag>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import {ref,defineProps,nextTick} from 'vue'
import Api from '@/api/api'
import utils from '@/utils/utils'
import normalTable from '@/template/normalTable/index.vue'
import { PlusOutlined } from '@ant-design/icons-vue';

const props = defineProps(['id'])
const visible = ref(false)
const inputVisible= ref(false)
const inputValue = ref('')
const modalVisble = ref(false)
const param = ref({
  "id": 20220901092501,
  "content": {
    "pageNumber": 1,
    "pageSize": 20,
    "optiontypeid":props.id
  }
})
const list = ref()
const form = ref({
  "optiontypeid":props.id,
  "optiontypemxid":0,
  "isused":"1",
  "value":"",
  "remarks":"",
  "subvalues":[],
  "sequence":0
})

const showDrawer = ()=>{
  visible.value = true
  setTimeout(() => {
    list.value.listData()
  }, 1000);
  
}
const showModal = ()=>{
  modalVisble.value = true
}
const inputRef = ref()
const showInput = () => {
  inputVisible.value = true;
  nextTick(() => {
    inputRef.value.focus();
  });
};
 const handleInputConfirm = () => {
  if (inputValue.value && inputValue.value !== '') {
    form.value.subvalues.push(inputValue.value)
    inputValue.value = ''
  }
  inputVisible.value = false
};
const handleClose = (tag)=>{
  form.value.subvalues = form.value.subvalues.filter(e=>{
    if (e !== tag) {
      return e
    }
  })
  console.log(form.value.subvalues)
}
const onClose = () => {
  visible.value = false;
};
const formRef = ref()
const submit = async ()=>{
  try {
    const values = await formRef.value.validateFields();
    const res = await Api.requested({
      id:20220901092601,
      content:form.value
    })
    utils.message(res,'添加成功',()=>{
      list.value.listData()
      modalVisble.value = false
      formRef.value.resetFields();
      form.value.subvalues = []
    })
  } catch (errorInfo) {
    console.log('Failed:', errorInfo);
  }
}
const deleteOption = async (data)=>{
  const res = await Api.requested({
    id:20220901092701,
    content:{
      optiontypemxid:data.optiontypemxid
    }
  })
  utils.message(res,'删除成功',()=>{
    list.value.listData()
  })
}
const editOption = (data)=>{
  modalVisble.value = true
  form.value = Object.assign({},form.value,data)
}
</script>
<style>
</style>