sgxt_web/src/views/backOfficeSystem/IntelligentControl/myControl/components/addBkdx.vue

<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">布控对象</span>
      <div>
        <el-button size="small" type="primary" v-if="!disabled" :loading="loading" @click="submit">保存</el-button>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="flex">
      <div :class="dataOrge.gzlid ? 'ww80' : 'ww100'">
        <div class="form_cnt">
          <el-form :model="listQuery" :rules="rules" :disabled="disabled" ref="elform" inline :label-width="100"
            label-position="left">
            <div class="flex align-center mb10">
              <el-radio-group v-model="listQuery.bkDx" size="large" fill="#6cf" @change="shangeDx">
                <el-radio-button :label="item.dm" v-for="(item, index) in props.dic.D_GS_BK_NEWDX" :key="index">{{
                  item.zdmc }}</el-radio-button>
              </el-radio-group>
              <el-button type="primary" @click="handleAddPeo" v-if="!disabled" class="ml10">
                <el-icon class="vam">
                  <CirclePlus />
                </el-icon>
                <span class="vam">新增</span>
              </el-button>
            </div>
            <div class="relative ww100">
              <MyTable :tableData="listQuery.bkdxList" :tableColumn="tableDate.tableColumn"
                :tableHeight="tableDate.tableHeight" :key="tableDate.keyCount" :tableConfiger="tableDate.tableConfiger"
                :controlsWidth="tableDate.controlsWidth">
                <template #fjZp="{ row }">
                  <el-image :src="setAddress(row.fjZp)"></el-image>
                </template>
                <template #yjdj="{ row }">
                  <DictTag :tag="false" :value="row.yjdj" :options="props.dic.D_GS_ZDR_YJDJ" />
                </template>
                <template #yjbq="{ row }">
                  <DictTag :tag="false" :value="row.yjbq" :options="props.dic.BD_BK_CLYJBQ" />
                </template>
                <template #ryXb="{ row }">
                  <DictTag :tag="false" :value="row.ryXb" :options="props.dic.D_BZ_XB" />
                </template>
                <template #bqList="{ row }">
                  <span v-if="row.bqList">
                    <span v-for="(it, idx) in row.bqList" :key="idx">
                      {{ it.bqMc }}、</span>
                  </span>
                </template>
                <!-- 操作 -->
                <template #controls="{ row }">
                  <el-link type="primary">查看档案</el-link>
                  <el-link type="danger" @click="deleteRow(row)">删除</el-link>
                </template>
              </MyTable>
            </div>
            <div class="ww100 mt25 mb10" style="display: flex;justify-content: space-between;">
              <el-form-item prop="bkSjKs" label="布控开始时间">
                <MOSTY.Date v-model="listQuery.bkSjKs" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请选择布控开始时间" clearable />
              </el-form-item>
              <el-form-item prop="bkSjJs" label="布控结束时间">
                <MOSTY.Date v-model="listQuery.bkSjJs" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请选择布控结束时间" clearable />
              </el-form-item>
              <el-form-item prop="czcs" label="处置措施">
                <MOSTY.Select v-model="listQuery.czcs" :dictEnum="props.dic.D_GS_BK_CZYQ" placeholder="请选择处置措施"
                  clearable />
              </el-form-item>
            </div>

            <div class="ww100 mt10 mb10">
              <el-form-item prop="czYq" label="处置要求" class="ww100">
                <MOSTY.Other v-model="listQuery.czYq" placeholder="请输入处置要求" type="textarea" class="ww100"
                  style="width: 100%;" clearable />
              </el-form-item>
            </div>
            <div class="ww100 mt10 mb10">
              <el-form-item prop="bkSy" label="布控原因" class="ww100">
                <MOSTY.Other v-model="listQuery.bkSy" placeholder="请输入布控原因" type="textarea" style="width: 100%;"
                  clearable />
              </el-form-item>
            </div>
            <div class="ww100 mt10 mb10">
              <el-form-item prop="bkDj" label="布控等级" v-if="props.name == 'myControl'">
                <MOSTY.Select v-model="listQuery.bkDj" :dictEnum="props.dic.D_GS_SSYJ" placeholder="请选择布控级别"
                  clearable />
              </el-form-item>
              <el-form-item prop="bkDj" label="布控等级" v-else>
                <MOSTY.Select v-model="listQuery.bkDj" :dictEnum="props.dic.D_BZ_JQDJ" placeholder="请选择布控级别"
                  clearable />
              </el-form-item>
              <el-form-item prop="bklylx" label="布控来源">
                <MOSTY.Select v-model="listQuery.bklylx" :dictEnum="props.dic.D_BZ_BKLYS" placeholder="请选择布控来源"
                  clearable />
              </el-form-item>
            </div>
            <div class="ww100 mt10 mb10">
              <el-form-item prop="zfyj" label="执法依据" class="ww100">
                <MOSTY.Other v-model="listQuery.zfyj" placeholder="请输入执法依据" type="textarea" clearable
                  style="width: 100%;" />
              </el-form-item>
            </div>

            <div class="ww100 mt10">
              <el-form-item prop="bkfj" label="上传附件" class="ww100">
                <div>
                  <MOSTY.Upload :showBtn="true" :limit="10" :isImg="false" :isAll="true" v-model="listQuery.bkfj" />
                  <div>支持png、jpg、pdf文件上传</div>
                </div>
              </el-form-item>
            </div>
            <!-- <div class="smallTitle">布控范围</div>
            <div class="mapSearch flex">
              <el-select
                v-model="hzfs"
                placeholder="请选择布控范围"
                clearable
                @change="qhhzfs"
              >
                <el-option label="区域选择" value="1"></el-option> -->
            <!-- <el-option label="自定义范围" value="2"></el-option> -->
            <!-- </el-select> -->
            <!-- <el-select
                multiple
                style="margin-left: 10px"
                v-model="bkqyList"
                placeholder="请选择布控范围"
                clearable
                @change="hzfsChage"
                v-if="hzfs == '1'"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, index) in bkqyArr"
                  :key="index"
                  >{{ item.label }}</el-option
                >
              </el-select> -->

            <!-- <el-button type="primary" @click="drawQy" style="margin-left: 10px;" v-else>
                <el-icon style="vertical-align: middle">
                  <CirclePlus />
                </el-icon>
                <span style="vertical-align: middle">自定义区域</span>
              </el-button> -->
            <!-- </div> -->
            <!-- <div class="ww100 relative mb10"
              style="height: 60vh;border: 1px solid #dcdfe6;border-radius: 4px;overflow: hidden;">
              <GdMap></GdMap>
            </div> -->
          </el-form>
        </div>
      </div>
      <div class="ww20" v-if="dataOrge.gzlid">
        <ApprovalEcho ref="approvalEcho" />
      </div>
    </div>
  </div>
  <!-- 选择布控人员 -->
  <BkryDialod :modelValue="chooseVisible_RY" @update:modelValue="chooseVisible_RY = $event" @choosed="choosed"
    @choosedAdd="choosedAdd" :roleIds="roleIds" />
  <!-- 选择车辆布控 -->
  <BkclDialod :modelValue="chooseVisible_CL" @update:modelValue="chooseVisible_CL = $event" @choosed="choosed"
    @choosedAdd="choosedAdd" :roleIds="roleIds" />
  <!-- 选择布控群体 -->
  <BkqtDialod :modelValue="chooseVisible_QT" @update:modelValue="chooseVisible_QT = $event" @choosed="choosed"
    :roleIds="roleIds" />
  <BksfzDialod :modelValue="chooseVisible_SFZ" @update:modelValue="chooseVisible_SFZ = $event" @choosed="choosed"
    :roleIds="roleIds" :bkDx="listQuery.bkDx" @choosedAdd="choosedAdd" />
