iot-fontend/src/views/iot/product/components/product-edit.vue

<template>
  <a-button v-permission="['iot:product:create']" v-if="props.isCreate" type="primary" @click="handleClick">
    <template #icon><icon-plus /></template>
    新建
  </a-button>
  <a-button
    v-permission="['iot:product:update']"
    v-if="!props.isCreate"
    type="outline"
    size="small"
    :style="{ marginRight: '10px', padding: '7px' }"
    @click="handleClick"
  >
    <template #icon><icon-edit /></template>
    修改
  </a-button>

  <a-modal
    width="900px"
    height="500px"
    :visible="visible"
    @cancel="handleCancel"
  >
    <template #title>{{ modalTitle }}</template>
    <a-form
      ref="CreateRef"
      :model="formData"
      :style="{ width: '800px',height: '420px' }"
    >
      <!-- 产品名称 -->
      <a-form-item
        field="name"
        label='产品名称'
        :rules="[{ required: true, message: '产品名称不能为空' }]"
        :validate-trigger="['change']"
      >
        <a-input
          v-model="formData.name"
          placeholder='请输入产品名称'
        />
      </a-form-item>
      <!-- 产品分类-->
      <a-form-item
        field="productType"
        label="产品分类"
        :rules="[{ required: true, message: '产品分类不能为空' }]"
        :validate-trigger="['change']"
      >
        <a-input
          v-model="formData.productType"
          placeholder='请选择产品分类'
        />
      </a-form-item>
      <!-- 产品类型 -->
      <a-form-item
        field="model"
        label="类型"
        :rules="[{ required: true, message: '产品类型不能为空' }]"
        :validate-trigger="['change']"
      >
        <a-input
          v-model="formData.model"
          placeholder='请输入产品类型'
        />
      </a-form-item>
      <!-- 接入方式 -->
      <a-form-item
        field="link"
        label="接入"
        :rules="[{ required: true, message: '接入方式不能为空' }]"
        :validate-trigger="['change']"
      >
        <a-select
          v-model="formData.link"
          placeholder='请输入接入方式'
          :options="linkOptions"
          allow-search
        />
      </a-form-item>
      <!-- 备注 -->
      <a-form-item
        field="remark"
        label="备注"
      >
        <a-textarea
          v-model="formData.remark"
          placeholder='请输入备注'
        />
      </a-form-item>
      <!-- 参数   -->
      <a-form-item
        field="params"
        label="参数"
      >
        <div style="width: 100%">
          <div style="width: 100%;margin-bottom: 5px; ">
            <a-space v-for="(param,index) in paramsData" :key="index" style="margin-bottom: 5px">
              <a-input v-model="param.name"  placeholder="名称" allow-clear />
              <a-input v-model="param.identifier"  placeholder="标识" allow-clear />
              <a-select v-model="param.dataType" :options="dataTypeOptions" allow-search placeholder="数据类型" style="width: 140px"/>
              <a-select v-model="param.type" :options="typeOptions" allow-search placeholder="类型" style="width: 140px"/>
              <a-button type="text"  @click="handleDeleteParams(index)"><icon-minus-circle /></a-button>
            </a-space>
          </div>
          <a-button  @click="handleAddParams" style="width: 100%" type="outline">
            <icon-plus />
          </a-button>
        </div>
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button class="editor-button"  @click="handleCancel">取消</a-button>
      <a-button class="editor-button"  type="primary" @click="handleSubmit">确定</a-button>
    </template>
  </a-modal>

<!--  <a-modal-->
<!--    width="900px"-->
<!--    :visible="paramsVisible"-->
<!--    @cancel="paramsCancel"-->
<!--  >-->
<!--    <template #title>添加参数</template>-->
<!--    <a-form-->
<!--      ref="CreateRef"-->
<!--      :model="paramsData"-->
<!--      :style="{ width: '650px' }"-->
<!--    >-->
<!--      &lt;!&ndash; 添加参数  &ndash;&gt;-->
<!--      <a-form-item-->
<!--        field="name"-->
<!--        label="参数名称"-->
<!--        :rules="[{ required: true, message: '参数名称不能为空' }]"-->
<!--        :validate-trigger="['change']"-->
<!--      >-->
<!--        <a-input-->
<!--          v-model="paramsData.name"-->
<!--          placeholder='请选择参数名称'-->
<!--        />-->
<!--      </a-form-item>-->
<!--      &lt;!&ndash; 参数标识  &ndash;&gt;-->
<!--      <a-form-item-->
<!--        field="identifier"-->
<!--        label="参数标识"-->
<!--        :rules="[{ required: true, message: '参数标识不能为空' }]"-->
<!--        :validate-trigger="['change']"-->
<!--      >-->
<!--        <a-input-->
<!--          v-model="paramsData.identifier"-->
<!--          placeholder='请选择参数标识'-->
<!--        />-->
<!--      </a-form-item>-->

