添加时间筛选

zhanghua

2025-07-16 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3

 src/views/systemSetting/device/bayonet/create/index.vue

@@ -1,137 +1,305 @@
<template>
    <div class="create">
        <el-form ref="device" label-position="right" label-width="120px" :model="bayonet" :rule="rules">
            <!-- 卡口名称 -->
            <div class="device-item">
                <div class="item-left">
                    <el-form-item label="卡口名称:" prop="name">
                        <el-input v-model="bayonet.name" placeholder="请填写卡口名称"></el-input>
                    </el-form-item>
                </div>
                <div class="item-right"></div>
            </div>
            <!-- 经纬度位置 -->
            <div class="device-item">
                <div class="item-left">
                    <el-form-item label="经纬度位置:" prop="longitude">
                        <el-input v-model="bayonet.longitude" placeholder="请填写经度位置"></el-input>
                    </el-form-item>
                    <el-form-item prop="latitude">
                        <el-input v-model="bayonet.latitude" placeholder="请填写纬度位置"></el-input>
                    </el-form-item>
                </div>
                <div class="item-right"></div>
            </div>
            <!-- 所属区域 -->
            <div class="device-item">
                <div class="item-left">
                    <el-form-item label="所属区域:" prop="area">
                        <el-input v-model="bayonet.area" placeholder="请填写区域名称"></el-input>
                    </el-form-item>
                </div>
                <div class="item-right"></div>
            </div>
            <!-- 域名/ip -->
            <div class="device-item">
                <div class="item-left">
                    <el-form-item label="域名/IP:" prop="domainName">
                        <el-input v-model="bayonet.domainName" placeholder="请填写域名或者IP"></el-input>
                    </el-form-item>
                </div>
                <div class="item-right"></div>
            </div>
            <!-- 端口号 -->
            <div class="device-item">
                <div class="item-left">
                    <el-form-item label="端口号:" prop="port">
                        <el-input v-model="bayonet.port" placeholder="请输入端口号"></el-input>
                    </el-form-item>
                </div>
                <div class="item-right"></div>
            </div>
            <!-- 前端类型 -->
            <div class="device-item">
                <div class="item-left">
                    <el-form-item label="前端类型:" prop="webType">
                        <el-input v-model="bayonet.webType" placeholder="请输入前端类型"></el-input>
                    </el-form-item>
                </div>
                <div class="item-right"></div>
            </div>
            <!-- 出入城类型 -->
            <div class="device-item">
                <div class="item-left">
                    <el-form-item label="出入城类型:" prop="cityType">
                        <el-input v-model="bayonet.cityType" placeholder="出城/入城"></el-input>
                    </el-form-item>
                </div>
                <div class="item-right"></div>
            </div>
            <!-- 描述 -->
            <div class="device-item">
                <div class="item-left">
                    <el-form-item label="描述:" prop="description">
                        <el-input type="textarea" :rows='5' maxlength="200" v-model="bayonet.description" placeholder="请输入描述内容200字以内"></el-input>
                    </el-form-item>
                </div>
                <div class="item-right"></div>
            </div>
            <!-- 按钮 -->
            <div class="device-btn">
                <el-button>返回</el-button>
                <el-button type="primary">确定</el-button>
            </div>
        </el-form>
    </div>
  <div class="create">
    <el-form
      ref="device"
      label-position="right"
      label-width="120px"
      :model="bayonet"
      :rules="rules"
    >
      <!-- 卡口名称 -->
      <div class="device-item">
        <div class="item-left">
          <el-form-item label="卡口名称:" prop="name">
            <el-input
              v-model="bayonet.name"
              placeholder="请填写卡口名称"
            ></el-input>
          </el-form-item>
        </div>
        <div class="item-right"></div>
      </div>
      <!-- 经纬度位置 -->
      <div class="device-item">
        <div class="item-left">
          <el-form-item label="经纬度位置:" prop="longitude">
            <el-input
              v-model="bayonet.longitude"
              placeholder="请填写经度位置"
            ></el-input>
          </el-form-item>
          <el-form-item prop="latitude">
            <el-input
              v-model="bayonet.latitude"
              placeholder="请填写纬度位置"
            ></el-input>
          </el-form-item>
        </div>
        <div class="item-right"></div>
      </div>
      <!-- 所属区域 -->
      <div class="device-item">
        <div class="item-left">
          <el-form-item label="所属区域:" prop="belongArea">
            <el-input
              v-model="bayonet.belongArea"
              placeholder="请填写区域名称"
            ></el-input>
          </el-form-item>
        </div>
        <div class="item-right"></div>
      </div>
      <!-- 域名/ip -->
      <div class="device-item">
        <div class="item-left">
          <el-form-item label="域名/IP:" prop="ipAddress">
            <el-input
              v-model="bayonet.ipAddress"
              placeholder="请填写域名或者IP"
            ></el-input>
          </el-form-item>
        </div>
        <div class="item-right"></div>
      </div>
      <!-- 端口号 -->
      <div class="device-item">
        <div class="item-left">
          <el-form-item label="端口号:" prop="port">
            <el-input
              v-model="bayonet.port"
              placeholder="请输入端口号"
            ></el-input>
          </el-form-item>
        </div>
        <div class="item-right"></div>
      </div>
      <!-- 前端类型 -->
      <div class="device-item">
        <div class="item-left">
          <el-form-item class="optionItem" label="前端类型:" prop="role">
            <el-select
              v-model="bayonet.frontEndType"
              placeholder="请输入前端类型"
              collapse-tags
            >
              <el-option
                v-for="item in frontEndTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="item-right"></div>
      </div>
      <!-- 出入城类型 -->
      <div class="device-item">
        <div class="item-left">
          <el-form-item class="optionItem" label="出入城类型:" prop="role">
            <el-select
              v-model="bayonet.inOutCityType"
              placeholder="请输入出入城类型"
              collapse-tags
            >
              <el-option
                v-for="item in inOutTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="item-right"></div>
      </div>
      <!-- 描述 -->
      <div class="device-item">
        <div class="item-left">
          <el-form-item label="描述:" prop="description">
            <el-input
              type="textarea"
              :rows="5"
              maxlength="200"
              v-model="bayonet.description"
              placeholder="请输入描述内容200字以内"
            ></el-input>
          </el-form-item>
        </div>
        <div class="item-right"></div>
      </div>
      <!-- 按钮 -->
      <div class="device-btn">
        <el-button @click="closeDialog">返回</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
    data() {
        return {
            bayonet: {
                name: '',
                latitude: '',
                longitude: '',
                area: '',
                domainName: '',
                port: '',
                webType: '',
                cityType: '',
                description: '',
            },
            rules: {
import bayonet from "@/api/system/bayonet";
import { deepClone, getTypeList } from "@/utils/helper";

            }
export default {
  props: {
    originalBayonet: {
      type: Object,
      default: () => {},
    },
    isEdit: {
      type: Boolean,
      default: () => false,
    },
  },

  data() {
    return {
      bayonet: {
        name: "",
        latitude: "",
        longitude: "",
        belongArea: "",
        ipAddress: "",
        port: "",
        frontEndType: "",
        inOutCityType: "",
        description: "",
      },
      rules: {
        name: [{ required: true, trigger: "blur", message: "请填写卡口名称" }],
        latitude: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请填写纬度位置",
          },
        ],
        longitude: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请填写经度位置",
          },
        ],
        belongArea: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请填写区域名称",
          },
        ],
        ipAddress: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请填写域名或者IP",
          },
        ],
        port: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入端口号",
          },
        ],
        frontEndType: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入前端类型",
          },
        ],
        inOutCityType: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请填写出城/入城",
          },
        ],
      },
      frontEndTypeList: [],
      inOutTypeList: [],
    };
  },
  beforeCreate() {},
  created() {
    this.getInOutCityTypeList();
    this.getFrontEndTypeList();
    if (this.originalBayonet) {
      this.bayonet = this.originalBayonet;
    }
  },
  methods: {
    onSubmit() {
      this.$refs.device.validate((valid) => {
        if (valid) {
          const copyBayonet = deepClone(this.bayonet);
          if (!this.isEdit) {
            bayonet
              .addBayonet(this.bayonet)
              .then(() => {
                this.$message({ type: "success", message: "操作成功" });
                this.$emit("closeDialog");
              })
              .catch((err) => {
                this.$message({ type: "error", message: err });
              });
          } else {
            bayonet
              .updateBayonet(copyBayonet)
              .then(() => {
                this.$message({ type: "success", message: "操作成功" });
                this.$emit("closeDialog");
              })
              .catch((err) => {
                this.$message({ type: "error", message: err });
              });
          }
        } else {
          this.$message({ type: "warning", message: "请检查必填项" });
        }
      });
    },
    async getInOutCityTypeList() {
      this.inOutTypeList = await getTypeList(1, "14");
    },

}
    async getFrontEndTypeList() {
      this.frontEndTypeList = await getTypeList(1, "13");
    },
    closeDialog() {
      this.$emit("closeDialog");
    },
  },
};
</script>
<style lang="scss" scoped>
.create {
    padding: 20px;
  padding: 20px;

    .device-item {
        display: flex;
  .device-item {
    display: flex;

        .item-left {
            flex: 6;
            display: flex;
    .item-left {
      flex: 6;
      display: flex;

            .el-form-item {
                flex: 1;
            }
        }

        .item-right {
            flex: 4;
        }
      .el-form-item {
        flex: 1;
      }
    }

    .device-btn {
        padding-top: 20px;
        display: flex;
        justify-content: center;
    .item-right {
      flex: 4;
    }
  }

  .device-btn {
    padding-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>