</template>

<script setup>
import { getItem } from "@/utils/storage";
import BkryDialod from "@/components/ChooseList/ChooseZdr/index.vue";
import BkqtDialod from "@/components/ChooseList/ChooseQt/index.vue";
import BkclDialod from "@/components/ChooseList/ChooseCl/index.vue";
import BksfzDialod from "./dolog/sfzLog.vue";
import GdMap from "@/components/GdMap/index.vue";
import * as MOSTY from "@/components/MyComponents/index";
import MyTable from "@/components/aboutTable/MyTable.vue";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import {
  tableColumnList,
  Zd
} from "@/views/backOfficeSystem/ApprovalInformation/tableRow.js";
import emitter from "@/utils/eventBus.js";
import {
  ref,
  defineExpose,
  reactive,
  defineEmits,
  getCurrentInstance,
  nextTick,
  watch,
  onMounted
} from "vue";
import ApprovalEcho from "@/components/flowPath/ApprovalEcho.vue";
import { useRouter, useRoute } from "vue-router";
import { setAddress } from "@/utils/tools.js";
import { tbGsxtBkId } from "@/api/commit.js";
const emit = defineEmits(["change"]);
const props = defineProps({
  dic: Object,
  name: String
});
const route = useRoute();
const elform = ref();
const roleIds = ref([]); //角色ID
const chooseVisible_RY = ref(false); //选择布控人员弹窗
const chooseVisible_QT = ref(false); //选择布控群体弹窗
const chooseVisible_CL = ref(false);
const bkqyArr = ref([]); //布控区域
const { proxy } = getCurrentInstance();
const dialogForm = ref(false); //弹窗
const loading = ref(false);
const addPerson = ref([]); //单独新增的数据
const listQuery = ref({
  bkYz: "01",
  bkdxList: []
}); //表单数据
const rules = reactive({
  bkBt: [{ required: true, message: "请输入布控标题", trigger: "blur" }],
  bkDx: [{ required: true, message: "请选择布控对象", trigger: "change" }],
  bkSjKs: [
    { required: true, message: "请选择布控开始时间", trigger: "change" }
  ],
  bkSjJs: [
    { required: true, message: "请选择布控结束时间", trigger: "change" }
  ],
  czJsdwdm: [
    { required: true, message: "请选择处置接收单位", trigger: "change" }
  ],
  bkshrSsbmdm: [
    { required: true, message: "请选择审核部门", trigger: "change" }
  ],
  bksprSsbmdm: [
    { required: true, message: "请选择审批部门", trigger: "change" }
  ],
  czYq: [{ required: true, message: "请选择处置要求", trigger: "blur" }],
  czcs: [{ required: true, message: "请选择处置措施", trigger: "change" }],
  bkSy: [{ required: true, message: "请输入布控原因", trigger: "blur" }]
});
let tableDate = reactive({
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "null",
    loading: false
  },
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  }, //分页
  controlsWidth: 200, //操作栏宽度
  tableColumn: [
    { label: "照片", prop: "fjZp", showSolt: true },
    { label: "姓名", prop: "ryXm" },
    { label: "性别", prop: "ryXb", showSolt: true },
    { label: "身份证号", prop: "rySfzh" },
    { label: "户籍地", prop: "ryHjd" },
    { label: "现居住地址", prop: "ryXjd" },
    { label: "手机号", prop: "rySjhm" },
    { label: "虚拟身份", prop: "qtXnsf" },
    { label: "车牌号", prop: "clCph" },
    { label: "车辆识别代码", prop: "clCjh" },
    { label: "特征描述", prop: "qtTzms" },
    { label: "标签", prop: "bqList", showSolt: true, showOverflowTooltip: true }
  ]
});

