xzlz_JczWeb/src/views/home/layout/zbbb.vue

<template>
  <div class="cntinfo">
    <div class="flex align-center just-between box">
      <div class="flex align-center">
        报备单位：
        <MOSTY.Department v-model="listQuery.ssbmdm" placeholder="请选择部门" @getDepValue="changeDep" />
      </div>
      <!-- v-if="['add', 'edit'].includes(pageType)" -->
      <el-button size="small" type="primary" @click="_onSave" :disabled="loding">保存</el-button>
    </div>
    <el-form ref="formRef" class="info" :model="listQuery" :inline="true" :rules="rules">
      <!-- <div class="bblxItem">
        <div class="btItem">环林卡口设置</div>
        <div class="info">
          <el-form-item>
            <ChooseTable
              :deptment="deptment"
              v-if="!isDetail"
              :configer="{
                width: 800,
                lx: 'jcz',
                isRadio: true
              }"
              v-model="listQuery.jczList"
              :dic="props.dic"
            />
            <div class="peolist" v-if="listQuery.jczList">
              <el-tag type="primary" :key="item">{{
                listQuery.jczList.jczmc
              }}</el-tag>
            </div>
            <div class="peolist" v-if="listQuery.jczmc && !listQuery.jczList">
              <el-tag type="primary" :key="item">{{ listQuery.jczmc }}</el-tag>
            </div>
          </el-form-item>
        </div>
      </div> -->
      <div class="bblxItem">
        <div class="btItem">班次设置</div>
        <div class="info">
          <el-form-item prop="bcKssj" label=" ">
            <el-time-picker v-model="listQuery.bcKssj" :disabled="isDetail" placeholder="开始时间" format="HH:mm:ss"
              value-format="HH:mm:ss" />
          </el-form-item>
          <el-form-item prop="bcKtsDict" label=" ">
            <el-select clearable v-model="listQuery.bcKtsDict" placeholder="请选择" style="width: 100%">
              <el-option v-for="(item, index) in dic.D_QW_BC_KTS" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="bcJssj" label=" ">
            <el-time-picker v-model="listQuery.bcJssj" :disabled="isDetail" format="HH:mm:ss" placeholder="结束时间"
              value-format="HH:mm:ss" />
          </el-form-item>
        </div>
      </div>
      <div class="bblxItem">
        <div class="btItem">负责人</div>
        <div class="info">
          <el-form-item>
            <ChooseTable :deptment="deptment" @change="handleFzr" v-if="!isDetail" :configer="{
              width: 700,
              lx: 'mj',
              rowKey: 'id',
              isRadio: true
            }" :dic="props.dic" />
          </el-form-item>
          <el-form-item prop="fzrXm" label=" ">
            <el-input readonly v-model="listQuery.fzrXm" placeholder="负责人" clearable />
          </el-form-item>
          <el-form-item prop="fzrSfzh" label=" ">
            <el-input readonly v-model="listQuery.fzrSfzh" placeholder="身份证" clearable />
          </el-form-item>
          <el-form-item prop="fzrLxdh" label=" ">
            <el-input readonly v-model="listQuery.fzrLxdh" placeholder="负责人电话" clearable />
          </el-form-item>
        </div>
      </div>
      <div class="bblxItem">
        <div class="btItem">当班人员</div>
        <div class="info">
          <div style="width: 100%">
            <el-form-item prop="mjData" label="当班民警">
              <div class="flex">
                <div class="num">
                  {{ mjData ? mjData.length : 0 }}
                </div>
                <ChooseTable :deptment="deptment" v-if="!isDetail" :dic="props.dic" :configer="{
                  lx: 'mj',
                  rowKey: 'ryid',
                  placement: 'top-start'
                }" v-model="mjData" />
                <div class="peolist">
                  <el-tag type="primary" v-for="item in mjData" :key="item">{{
                    item.jlxm || item.xm
                  }}</el-tag>
                </div>
              </div>
            </el-form-item>
          </div>
          <div style="width: 100%">
            <el-form-item prop="fjData" label="当班辅警">
              <div class="flex">
                <div class="num">
                  {{ fjData ? fjData.length : 0 }}
                </div>
                <!-- :deptment="props.dep"
                    :dic="props.dic" -->
                <ChooseTable :deptment="deptment" :dic="props.dic" v-if="!isDetail"
                  :configer="{ lx: 'fj', placement: 'top-start' }" v-model="fjData" />
                <div class="peolist">
                  <el-tag type="primary" v-for="item in fjData" :key="item">{{
                    item.jlxm || item.xm
                  }}</el-tag>
                </div>
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="bblxItem">
        <div class="btItem">装备</div>
        <div class="info">
          <div style="width: 100%">
            <el-form-item prop="zdList" label="智能装备">
              <div class="flex">
                <div class="num">
                  {{ listQuery.zdList ? listQuery.zdList.length : 0 }}
                </div>
                <ChooseTable :dic="props.dic" v-if="!isDetail" :deptment="deptment" :configer="{
                  lx: 'znzb',
                  rowKey: 'id',
                  placement: 'top-start'
                }" v-model="listQuery.zdList" />
                <div class="peolist">
                  <el-tag type="primary" v-for="item in listQuery.zdList" :key="item">{{ item.sbmc }}</el-tag>
                </div>
              </div>
            </el-form-item>
          </div>
          <!-- <div style="width: 100%">
                <el-form-item prop="jyqxList" label="警用器械">
                  <div class="flex">
                    <div class="num">
                      {{ listQuery.jyqxList ? listQuery.jyqxList.length : 0 }}
                    </div>

                    <ChooseTable
                      :deptment="deptment"
                      v-if="!isDetail"
                      :dic="props.dic"
                      :configer="{ lx: 'jyqx', placement: 'top-start' }"
                      v-model="listQuery.jyqxList"
                    />
                    <div class="peolist">
                      <el-tag
                        type="primary"
                        v-for="item in listQuery.jyqxList"
                        :key="item"
                        >{{ item.qxMc }}</el-tag
                      >
                    </div>
                  </div>
                  <div style="width: 100%">
                    <el-form-item
                      v-for="(item, idx) in listQuery.jyqxList"
                      :key="idx"
                      :label="item.qxMc"
                    >
                      <el-input-number
                        :disabled="isDetail"
                        style="width: 100%"
                        v-model="item.qxsl"
                        class="mx-4"
                        :min="0"
                      />
                    </el-form-item>
                  </div>
                </el-form-item>
              </div> -->
          <div style="width: 100%">
            <el-form-item prop="clList" label="巡防车辆">
              <div class="flex">
                <div class="num">
                  {{ listQuery.clList ? listQuery.clList.length : 0 }}
                </div>
                <ChooseTable :deptment="deptment" v-if="!isDetail" :dic="props.dic" :configer="{
                  lx: 'cl',
                  rowKey: 'id',
                  placement: 'top-start'
                }" v-model="listQuery.clList" />
                <div class="peolist">
                  <el-tag type="primary" v-for="item in listQuery.clList" :key="item">{{ item.cph }}</el-tag>
                </div>
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="bblxItem">
        <div class="btItem">警用器械</div>
        <div class="info">
          <el-form-item>
            <div v-for="(item, index) in listQuery.qxList" :key="index" style="width: 50%; margin-bottom: 10px">
              <div class="flex">
                <div style="width: 30%">{{ item.qxmc }}：</div>
                <el-input-number v-model="item.qxsl" :step="1" />
              </div>
            </div>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted, watch } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { jczqueryById } from "@/api/mosty-jcz";