<!--      <a-form-item-->
<!--        field="dataType"-->
<!--        label="数据类型"-->
<!--        :rules="[{ required: true, message: '数据类型不能为空' }]"-->
<!--        :validate-trigger="['change']"-->
<!--      >-->
<!--        <a-select-->
<!--          v-model="paramsData.dataType"-->
<!--          placeholder='请输入数据类型'-->
<!--          :options="dataTypeOptions"-->
<!--          allow-search-->
<!--        />-->
<!--      </a-form-item>-->
<!--      <a-form-item-->
<!--        field="type"-->
<!--        label="参数类型"-->
<!--        :rules="[{ required: true, message: '参数类型不能为空' }]"-->
<!--        :validate-trigger="['change']"-->
<!--      >-->
<!--        <a-select-->
<!--          v-model="paramsData.type"-->
<!--          placeholder='请输入参数类型'-->
<!--          :options="typeOptions"-->
<!--          allow-search-->
<!--        />-->
<!--      </a-form-item>-->
<!--    </a-form>-->

<!--    <template #footer>-->
<!--      <a-button class="editor-button"  @click="paramsCancel">取消</a-button>-->
<!--      <a-button class="editor-button"  type="primary" @click="paramsSubmit">确定</a-button>-->
<!--    </template>-->
<!--  </a-modal>-->

</template>

<script lang="ts" setup>
  import useVisible from '@/hooks/visible';
  import { computed, defineEmits, onMounted, PropType, ref } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { Message } from '@arco-design/web-vue';
  import '@wangeditor/editor/dist/css/style.css'
  import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
  import { createProduct, ProductCreateRecord, queryProductDetail, updateProduct } from '@/api/product';

  const props = defineProps({
    prem: {
      type: Object as PropType<ProductCreateRecord>,
    },
    isCreate: Boolean,
    id: Number,
  });
  const emit = defineEmits(['refresh']);
  const modalTitle = computed(() => {
    return props.isCreate ? '创建产品' : '编辑产品';
  });
  const { visible, setVisible } = useVisible(false);
  const CreateRef = ref<FormInstance>();
  const formData = ref<any>({});
  const paramsData = ref([
    {
      name: '',
      identifier: '',
      dataType: '',
      type: '',
    },
  ]);
  const linkOptions = computed<SelectOptionData[]>(() => [
    {
      label: 'TCP',
      value: 'TCP',
    },
    {
      label: 'HTTP',
      value: 'HTTP',
    },
    {
      label: 'MQTT',
      value: 'MQTT',
    },
  ]);
  const dataTypeOptions = computed<SelectOptionData[]>(() => [
    {
      label: '整型',
      value: 'INT',
    },
    {
      label: '单精度浮点型',
      value: 'FLOAT',
    },
    {
      label: '双精度浮点型',
      value: 'DOUBLE',
    },
    {
      label: '布尔型',
      value: 'BOOLEAN',
    },
    {
      label: '字符串',
      value: 'STRING',
    },
    {
      label: '日期型',
      value: 'DATE',
    },
    {
      label: '透传',
      value: 'RAW',
    },
  ]);
  const typeOptions = computed<SelectOptionData[]>(() => [
    {
      label: '输入',
      value: 'INPUT',
    },
    {
      label: '输出',
      value: 'OUTPUT',
    },
    {
      label: '读写属性',
      value: 'RW',
    },
  ]);
  const paramsVisible = ref(false);
  // const paramsName = ref([]);
  const fetchData = async (Id: number | undefined) => {
    const res = await queryProductDetail(Id);
    formData.value = res.data;
    paramsData.value = res.data.params;
  };
  // 组件被点击
  const handleClick = () => {
    setVisible(true);
    if (!props.isCreate) {
      fetchData(props.id);
    }
  };
  // 提交
  const handleSubmit = async () => {
    const valid = await CreateRef.value?.validate();
    console.log(valid);
    if (!valid) {
      // 新增
      if (props.isCreate) {
        formData.value.params = paramsData.value;
        // formData.value.username = formData.value.email;
        const res = await createProduct(formData.value);
        if (res.status === 200) {
          Message.success({
            content: '新建成功',
            duration: 5 * 1000,
          });
          emit('refresh');
          setVisible(false);
        }
        CreateRef.value?.resetFields();
      } else {
        // 编辑
        const res = await updateProduct(formData.value);
        if (res.status === 200) {
          Message.success({
            content: '修改成功',
            duration: 5 * 1000,
          });
          emit('refresh');
          setVisible(false);
        }
      }
    }
  };

  // 点击添加参数
  const handleAddParams = () => {
    // paramsVisible.value = true;
    paramsData.value.push({
      name: '',
      identifier: '',
      dataType: '',
      type: '',
    });
  };
  // 删除参数
  const handleDeleteParams = (record: any) => {
    if (record !== -1) {
      paramsData.value.splice(record, 1);
    }
  };
  // 点击取消
  const paramsCancel = () => {
    paramsVisible.value = false;
  };
  // 参数模态框提交
  const paramsSubmit = () => {
    paramsVisible.value = false;
    formData.value.params?.push(paramsData.value);
    // paramsName.value.push(paramsData.value.name);
  }
  // 关闭
  const handleCancel = async () => {
    setVisible(false);
  };
</script>

<style scoped>
  .editor-button{
    position: static
  }
</style>