const title = ref("");
const disabled = ref(false);
// 初始化数据
const init = (type, row) => {
  listQuery.value.bkfj = [];
  if (type == "add") {
    tableDate.tableConfiger.haveControls = true;
    disabled.value = false;
    listQuery.value.bkfqrXm = getItem("USERNAME");
    listQuery.value.bkfqrSfzh = getItem("idEntityCard");
    listQuery.value.bkfqrSsbmmc = getItem("deptId")[0].deptName;
    listQuery.value.bkfqrSsbmdm = getItem("deptId")[0].deptCode;
  }
  title.value = type == "add" ? "新增" : type == "detail" ? "详情" : "编辑";
  disabled.value = type == "detail" ? true : false;
  dialogForm.value = true;
  if (row) tableDate.tableConfiger.haveControls = false;
  Zd({ D_GS_SSYJ: props.dic.D_GS_SSYJ, BD_BK_CLYJBQ: props.dic.BD_BK_CLYJBQ });

  get_bkqy_list(row);
};

// 获取布控区域
const get_bkqy_list = (row) => {
  qcckGet({}, "/mosty-gsxt/tbGsxtBkQy/selectList").then((res) => {
    let arr = res || [];
    bkqyArr.value = arr.map((item) => {
      return { ...item, label: item.qymc, value: item.id };
    });
    if (row) getDataById(row.id);
  });
};
const dataOrge = ref({});
const approvalEcho = ref();
watch(
  () => approvalEcho.value,
  (val) => {
    if (val) {
      approvalEcho.value.getWorkflow(dataOrge.value.gzlid);
    }
  },
  { deep: true }
);

watch(
  () => approvalEcho.value,
  (val) => {
    if (val) {
      console.log(approvalEcho.value);
      approvalEcho.value.getWorkflow(dataOrge.value.gzlid);
    }
  },
  { deep: true }
);

