DataCenter/src/views/toolManage/shipOwnerWeappConfig.vue

<template>
  <div>
    <el-card class="mb20">
      <template #header>
        <div class="card-header">
          <span>证书办理服务介绍</span>
        </div>
      </template>
      <div class="df">
        <div>
          <el-image
            v-if="certOperationIntroduce.imageUrl"
            class="mb10"
            style="width: 200px; height: 200px"
            fit="cover"
            :preview-src-list="[certOperationIntroduce.imageUrl]"
            :src="certOperationIntroduce.imageUrl"
          ></el-image>
          <el-upload
            class="df aic jcfe"
            :action="
              store.state.baseurl +
              '/sys/basic/config/ship/upload/introduce/img'
            "
            :show-file-list="false"
            :data="{ configType: 1 }"
            :on-success="
              (res) => uploadCertSuccess(res, certOperationIntroduce)
            "
          >
            <el-button type="primary">
              {{ certOperationIntroduce.imageUrl ? "重新" : "" }}上传图片
            </el-button>
          </el-upload>
        </div>
        <div class="ml20">
          <div style="margin-bottom: 15px">
            <el-input
              type="textarea"
              v-model="certOperationIntroduce.textContent"
              placeholder="请输入证书办理服务介绍"
              style="width: 400px; height: 200px"
            ></el-input>
          </div>
          <div class="df jcfe">
            <el-button
              type="primary"
              @click="updateShipIntroduceContent(1, certOperationIntroduce)"
            >
              更新证书办理服务介绍
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="mb20">
      <template #header>
        <div class="card-header df aic">
          <span class="mr10">证书办理联系人</span>
          <el-button type="primary" @click="addShipContact">
            添加联系人
          </el-button>
        </div>
        <el-dialog v-model="showModifyDialog" title="修改联系人" width="500px">
          <el-form
            class="ml20 mt20"
            :model="modifyForm"
            :rules="formRules"
            label-width="100px"
          >
            <el-form-item class="mb20" label="办事处" prop="officeName">
              <el-input class="w300" v-model="modifyForm.officeName" />
            </el-form-item>
            <el-form-item class="mb20" label="联系人" prop="contactPerson">
              <el-input class="w300" v-model="modifyForm.contactPerson" />
            </el-form-item>
            <el-form-item class="mb20" label="手机号" prop="contactPhone">
              <el-input class="w300" v-model="modifyForm.contactPhone" />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="df aic jcfe mb10" style="padding-right: 50px">
              <el-button @click="showModifyDialog = false">取消</el-button>
              <el-button type="primary" @click="submitModifyForm">
                确定
              </el-button>
            </div>
          </template>
        </el-dialog>
      </template>
      <el-table :data="shipCertOperationList" style="width: 800px" border>
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="officeName" label="办事处" align="center" />
        <el-table-column
          prop="contactPerson"
          label="联系人"
          width="160"
          align="center"
        />
        <el-table-column
          prop="contactPhone"
          label="手机号"
          width="160"
          align="center"
        />
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="modifyShipCertOperation(scope.row)"
            >
              修改
            </el-button>
            <el-button
              type="danger"
              size="small"
              @click="deleteShipCertOperation(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="mb20">
      <template #header>
        <div class="card-header">
          <span>法律援助服务介绍</span>
        </div>
      </template>
      <div class="df">
        <div>
          <el-image
            v-if="legalAidIntroduce.imageUrl"
            class="mb10"
            style="width: 200px; height: 200px"
            fit="cover"
            :preview-src-list="[legalAidIntroduce.imageUrl]"
            :src="legalAidIntroduce.imageUrl"
          ></el-image>
          <el-upload
            class="df aic jcfe"
            :action="
              store.state.baseurl +
              '/sys/basic/config/ship/upload/introduce/img'
            "
            :show-file-list="false"
            :data="{ configType: 2 }"
            :on-success="(res) => uploadCertSuccess(res, legalAidIntroduce)"
          >
            <el-button type="primary">
              {{ legalAidIntroduce.imageUrl ? "重新" : "" }}上传图片
            </el-button>
          </el-upload>
        </div>
        <div class="ml20">
          <div style="margin-bottom: 15px">
            <el-input
              type="textarea"
              v-model="legalAidIntroduce.textContent"
              placeholder="请输入法律援助服务介绍"
              style="width: 400px; height: 200px"
            ></el-input>
          </div>
          <div class="df jcfe">
            <el-button
              type="primary"
              @click="updateShipIntroduceContent(2, legalAidIntroduce)"
            >
              更新法律援助服务介绍
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="mb20">
      <template #header>
        <div class="card-header">
          <span>法律援助律师/团队介绍</span>
        </div>
      </template>
      <div class="df">
        <div>
          <el-image
            v-if="lawyerIntroduce.imageUrl"
            class="mb10"
            style="width: 200px; height: 200px"
            fit="cover"
            :preview-src-list="[lawyerIntroduce.imageUrl]"
            :src="lawyerIntroduce.imageUrl"
          ></el-image>
          <el-upload
            class="df aic jcfe"
            :action="
              store.state.baseurl +
              '/sys/basic/config/ship/upload/introduce/img'
            "
            :show-file-list="false"
            :data="{ configType: 3 }"
            :on-success="(res) => uploadCertSuccess(res, lawyerIntroduce)"
          >
            <el-button type="primary">
              {{ lawyerIntroduce.imageUrl ? "重新" : "" }}上传图片
            </el-button>
          </el-upload>
        </div>
        <div class="ml20">
          <div style="margin-bottom: 15px">
            <el-input
              type="textarea"
              v-model="lawyerIntroduce.textContent"
              placeholder="请输入法律援助律师/团队介绍