import { jczsavel, Xfbbupdate } from "@/api/mosty-jcz.js";
import { ElMessage } from "element-plus";
import ChooseTable from "@/components/chooseList/chooseTable.vue";
import { timeValidate } from "@/utils/tools.js";
import { useRoute } from "vue-router";
import emitter from "@/utils/eventBus.js";
const { proxy } = getCurrentInstance();
// const { D_BZ_JYQXFL } = proxy.$dict("D_BZ_JYQXFL");
const props = defineProps({
  dic: {
    type: Object,
    default: () => { }
  },
  isDetail: {
    type: Boolean,
    default: false
  },
  row: { type: Object, default: () => { } }
});
const route = useRoute();
const emit = defineEmits(["close"]);
const formRef = ref(null);
const dialogForm = ref(false);
const listQuery = ref({});
const pageInfo = {
  edit: {
    title: "编辑",
    url: ""
  },
  add: {
    title: "新增",
    url: ""
  },
  detail: {
    title: "详情"
  }
};
let pageType = ref("add");
const mjData = ref([]);
const fjData = ref([]);
const ChegeMj = (val) => {
  const data = val.map((item) => {
    return {
      xfllld: item.id,
      ryXm: item.xm,
      rysfzh: item.sfzh,
      ryMfjlb: item.fl,
      ryid:item.ryid,
      ryLxdh: item.lxdh
    };
  });
  return data;
};
const fz = (val) => {
  const data = val.map((item) => {
    return {
      id: item.xfllld,
      xm: item.ryXm,
      sfzh: item.rysfzh,
      fl: item.ryMfjlb,
      ryid:item.ryid,
      lxdh: item.ryLxdh
    };
  });
  return data;
};