const shangeDx = () => {
  tableDate.tableColumn = tableColumnList[listQuery.value.bkDx];
  listQuery.value.bkDxxx = "";
  listQuery.value.bkdxList = [];
  roleIds.value = [];
  addPerson.value = [];
};
// 删除数据
const deleteRow = (row) => {
  roleIds.value = roleIds.value.filter((id) => id != row.id);
  addPerson.value = addPerson.value.filter((it) => it.id != row.id);
  listQuery.value.bkdxList = listQuery.value.bkdxList.filter(
    (it) => it.id != row.id
  );
};
// 单独新增的数据
const choosedAdd = (item) => {
  let obj = {};
  if (listQuery.value.bkDx !== "02") {
    obj = {
      id: item.id,
      fjZp: item.fjZp,
      ryXm: item.ryXm,
      ryXb: item.ryXb,
      rySfzh: item.rySfzh,
      ryHjd: item.hjdXz,
      ryXjd: item.xzdXz,
      rySjhm: item.ryLxdh,
      qtXnsf: item.qtXnsf,
      clCjh: item.clCjh,
      clCph: item.clCph,
      qtTzms: item.qtTzms,
      bqList: item.bqList
    };
  } else {
    obj = {
      clCph: item.hphm,
      clCjh: item.clCjh,
      clSyr: item.clSyr,
      clSyrsfzh: item.clSyrsfzh,
      clYs: item.clYs,
      gxSsbmmc: item.gxSsbmmc,
      bqList: item.bqList
    };
  }
  switch (listQuery.value.bkDx) {
    default:
      obj = { ...item };
      break;
  }
  addPerson.value.push(obj); //缓存的数据
  if (!listQuery.value.bkdxList) listQuery.value.bkdxList = [];
  listQuery.value.bkdxList.unshift(obj);
  console.log(listQuery.value.bkdxList);
};

// 选择重点人
const choosed = (val) => {
  tableDate.tableColumn = tableColumnList[listQuery.value.bkDx];
  if (listQuery.value.bkDx == "01") {
    // 人员
    roleIds.value = val.map((it) => it.id);
    let arr = val.map((item) => {
      let bqArr = item.bqList || [];
      let bqs = bqArr.map((v) => {
        return {
          bqZl: v.bqZl,
          bqId: v.bqId,
          bqLx: v.bqLx,
          bqLb: v.bqLb,
          bqMc: v.bqMc,
          bqDm: v.bqDm
        };
      });
      return {
        id: item.id,
        fjZp: item.fjZp,
        ryXm: item.ryXm,
        ryXb: item.ryXb,
        rySfzh: item.rySfzh,
        ryHjd: item.hjdXz,
        ryXjd: item.xzdXz,
        rySjhm: item.ryLxdh,
        qtXnsf: item.qtXnsf,
        clCjh: item.clCjh,
        clCph: item.clCph,
        qtTzms: item.qtTzms,
        bqList: bqs,
        yjdj: item.zdrYjdj,
        ssbmdm: item.zrSsbmdm
      };
    });
    listQuery.value.bkdxList = [...addPerson.value, ...arr];
  } else if (listQuery.value.bkDx == "03") {
    roleIds.value = val.map((it) => it.id);
    let arr = val.map((item) => {
      return {
        clCph: item.hphm,
        clCjh: item.clCjh,
        clSyr: item.clSyr,
        clSyrsfzh: item.clSyrsfzh,
        clYs: item.clYs,
        gxSsbmmc: item.gxSsbmmc,
        yjbq: item.yjbq,
        yjdj: item.yjdj,
        ssbmdm: item.zrSsbmdm
      };
    });
    listQuery.value.bkdxList = [...addPerson.value, ...arr];
  } else {
    // 群体
    listQuery.value.bkDxxx = val.map((it) => it.id).join(",");
    let peolist = [];
    val.forEach((item) => {
      if (item.zdryList) peolist = peolist.concat(item.zdryList);
    });
    let brrPeo = peolist.map((item) => {
      let bqArr = item.bqList || [];
      let bqs = bqArr.map((v) => {
        return {
          bqZl: v.bqZl,
          bqId: v.bqId,
          bqLx: v.bqLx,
          bqLb: v.bqLb,
          bqMc: v.bqMc,
          bqDm: v.bqDm
        };
      });
      return {
        id: item.id,
        fjZp: item.fjZp,
        ryXm: item.ryXm,
        ryXb: item.ryXb,
        rySfzh: item.rySfzh,
        ryHjd: item.hjdXz,
        ryXjd: item.xzdXz,
        rySjhm: item.ryLxdh,
        qtXnsf: item.qtXnsf,
        clCjh: item.clCjh,
        clCph: item.clCph,
        qtTzms: item.qtTzms,
        bqList: bqs,
        yjdj: item.zdrYjdj,
        ssbmdm: item.zrSsbmdm
      };
    });
    listQuery.value.bkdxList = brrPeo;
  }
};

