jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/service/PublishingChannelManagement/components/AddNEditDialog.vue

<template>
  <Dialog v-model="modelVisible" :title="title" width="550px">
    <div class="AddNEditDialog">
      <Form
        v-model="formData"
        class="form"
        ref="FormConfigRef"
        :formList="formList"
        column="1"
        labelWidth="90px"
      />
    </div>

    <template #footer>
      <Button
        style="background-color: rgba(0, 179, 204, 0.3)"
        @click.native="(modelVisible = false), (submitting = false)"
      >
        取消
      </Button>
      <Button @click.native="handleSubmit" :loading="submitting"> 确定 </Button>
    </template>
  </Dialog>
</template>

<script>
import Dialog from "@screen/components/Dialog/index.vue";
import Button from "@screen/components/Buttons/Button.vue";
import Form from "@screen/components/FormConfig";
import {
  addChannels,
  editChannels,
} from "@/api/service/PublishingChannelManagement.js";

export default {
  name: "AddNEditDialog",
  components: {
    Dialog,
    Button,
    Form,
  },
  model: {
    prop: "visible",
    event: "update:value",
  },
  props: {
    visible: Boolean,
    data: Object,
  },
  data() {
    return {
      title: "新增",
      submitting: false,
      formData: {},
      formList: [
        {
          label: "事件类型:",
          key: "dataCategory",
          type: "select",
          required: true,
          options: {
            disabled: false,
            options: [
              {
                key: 1,
                label: "交通事故",
              },
              {
                key: 2,
                label: "车辆故障",
              },
              {
                key: 3,
                label: "交通管制",
              },
              {
                key: 4,
                label: "交通拥堵",
              },
              {
                key: 5,
                label: "非法上路",
              },
              {
                key: 6,
                label: "路障清除",
              },
              {
                key: 7,
                label: "施工建设",
              },
              {
                key: 8,
                label: "服务区异常",
              },
              {
                key: 9,
                label: "设施设备隐患",
              },
              {
                key: 10,
                label: "异常天气",
              },
              {
                key: 11,
                label: "其他事件",
              },
            ],
          },
        },
        {
          label: "发布渠道:",
          key: "publishChannels",
          type: "CheckboxGroup",
          isAlone: true,
          required: true,
          default: [],
          options: {
            options: [
              { key: "1", label: "手机短信", width: "87px" },
              { key: "2", label: "微信公众号", width: "87px" },
              { key: "3", label: "微博", width: "87px" },
              { key: "4", label: "情报板", width: "87px" },
              { key: "5", label: "服务网站", width: "87px" },
              { key: "6", label: "微信小程序", width: "87px" },
            ],
          },
        },
        {
          label: "信息级别:",
          key: "infoLevel",
          type: "RadioGroup",
          required: true,
          default: 1,
          options: {
            activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
            options: [
              {
                key: 1,
                label: "影响通行",
              },
              {
                key: 2,
                label: "不影响通行",
              },
            ],
          },
        },
        // {
        //   label: "审核方式:",
        //   key: "auditMethod",
        //   type: "RadioGroup",
        //   default: 1,
        //   options: {
        //     activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
        //     options: [
        //       {
        //         key: 1,
        //         label: "单人审核",
        //       },
        //       {
        //         key: 2,
        //         label: "双人审核",
        //       },
        //     ],
        //   },
        // },
        // {
        //   label: "启用状态:",
        //   key: "enabled",
        //   type: "RadioGroup",
        //   default: "1",
        //   options: {
        //     activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
        //     options: [
        //       {
        //         key: "1",
        //         label: "启用",
        //       },
        //       {
        //         key: "2",
        //         label: "停用",
        //       },
        //     ],
        //   },
        // },
        // {
        //   label: "启用日期:",
        //   key: "enableDate",
        //   type: "DatePicker",
        //   required: true,
        // },
      ],
    };
  },
  computed: {
    modelVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:value", val);
      },
    },
  },
  watch: {
    modelVisible: {
      handler(bool) {
        if (!bool) return;
        this.title = "新增";
        if (this.data && this.data.id) {
          this.title = "修改";
          this.formData = {
            ...this.data,
          };
          this.formList[0].options.disabled = true;
        } else {
          this.formData = null;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    handleSubmit() {
      // if (this.formData && this.formData.publishChannels) {
      //   this.formData.publishChannels =
      //     this.formData.publishChannels.toString();
      // }
      this.$refs.FormConfigRef.validate().then((data) => {
        this.submitting = true;
        let params = {
          ...this.formData,
          id: this.data.id,
          publishChannels: publishChannels.toString(),
        };
        if (this.data.id) {
          editChannels(params).then((res) => {
            this.modelVisible = false;
            this.submitting = false;
            this.$parent.handleSearch();
          });
        } else {
          addChannels(this.formData).then((res) => {
            this.modelVisible = false;
            this.submitting = false;
            this.$parent.handleSearch();
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.AddNEditDialog {
  width: 450px;
  height: 200px;
  display: flex;
  flex-direction: column;
  gap: 15px;

  .tips {
    font-size: 12px;
  }
}
</style>