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();
    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>