// 选择人员
const handleAddPeo = () => {
  if (!listQuery.value.bkDx)
    return proxy.$message({ type: "warning", message: "请选择布控对象" });
  switch (listQuery.value.bkDx) {
    case "01":
      chooseVisible_RY.value = true;
      break;
    case "04":
    case "05":
    case "06":
    case "07":
    case "08":
    case "09":
    case "10":
      chooseVisible_SFZ.value = true;
      break;
    case "03":
      chooseVisible_CL.value = true;
      break;
    case "02":
      chooseVisible_QT.value = true;
      break;
  }
};

// 提交
const submit = () => {
  elform.value.validate((validate) => {
    if (!validate) return;
    let bklx = "";
    if (route.name == "myControl") {
      bklx = "01";
    } else {
      bklx = "02";
    }
    let params = { ...listQuery.value, bklx: bklx };
    params.bkfj = params.bkfj ? JSON.stringify(params.bkfj) : "";
    params.bkdxList = params.bkdxList ? params.bkdxList : [];
    params.bkdxList.forEach((item) => {
      if (Array.isArray(item.fjZp)) {
        item.fjZp = item.fjZp ? item.fjZp.join(",") : "";
      } else {
        item.fjZp = item.fjZp;
      }
    });

    loading.value = true;
    let url = title.value == "新增" ? "/mosty-gsxt/tbGsxtBk/save" : "/mosty-gsxt/tbGsxtBk/update";
    qcckPost(params, url)
      .then((res) => {
        proxy.$message({ type: "success", message: "布控成功" });
        emit("change");
        loading.value = false;
        close();
      })
      .catch(() => {
        loading.value = false;
      });
  });
};
onMounted(() => {
  emitter.on("coordString", (res) => {
    listQuery.value.bkqyList = [
      {
        pgis: res.coord[0]
      }
    ];
  });
});
// 关闭
const close = () => {
  listQuery.value = {};
  dialogForm.value = false;
  loading.value = false;
  addPerson.value = [];
  roleIds.value = [];
  dataOrge.value = {};
};
// 选择身份证
const chooseVisible_SFZ = ref(false);
// 获取布控信息的工作流
// const workflow = ref()
// const getWorkflow = async (id) => {
//   const promes = {
//     processId: id
//   }
//   const proNode = await queryProcessNode(promes)
//   const proNodeLog = await queryProcessNodeLog(promes)
//   const process = await queryProcess(promes)
//   workflow.value = proNode.rows.map(item => {
//     const log = proNodeLog.rows.filter(items => item.nodeId == items.nodeId)

//     if (item.eventType == '0') {
//       return {
//         ...item,
//         log: {
//           userData: item.userData ? JSON.parse(item.userData) : JSON.parse(process.rows[0].processData).orgNameData,
//           userName: process.rows[0].userName,
//           xtLrsj: process.rows[0].xtLrsj,
//           processStatus: process.rows[0].processStatus,
//         }
//       }
//     } else {
//       return {
//         ...item,
//         orgNameData: JSON.parse(log[0].userData),
//         log: log
//       }
//     }
//   })

// };
// const drawQy = () => {
//   emitter.emit("drawShape", {
//     flag: "select_point",
//     type: "polygon",
//     isclear: true
//   });
// }
const hzfs = ref("1");
const bkqyList = ref();
const qhhzfs = () => {
  listQuery.value.bkqyList = [];
  bkqyList.value = [];
  emitter.emit("removeBj");
  emitter.emit("removeEara", "select_point");
};