"
              style="width: 400px; height: 200px"
            ></el-input>
          </div>
          <div class="df jcfe">
            <el-button
              type="primary"
              @click="updateShipIntroduceContent(3, lawyerIntroduce)"
            >
              更新律师/团队介绍
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import api from "apis/fetch";
import store from "store";
import { ElNotification } from "element-plus";
const baseurl = import.meta.env.VITE_BASEURL;
import _ from "lodash";

const certOperationIntroduce = ref({});
const lawyerIntroduce = ref({});
const legalAidIntroduce = ref({});
const shipCertOperationList = ref([]);

async function getShipIntroduceInfo() {
  let { data } = await api.getShipIntroduceInfo();
  if (data.status === 0) {
    certOperationIntroduce.value = data.result.certOperationIntroduce;
    lawyerIntroduce.value = data.result.lawyerIntroduce;
    legalAidIntroduce.value = data.result.legalAidIntroduce;
  } else {
    certOperationIntroduce.value = {};
    lawyerIntroduce.value = {};
    legalAidIntroduce.value = {};
  }
}

async function getShipCertOperationList() {
  let { data } = await api.getShipCertOperationList({
    currentPage: 1,
    size: 100,
  });
  if (data.status === 0) {
    shipCertOperationList.value = data.result;
  } else {
    shipCertOperationList.value = [];
  }
}

function uploadCertSuccess(res, target) {
  if (res.status === 0) {
    target.imageUrl = res.result;
    ElNotification.success({
      title: "成功",
      message: res.msg,
    });
  } else {
    ElNotification.error({
      title: "失败",
      message: res.msg,
    });
  }
}
async function deleteShipCertOperation(row) {
  try {
    await ElMessageBox.confirm("确定要删除该联系人吗？", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });
    const { data } = await api.deleteShipCertOperation({
      certOperationId: row.id,
    });
    if (data.status === 0) {
      ElNotification.success({
        title: "成功",
        message: data.msg,
      });
      await getShipCertOperationList();
    }
  } catch (error) {}
}
const isEditMode = ref(false);
function addShipContact() {
  isEditMode.value = false;
  modifyForm.value = { officeName: "", contactPerson: "", contactPhone: "" };
  showModifyDialog.value = true;
}

const showModifyDialog = ref(false);
const modifyForm = ref({
  id: 0,
  officeName: "",
  contactPerson: "",
  contactPhone: "",
});

const formRules = {
  officeName: [
    { required: true, message: "请输入办事处名称", trigger: "blur" },
  ],
  contactPerson: [{ required: true, message: "请输入联系人", trigger: "blur" }],
  contactPhone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur" },
  ],
};

async function modifyShipCertOperation(row) {
  try {
    isEditMode.value = true;
    modifyForm.value = _.cloneDeep(row);
    showModifyDialog.value = true;
    const apiMethod = isEditMode.value
      ? api.updateShipCertOperation({
          id: modifyForm.value.id,
          ...modifyForm.value,
        })
      : api.addShipCertOperation(modifyForm.value);
    const { data } = await apiMethod;
    if (data.status === 0) {
      ElNotification.success({
        title: "成功",
        message: data.msg,
      });
      await getShipCertOperationList();
    }
  } catch (error) {}
}

async function submitModifyForm() {
  try {
    await ElMessageBox.confirm("确定要保存修改吗？", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });
    const { data } = await api.modifyShipCertOperation({
      ...modifyForm.value,
      certOperationId: modifyForm.value.id,
    });
    if (data.status === 0) {
      ElNotification.success({
        title: "成功",
        message: data.msg,
      });
      await getShipCertOperationList();
    } else {
      ElNotification.error({
        title: "失败",
        message: data.msg,
      });
    }
    showModifyDialog.value = false;
  } catch (error) {}
}
async function updateShipIntroduceContent(configType, target) {
  let { data } = await api.updateShipIntroduceContent({
    configType,
    textContent: target.textContent,
  });
  if (data.status === 0) {
    ElNotification.success({
      title: "成功",
      message: data.msg,
    });
  } else {
    ElNotification.error({
      title: "失败",
      message: data.msg,
    });
  }
}
onMounted(() => {
  getShipIntroduceInfo();
  getShipCertOperationList();
});
</script>

<style scoped>
/*  */
:deep() .el-textarea__inner {
  height: 200px;
}

.w300 {
  width: 300px;
}
</style>