// 初始化数据
const init = (type) => {
  pageType.value = type;
  dialogForm.value = true;
  // 根据type和row初始化表单数据
  console.log(props.row, "=====================================");

  if (props.row) {
    listQuery.value = { ...props.row };
    if (props.row.ryList.length > 0) {
      const data = fz(props.row.ryList);
      mjData.value = data.filter((item) => item.fl == "01");
      fjData.value = data.filter((item) => item.fl == "02");
    }
    if (listQuery.value.qxList.length == 0) {
      listQuery.value.qxList = props.dic.D_BZ_JYQXFL.map((item) => {
        return { qxmc: item.label, qxsl: 0 };
      });
    }
  } else {
    pageType.value = "add";
    listQuery.value.qxList = props.dic.D_BZ_JYQXFL.map((item) => {
      return { qxmc: item.label, qxsl: 0 };
    });
  }
};
watch(
  () => props.row,
  () => {
    init();
  },
  { deep: true, immediate: true }
);
const routerList = ref({})
onMounted(() => {
  init();
  console.log(route.query);

  routerList.value = route.query
});
// 验证规则
const rules = ref({
  bcKtsDict: [
    {
      required: true,
      message: "请选择班次",
      trigger: "blur"
    }
  ],
  bcKssj: [
    {
      required: true,
      message: "请选择开始时间",
      trigger: "blur"
    }
  ], bcJssj: [
    {
      required: true,
      message: "请选择结束时间",
      trigger: "blur"
    }
  ], fzrXm: [
    {
      required: true,
      message: "请输入负责人",
      trigger: "blur"
    }
  ], fzrSfzh: [
    {
      required: true,
      message: "请输入身份证",
      trigger: "blur"
    }
  ],
});
//保存
const loding = ref(false);
const _onSave = () => {
  formRef.value.validate().then(async () => {
    const data = [...mjData.value, ...fjData.value];
    listQuery.value.ryList = ChegeMj(data);
    const time = new Date();
    listQuery.value.bbSjBbrq = timeValidate(time);
    switch (listQuery.value.bcKtsDict) {
      case "01":
        listQuery.value.bcKts = 1;
        break;
      case "02":
        listQuery.value.bcKts = 2;
        break;
      case "03":
        listQuery.value.bcKts = 4;
        break;
      case "04":
        listQuery.value.bcKts = 5;
        break;
      case "05":
        listQuery.value.bcKts = 6;
        break;
      case "06":
        listQuery.value.bcKts = 7;
        break;
      case "07":
        listQuery.value.bcKts = 8;
        break;
    }
    listQuery.value.jczid = routerList.value.id ? routerList.value.id : "";
    listQuery.value.jczmc = routerList.value.name ? routerList.value.name : "";
    if (pageType.value == "add") {
      jczsavel(listQuery.value).then((res) => {
        ElMessage({ message: "新增成功", type: "success" });
        getjczqueryById()
        emit("close");
      }).finally(() => {
        loding.value = false
      });
    } else {
      Xfbbupdate(listQuery.value).then((res) => {
        ElMessage({ message: "修改成功", type: "success" });
        getjczqueryById()
        emit("close");
      }).finally(() => {
        loding.value = false
      });
    }

  }).catch(() => { });
};
const getjczqueryById = () => {
  jczqueryById({ jczid: props.jczId }).then((res) => {
    if (res) {
      emitter.emit("getjczqueryById", res);
      //   warningList.value.qxList =res.qxList&&res.qxList.length>0
      //     ? res.qxList.filter((item) => item.qxsl > 0)
      //     : [];
      //   warningList.value.ryList = res.ryList.length>0 ? res.ryList : [];
      //   warningList.value.clList = res.clList.length>0 ? res.clList : [];
      //   warningList.value.sbList = [...res.tcList, ...res.zdList]
      //  emitter.emit("chengZ", res);
    } else {
      // warningList.value = res;
    }
  });
};
//
const close = () => {
  dialogForm.value = false;
  listQuery.value = {};
};