const hzfsChage = (val) => {
  const qyList = [];
  console.log(val);

  listQuery.value.bkqyList = val.map((item, index) => {
    const data = bkqyArr.value.filter((items) => items.id == item)[0];
    console.log(data);

    if (data) {
      qyList.push(data.pgis);
    }
    console.log(item);
    return {
      bkQyid: data.id,
      pgis: data.pgis
    };
  });
  setTimeout(() => {
    changeXzqh(qyList);
  }, 2000);
};
const changeXzqh = (val) => {
  // 先移除已有的边界
  emitter.emit("removeBj");
  // 如果传入的是多个区域数据（二维数组）
  const features = val.map((area, index) => ({
    geometry: {
      type: "Polygon",
      coordinates: [area] // 确保格式正确
    },
    properties: {},
    type: "Feature"
  }));
  // 循环为每个区域创建单独的多边形，这样可以设置不同的样式
  features.forEach((feature, index) => {
    emitter.emit("setBoundarys", {
      data: {
        type: "FeatureCollection",
        features: [feature]
      },
      color: "#cf1010",
      fillColor: "rgba(255, 255, 255,0)"
    });
  });
};
// 根据id获取详情
const getDataById = (id) => {
  qcckGet({}, "/mosty-gsxt/tbGsxtBk/selectVoById/" + id).then((res) => {
    // 兼容处理：优先使用 ossList，为空则解析 bkfj JSON 字符串
    if (res.ossList && res.ossList.length > 0) {
      res.bkfj = res.ossList;
    } else if (res.bkfj) {
      try {
        res.bkfj = JSON.parse(res.bkfj);
      } catch (e) {
        res.bkfj = [];
      }
    } else {
      res.bkfj = [];
    }
    listQuery.value = res || {};
    dataOrge.value = res;
    if (res.bkqyList) {
      bkqyList.value = res.bkqyList
        ? res.bkqyList.map((v) => {
          {
            if (v.bkQyid) {
              hzfs.value = "1";
            } else {
              hzfs.value = "2";
            }
            return v.bkQyid;
          }
        })
        : [];
      const data = res.bkqyList.map((item) => {
        return item.pgis;
      });
      setTimeout(() => {
        console.log(data);
        changeXzqh(data);
        // listQuery.value.bkDxxx = data.join(',')
      }, 2000);
    }

    tableDate.tableColumn = tableColumnList[res.bkDx ? res.bkDx : "01"];
  });
};
defineExpose({ init });
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

.smallTitle {
  width: 100%;
  font-size: 15px;
  line-height: 50px;
  font-weight: 550;
  color: #606266;
}

.mapSearch {
  margin-bottom: 10px;
}

.dialog {
  ::v-deep .el-form-item--default {
    margin: 0 1% 0 0 !important;
    padding-bottom: 0 !important;
  }
}

::v-deep .avatar-uploader {
  display: flex;
}

::v-deep .el-upload--picture-card i {
  width: 156px;
}

.depBox {
  border: 1px solid #e9e9e9;
  width: 305px;
  padding: 0 0 0 4px;
  border-radius: 4px;

  ::v-deep .el-input__inner {
    border: none;
  }

  ::v-deep .el-cascader .el-input.is-focus .el-input__inner {
    border-color: transparent !important;
  }

  ::v-deep .el-input__inner:focus {
    box-shadow: none;
  }

  ::v-deep .el-input.is-disabled .el-input__inner {
    border-color: transparent !important;
  }
}

/* 使用深度选择器覆盖子组件样式 */
::v-deep .el-step.is-vertical .el-step__title {
  color: #000000 !important;
  border-color: #000000 !important;
}

::v-deep .el-step__description {
  padding: 0 !important;
}

::v-deep .el-step__description.is-wait {
  color: #000000 !important;
  border-color: #000000 !important;
}

.el-step__title.is-wait {
  color: #000000 !important;
  border-color: #000000 !important;
}

::v-deep .el-step__head.is-wait {
  color: #000000 !important;
  border-color: #000000 !important;
}

::v-deep .el-step__line {
  background-color: #000000 !important;
}

.nodeBox {
  width: 80%;
  text-align: center;
  line-height: 30px;
  border-radius: 10px;
  overflow: hidden;
  background-color: aliceblue;

  .nodeorgNameTg {
    background-color: #1abe20;
  }

  .nameTag {
    line-height: 30px;
    padding: 0 10px;
  }

  .nodeorgNameDd {
    background-color: #18a2dd;
  }

  .fontColor {
    color: #1abe20;
  }

  .fontColorDd {
    color: #18a2dd;
  }
}

::v-deep .el-form-item__label {
  padding: 0;
}

::v-deep .el-radio-button__inner {
  color: #000 !important;
}

.form_cnt {
  width: 80%;
}
</style>