web/src/views/system/config-manage/device-manage/edit-device-dialog.vue

<template>
  <my-dialog
    :visible="visible"
    :header="title"
    :width="600"
    attach="body"
    :closeOnOverlayClick="false"
    @close="emit('update:visible', false)"
  >
    <t-form ref="formRef" :data="formData" :rules="rules" labelAlign="top">
      <t-row :gutter="[20, 20]">
        <t-col :span="6">
          <t-form-item label="设备编号" name="deviceCode">
            <t-input v-model="formData.deviceCode" clearable />
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="序列号" name="serialNo">
            <t-input v-model="formData.serialNo" clearable />
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="品牌" name="brand">
            <t-select
              v-model="formData.brand"
              :options="brandList"
              clearable
              @change="brandChange"
            />
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="型号" name="model">
            <t-select
              v-model="formData.model"
              :options="brandModelList"
              clearable
            />
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="购买时间">
            <t-date-picker
              v-model="formData.buyTime"
              mode="date"
              value-type="time-stamp"
              enable-time-picker
              format="YYYY/MM/DD HH:mm"
              :time-picker-props="{ format: 'HH:mm' }"
              clearable
            />
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="供应商" name="supplierId">
            <select-supplier
              v-model="formData.supplierId"
              type="DEVICE"
              @getOptions="getSupplierOptions"
            >
            </select-supplier>
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="运行状态" name="status">
            <t-select v-model="formData.status">
              <t-option
                v-for="(val, key) in RUNNING_STATUS"
                :key="key"
                :label="val"
                :value="key"
              />
            </t-select>
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="总扫描量">
            <t-input-number
              v-model="formData.scanCount"
              :decimalPlaces="0"
              :min="1"
              theme="column"
              style="width: 100%"
            />
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="当前所在地" name="location">
            <!-- <select-area v-model="formData.location" :level="2"></select-area> -->
            <t-select v-model="formData.location">
              <t-option
                v-for="item in supplierOptions"
                :key="item.id"
                :value="item.name"
                :label="item.name"
              ></t-option>
            </t-select>
          </t-form-item>
        </t-col>
      </t-row>
    </t-form>
    <template #foot>
      <t-button theme="default" @click="emit('update:visible', false)"
        >取消</t-button
      >
      <t-button theme="primary" @click="save">保存</t-button>
    </template>
  </my-dialog>
</template>
<script setup name="EditDeviceDialog">
import { ref, computed } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import useClearDialog from '@/hooks/useClearDialog';
import { RUNNING_STATUS } from '@/config/constants';
import { deviceEditApi } from '@/api/system';

const emit = defineEmits(['update:visible', 'success']);
const props = defineProps({
  visible: Boolean,
  curRow: Object,
  brandList: {
    type: Array,
    default() {
      return [];
    },
  },
});
const supplierOptions = ref([]);
const getSupplierOptions = (options) => {
  supplierOptions.value = options;
};
const title = computed(() => {
  return (isEdit.value ? '编辑' : '新增') + '设备';
});

const formRef = ref(null);
const brandModelList = ref([]);

const { formData, isEdit } = useClearDialog(
  {
    id: null,
    deviceCode: '',
    serialNo: '',
    brand: '',
    model: '',
    buyTime: '',
    supplierId: '',
    status: '',
    location: '',
    scanCount: null,
    sync: true,
    enable: true,
  },
  props,
  formRef,
  () => {
    for (let key in formData) {
      formData[key] = props.curRow[key];
    }

    getBrandModelList(formData.brand);
  }
);
const rules = {
  deviceCode: [
    {
      required: true,
      message: '设备编号必填',
      type: 'error',
      trigger: 'change',
    },
    {
      max: 50,
      message: '至多需要50个字',
      type: 'error',
      trigger: 'change',
    },
  ],
  serialNo: [
    {
      required: true,
      message: '序列号必填',
      type: 'error',
      trigger: 'change',
    },
    {
      max: 100,
      message: '至多需要100个字',
      type: 'error',
      trigger: 'change',
    },
  ],
  brand: [
    { required: true, message: '品牌必选', type: 'error', trigger: 'change' },
  ],
  model: [
    { required: true, message: '型号必选', type: 'error', trigger: 'change' },
  ],
  location: [
    {
      required: true,
      message: '所在地必填',
      type: 'error',
      trigger: 'change',
    },
  ],
  supplierId: [
    { required: true, message: '供应商必选', type: 'error', trigger: 'change' },
  ],
  status: [
    {
      required: true,
      message: '运行状态必选',
      type: 'error',
      trigger: 'change',
    },
  ],
  location: [
    {
      required: true,
      message: '当前所在地必填',
      type: 'error',
      trigger: 'change',
    },
  ],
};

const brandChange = () => {
  formData.model = '';
  brandModelList.value = [];
  getBrandModelList(formData.brand);
};

const getBrandModelList = (brand) => {
  const curBrand = props.brandList.find((item) => item.value === brand);
  if (!curBrand) {
    brandModelList.value = [];
    return;
  }
  brandModelList.value = curBrand.list;
};

const save = async () => {
  const valid = await formRef.value.validate();
  if (valid !== true) return;

  const res = await deviceEditApi(formData).catch(() => {});
  if (!res) return;

  MessagePlugin.success('保存成功');
  emit('update:visible', false);
  emit('success');
};
</script>