//获取数据
const JczShow = ref(false);
//负责人
const handleFzr = (val) => {
  listQuery.value.fzrXm = val.xm;
  listQuery.value.fzrId = val.ryid;
  listQuery.value.fzrSfzh = val.sfzh;
  listQuery.value.fzrLxdh = val.lxdh;
};
const deptment = ref({});
const changeDep = (val) => {
  deptment.value = val;
};
const changeJCZ = (val) => {
  console.log(val);
};
</script>

<style lang="scss" scoped>
.dialog {
  padding: 20px;

  .file {
    height: 400px;
    border: 1px solid #e9e9e9;
    // border-radius: ;
    color: #777575;
    // border-left: 0;
  }

  :deep(.el-form-item__label) {
    background-color: #f7fafb;
    padding: 0px 8px;
    color: #000;
    font-weight: 500;
    border: 1px solid #e3e7ed;
  }

  .head_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .cntinfo {
    height: calc(100% - 70px);
    overflow: hidden;
    overflow-y: auto;
    color: #000;
  }
}

.bblxItem {
  width: 100%;
  line-height: 40px;
  min-height: 40px;
  display: flex;
  color: #000;

  .btItem {
    width: 180px;
    padding: 7px 0;
    background: #0000000a;
    margin-top: 1px;
    text-align: center;
  }

  .info {
    flex: 1;
    background: #0000000a;
    margin-top: 1px;
    padding: 10px;
    box-sizing: border-box;

    .gapline {
      height: 1px;
      border-top: 1px dashed #66cbff;
      margin: 4px 0;
    }

    .dl-car {
      min-width: 200px;
      display: inline-block;
      border: solid 1px #66cbff;
      margin: 20px 30px 0 0;
      padding: 0;
      border-radius: 5px;
      position: relative;

      dt {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #0380c0;
        padding: 0 10px 0 40px;
        box-sizing: border-box;
        font-weight: 600;
        box-sizing: border-box;
        border-bottom: solid 1px #66cbff;
        background: #e3f5ff;
        height: 30px;
        border-radius: 5px 5px 0 0;
      }

      .peo {
        border-bottom: solid 1px #01d608;
        background: #dbf3cf;
        color: #339d00;
      }
    }

    .dl-car::before {
      position: absolute;
      content: "";
      top: -18px;
      left: -18px;
      width: 52px;
      height: 49px;
      background: url("~@/assets/images/peo.png");
    }
  }

  .num {
    width: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #bebebe;
    // background-color: #1b294c;
    border-radius: 4px;
    margin-right: 10px;
  }

  .subBtn {
    padding-left: 100px;
    box-sizing: border-box;
  }
}

::v-deep .el-form-item--default {
  margin-bottom: 0;
}

::v-deep .el-form-item {
  margin-bottom: 10px;
}

::v-deep .el-form--inline .el-form-item {
  margin-right: 20px;
  margin-top: 10px;
}

.deBtn {
  padding: 0px 10px;
  background: rgb(35, 176, 241);
  border-radius: 18px;
  color: #fff;
  cursor: pointer;
}

.box {
  margin-bottom: 10px;
}

::v-deep .el-form-item__label {
  padding: 0;
}
</style>