|
|
@@ -0,0 +1,663 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="leftMessage">
|
|
|
+ <div class="list" v-for="(item, index) in baseMessage" :key="index">
|
|
|
+ <span class="title">
|
|
|
+ {{ item.title }}
|
|
|
+ </span>
|
|
|
+ <span v-if="item.prop == 'taskNo'" class="content">
|
|
|
+ {{ form.master_task[item.prop] }}
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-else-if="item.prop == 'mapNumber'"
|
|
|
+ class="content"
|
|
|
+ style="background: rgb(235, 237, 242); color: rgb(232, 83, 152)"
|
|
|
+ >
|
|
|
+ {{ form.master_task[item.prop] }}
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-else-if="item.prop == 'mapName'"
|
|
|
+ class="content"
|
|
|
+ style="background: rgb(235, 237, 242); color: rgb(232, 83, 152)"
|
|
|
+ >
|
|
|
+ {{ form.master_task[item.prop] }}
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-else-if="item.prop == 'modelNumber'"
|
|
|
+ class="content"
|
|
|
+ style="background: rgb(235, 237, 242); color: rgb(232, 83, 152)"
|
|
|
+ >
|
|
|
+ {{ form.master_task[item.prop] }}
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-else-if="item.prop == 'craftRoute'"
|
|
|
+ class="content"
|
|
|
+ style="background: rgb(235, 237, 242); color: rgb(232, 83, 152)"
|
|
|
+ >
|
|
|
+ {{ form.master_task[item.prop] }}
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-else
|
|
|
+ class="content"
|
|
|
+ style="background: rgb(235, 237, 242); color: rgb(232, 83, 152)"
|
|
|
+ >
|
|
|
+ {{ form.record_quality_control_card[item.prop] }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div></div>
|
|
|
+ <div class="content"></div>
|
|
|
+ </div>
|
|
|
+ <div class="rightMessage">
|
|
|
+ <div class="top">
|
|
|
+ <div class="state">
|
|
|
+ <div class="list">
|
|
|
+ <span>工序状态：</span>
|
|
|
+ <p id="state">
|
|
|
+ {{
|
|
|
+ form.taskNodeOtherState
|
|
|
+ ? stateObj[form.taskNodeOtherState]
|
|
|
+ : "初始"
|
|
|
+ }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <span>是否外协：</span>
|
|
|
+ <p>
|
|
|
+ <el-checkbox
|
|
|
+ @change="
|
|
|
+ (val) => {
|
|
|
+ updateHandler(form.taskNodeOtherState, val);
|
|
|
+ }
|
|
|
+ "
|
|
|
+ v-model="checked"
|
|
|
+ ></el-checkbox>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="button">
|
|
|
+ <el-button-group prop="state">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-video-play"
|
|
|
+ plain
|
|
|
+ round
|
|
|
+ @click="updateHandler('1', checked)"
|
|
|
+ >开始</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ icon="el-icon-video-pause"
|
|
|
+ plain
|
|
|
+ @click="updateHandler('2', checked)"
|
|
|
+ >暂停</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="success"
|
|
|
+ icon="el-icon-circle-check"
|
|
|
+ plain
|
|
|
+ @click="updateHandler('3', checked)"
|
|
|
+ >完成</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="info"
|
|
|
+ icon="el-icon-refresh"
|
|
|
+ plain
|
|
|
+ round
|
|
|
+ @click="updateHandler('0', checked)"
|
|
|
+ >重置</el-button
|
|
|
+ >
|
|
|
+ </el-button-group>
|
|
|
+ </div>
|
|
|
+ <div class="middle" v-show="!checked">
|
|
|
+ <el-table :data="oldTableData" border ref="addTableRowRef">
|
|
|
+ <el-table-column label="人员姓名">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input
|
|
|
+ v-if="scope.row.isEdit"
|
|
|
+ v-model="editingRow.personnelName"
|
|
|
+ ></el-input>
|
|
|
+ <span v-else>{{ scope.row.personnelName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="分配工时">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input-number
|
|
|
+ v-if="scope.row.isEdit"
|
|
|
+ v-model="editingRow.allottedTime"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ :min="0"
|
|
|
+ :step="0.25"
|
|
|
+ size="small"
|
|
|
+ ></el-input-number>
|
|
|
+ <span v-else>{{ scope.row.allottedTime }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="120" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-dropdown v-if="!scope.row.isEdit">
|
|
|
+ <el-button type="warning" plain size="small">
|
|
|
+ 处理<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ </el-button>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item
|
|
|
+ ><el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="changeHandler(scope.row)"
|
|
|
+ >修改</el-button
|
|
|
+ ></el-dropdown-item
|
|
|
+ >
|
|
|
+ <el-dropdown-item
|
|
|
+ ><el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="deleteOne(scope.row)"
|
|
|
+ v-hasPermi="['system:dict:remove']"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ <el-dropdown v-else>
|
|
|
+ <el-button type="warning" plain size="small">
|
|
|
+ 处理<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ </el-button>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item
|
|
|
+ ><el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="saveOne"
|
|
|
+ >保存</el-button
|
|
|
+ ></el-dropdown-item
|
|
|
+ >
|
|
|
+ <el-dropdown-item
|
|
|
+ ><el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="cancelHandler(scope.row)"
|
|
|
+ v-hasPermi="['system:dict:remove']"
|
|
|
+ >取消</el-button
|
|
|
+ >
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ <!-- <el-button
|
|
|
+ icon="el-icon-delete"
|
|
|
+ size="mini"
|
|
|
+ @click="deleteTableRow(scope.$index)"
|
|
|
+ >删除</el-button
|
|
|
+ > -->
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="name">人员及工时分配</div>
|
|
|
+ <el-table :data="tableData" border ref="addTableRowRef">
|
|
|
+ <el-table-column label="人员姓名">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.personnelName"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="分配工时">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input-number
|
|
|
+ v-model="scope.row.allottedTime"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ :min="0"
|
|
|
+ :step="0.25"
|
|
|
+ size="small"
|
|
|
+ ></el-input-number>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="120" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-delete"
|
|
|
+ size="mini"
|
|
|
+ @click="deleteTableRow(scope.$index)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="block">
|
|
|
+ <el-pagination layout="prev, pager, next" :total="50">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ type="primary"
|
|
|
+ @click="addTableRow"
|
|
|
+ >新 增</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-check"
|
|
|
+ type="success"
|
|
|
+ @click="saveTableRow"
|
|
|
+ >保 存</el-button
|
|
|
+ >
|
|
|
+ <div class="total">
|
|
|
+ <span>当前工序总工时： 10</span>
|
|
|
+ <span>当前已分配工时： 10</span>
|
|
|
+ <span>当前剩余工时： 10</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import {
|
|
|
+submitNodeForm,
|
|
|
+changeNodeState,
|
|
|
+} from "@/api/bpmprocess/runDialogApi/index";
|
|
|
+import { getProcessNodeFormInfoData } from "@/api/bpmprocess/run/executeProcess";
|
|
|
+export default {
|
|
|
+name: "ProductionProcesses",
|
|
|
+props: ["formData", "row"],
|
|
|
+data() {
|
|
|
+ return {
|
|
|
+ checked: true,
|
|
|
+ isEdit: false,
|
|
|
+ form: {
|
|
|
+ taskNodeOtherState: "0",
|
|
|
+ },
|
|
|
+ tableData: [],
|
|
|
+ editingRow: {},
|
|
|
+ oldTableData: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ personnelName: "芝麻林",
|
|
|
+ allottedTime: 1,
|
|
|
+ isEdit: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ newRow: {},
|
|
|
+
|
|
|
+ baseMessage: [
|
|
|
+ { title: "任务", prop: "taskNo" },
|
|
|
+ { title: "图号", prop: "mapNumber" },
|
|
|
+ { title: "名称", prop: "mapName" },
|
|
|
+ { title: "数量", prop: "modelNumber" },
|
|
|
+ { title: "工艺", prop: "craftRoute" },
|
|
|
+ { title: "质控", prop: "qualityControlCard" },
|
|
|
+ ],
|
|
|
+ stateObj: {
|
|
|
+ 0: "初始",
|
|
|
+ 1: "开始",
|
|
|
+ 2: "暂停",
|
|
|
+ 3: "完成",
|
|
|
+ },
|
|
|
+ };
|
|
|
+},
|
|
|
+computed: {
|
|
|
+ myFormData() {
|
|
|
+ return this.formData;
|
|
|
+ },
|
|
|
+},
|
|
|
+watch: {
|
|
|
+ myFormData: {
|
|
|
+ handler(nval) {
|
|
|
+ if (!nval) return;
|
|
|
+ this.initData(nval);
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+},
|
|
|
+methods: {
|
|
|
+ async updateHandler(state, flag) {
|
|
|
+ flag = flag ? "true" : "false";
|
|
|
+ let payLoad = {
|
|
|
+ // conditionMap: {
|
|
|
+ taskProcessKey: this.row.benTaskProcessKey,
|
|
|
+ taskNodeKey: this.row.benTaskNodeKey,
|
|
|
+ // },
|
|
|
+ // commMap: {
|
|
|
+ taskNodeOtherState: state,
|
|
|
+ task1: flag,
|
|
|
+ // },
|
|
|
+ };
|
|
|
+
|
|
|
+ changeNodeState(payLoad).then((response) => {
|
|
|
+ if (response.code == 200) {
|
|
|
+ this.$modal.msgSuccess("修改成功");
|
|
|
+ this.form.taskNodeOtherState = state;
|
|
|
+ } else {
|
|
|
+ this.$modal.error("修改失败,请稍后再试");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async submitHandler() {
|
|
|
+ console.log(this.row);
|
|
|
+ let res = await this.$refs.form?.validate();
|
|
|
+ if (res) {
|
|
|
+ let payLoad = {};
|
|
|
+ let { state } = this.form;
|
|
|
+ console.log(this.form);
|
|
|
+ if (this.isEdit) {
|
|
|
+ let { taskKey, taskNodeKey } = this.myFormData.resultMap;
|
|
|
+ payLoad.updateCommonEntityList = [
|
|
|
+ {
|
|
|
+ basicMap: {
|
|
|
+ tableName: "bpm_execute_node",
|
|
|
+ },
|
|
|
+ conditionMap: {
|
|
|
+ task_key: taskKey,
|
|
|
+ task_node_key: taskNodeKey,
|
|
|
+ },
|
|
|
+ commMap: {
|
|
|
+ task_node_other_state: state,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ } else {
|
|
|
+ payLoad.insertCommonEntityList = [
|
|
|
+ {
|
|
|
+ basicMap: {
|
|
|
+ tableName: "bpm_execute_node",
|
|
|
+ },
|
|
|
+ addListMap: [
|
|
|
+ {
|
|
|
+ task_node_other_state: state,
|
|
|
+ taskKey: this.row.benTaskProcessKey,
|
|
|
+ taskNodeKey: this.row.benTaskNodeKey,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ submitNodeForm(payLoad).then((response) => {
|
|
|
+ if (response.code == 200) {
|
|
|
+ this.$modal.msgSuccess("保存成功");
|
|
|
+ } else {
|
|
|
+ this.$modal.error("保存失败,请稍后再试");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getFormData() {
|
|
|
+ return {
|
|
|
+ flag: true,
|
|
|
+ data: {},
|
|
|
+ };
|
|
|
+
|
|
|
+ let formData = {
|
|
|
+ flag: false,
|
|
|
+ msg: "",
|
|
|
+ };
|
|
|
+ try {
|
|
|
+ let valid = await this.$refs.form.validate();
|
|
|
+ if (valid) {
|
|
|
+ formData.flag = true;
|
|
|
+ formData.data = this.form;
|
|
|
+ return formData;
|
|
|
+ } else {
|
|
|
+ formData.msg = "表单校验异常,请规范填写表单数据";
|
|
|
+ return formData;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ // console.log(error);
|
|
|
+ formData.msg = "表单校验异常,请规范填写表单数据";
|
|
|
+ return formData;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addTableRow() {
|
|
|
+ const newRow = {
|
|
|
+ personnelName: "",
|
|
|
+ allottedTime: 0,
|
|
|
+ };
|
|
|
+ this.tableData.push(newRow);
|
|
|
+ },
|
|
|
+ deleteTableRow(index) {
|
|
|
+ if (index !== -1) {
|
|
|
+ this.tableData.splice(index, 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 批量保存表格数据回调
|
|
|
+ async saveTableRow() {
|
|
|
+ console.log(this.tableData);
|
|
|
+ let payLoad = {};
|
|
|
+ payLoad.insertCommonEntityList = [
|
|
|
+ {
|
|
|
+ basicMap: {
|
|
|
+ tableName: "process_inspect_personnel",
|
|
|
+ },
|
|
|
+ addListMap: [
|
|
|
+ // {
|
|
|
+ // task_node_other_state: state,
|
|
|
+ // taskKey: this.row.benTaskProcessKey,
|
|
|
+ // taskNodeKey: this.row.benTaskNodeKey,
|
|
|
+ // },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ payLoad.insertCommonEntityList[0].addListMap = this.tableData.map(
|
|
|
+ (item) => {
|
|
|
+ let { personnelName, allottedTime } = item;
|
|
|
+ return {
|
|
|
+ personnelName,
|
|
|
+ allottedTime,
|
|
|
+ taskProcessKey: this.row.benTaskProcessKey,
|
|
|
+ taskNodeKey: this.row.benTaskNodeKey,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ );
|
|
|
+ // this.tableData = [];
|
|
|
+ let res = await submitNodeForm(payLoad);
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message.success("保存成功");
|
|
|
+ this.tableData = [];
|
|
|
+ this.refreshData(this.row);
|
|
|
+ } else {
|
|
|
+ this.$message.warning("网络异常,请稍后再试");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 刷新弹窗数据
|
|
|
+ async refreshData(row) {
|
|
|
+ let {
|
|
|
+ benTaskNodeFormKey,
|
|
|
+ benTaskNodeFormType,
|
|
|
+ bepTaskPlanKey,
|
|
|
+ bepTaskKey,
|
|
|
+ bepTaskNodeKey,
|
|
|
+ benTaskProcessKey,
|
|
|
+ benmTaskAutomaticScriptTriggerType,
|
|
|
+ bepTaskNodeNextKey,
|
|
|
+ } = row;
|
|
|
+ let payLoad = {
|
|
|
+ taskNodeKey: bepTaskNodeNextKey,
|
|
|
+ taskProcessKey: benTaskProcessKey,
|
|
|
+ taskAutomaticScriptTriggerType: benmTaskAutomaticScriptTriggerType,
|
|
|
+ taskPlanKey: bepTaskPlanKey,
|
|
|
+ };
|
|
|
+ let res = await getProcessNodeFormInfoData(payLoad);
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.updataTableData(res.data);
|
|
|
+ } else {
|
|
|
+ this.$message.error("网络异常,请稍后再试");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 修改某一条数据
|
|
|
+ async saveOne() {
|
|
|
+ console.log(this.editingRow);
|
|
|
+ let payLoad = {};
|
|
|
+ let { taskKey, taskNodeKey } = this.myFormData.resultMap;
|
|
|
+ let { id, personnelName, allottedTime } = this.editingRow;
|
|
|
+ payLoad.updateCommonEntityList = [
|
|
|
+ {
|
|
|
+ basicMap: {
|
|
|
+ tableName: "process_inspect_personnel",
|
|
|
+ },
|
|
|
+ conditionMap: {
|
|
|
+ taskProcessKey: this.row.benTaskProcessKey,
|
|
|
+ taskNodeKey: this.row.benTaskNodeKey,
|
|
|
+ id,
|
|
|
+ },
|
|
|
+ commMap: {
|
|
|
+ personnelName,
|
|
|
+ allottedTime,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ let res = await submitNodeForm(payLoad);
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message.success("保存成功");
|
|
|
+ this.refreshData(this.row);
|
|
|
+ } else {
|
|
|
+ this.$message.warning("网络异常,请稍后再试");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 删除一条数据
|
|
|
+ async deleteOne(row) {
|
|
|
+ let payLoad = {};
|
|
|
+ let { id } = row;
|
|
|
+ payLoad.deleteCommonEntityList = [
|
|
|
+ {
|
|
|
+ basicMap: {
|
|
|
+ tableName: "process_inspect_personnel",
|
|
|
+ },
|
|
|
+ conditionMap: {
|
|
|
+ // taskProcessKey: this.row.benTaskProcessKey,
|
|
|
+ // taskNodeKey: this.row.benTaskNodeKey,
|
|
|
+ id: [id],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ let res = await submitNodeForm(payLoad);
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message.success("删除成功");
|
|
|
+ this.refreshData(this.row);
|
|
|
+ } else {
|
|
|
+ this.$message.warning("网络异常,请稍后再试");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 取消修改回调
|
|
|
+ cancelHandler(row) {
|
|
|
+ row.isEdit = false;
|
|
|
+ },
|
|
|
+ handleChange(value) {
|
|
|
+ console.log(value);
|
|
|
+ },
|
|
|
+ changeHandler(row) {
|
|
|
+ console.log(row);
|
|
|
+ row.isEdit = true;
|
|
|
+ this.editingRow = JSON.parse(JSON.stringify(row));
|
|
|
+ },
|
|
|
+ // 初始化数据
|
|
|
+ initData(nval) {
|
|
|
+ this.form = JSON.parse(JSON.stringify(nval?.resultMap));
|
|
|
+ this.form.personnelList.forEach((element) => {
|
|
|
+ element.isEdit = false;
|
|
|
+ });
|
|
|
+ this.oldTableData = JSON.parse(JSON.stringify(this.form.personnelList));
|
|
|
+ this.checked = this.form.task1 == "true" ? true : false;
|
|
|
+ // this.$set(this.form, 'card', nval?.resultMap.qualityControlCard);
|
|
|
+ this.$set(this.form, "state", nval?.resultMap.taskNnodeOtherState);
|
|
|
+ },
|
|
|
+ // 更新表格数据
|
|
|
+ updataTableData(nval) {
|
|
|
+ nval?.resultMap.personnelList.forEach((element) => {
|
|
|
+ element.isEdit = false;
|
|
|
+ });
|
|
|
+ this.oldTableData = JSON.parse(
|
|
|
+ JSON.stringify(nval?.resultMap.personnelList)
|
|
|
+ );
|
|
|
+ },
|
|
|
+},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-container {
|
|
|
+::v-deep .el-checkbox {
|
|
|
+ /* font-size: 8px; */
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+display: flex;
|
|
|
+flex-direction: row;
|
|
|
+justify-content: space-between;
|
|
|
+.leftMessage {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 145px;
|
|
|
+ .list {
|
|
|
+ padding: 10px 0px;
|
|
|
+ span {
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 5px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ background-color: rgb(52, 191, 163);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ background: rgb(235, 237, 242);
|
|
|
+ color: rgb(232, 83, 152);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.rightMessage {
|
|
|
+ display: flex;
|
|
|
+ width: 500px;
|
|
|
+ flex-direction: column;
|
|
|
+ .top {
|
|
|
+ background: #53b0f8;
|
|
|
+ color: white;
|
|
|
+ height: 60px;
|
|
|
+ .state {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ padding: 10px 20px;
|
|
|
+ .list:first-child {
|
|
|
+ padding-right: 180px;
|
|
|
+ }
|
|
|
+ /* p {
|
|
|
+ padding-top: 5px;
|
|
|
+ font-size: 10px;
|
|
|
+ } */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .button {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px 0px;
|
|
|
+ .el-button {
|
|
|
+ width: 140px;
|
|
|
+ /* background: none; */
|
|
|
+ }
|
|
|
+ .el-button--info {
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .middle {
|
|
|
+ .name {
|
|
|
+ color: black;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px 0px;
|
|
|
+ }
|
|
|
+ .block {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .total {
|
|
|
+ display: inline-block;
|
|
|
+ flex-direction: row;
|
|
|
+ margin-top: 10px;
|
|
|
+ span {
|
|
|
+ font-weight: bold;
|
|
|
+ color: black;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+}
|
|
|
+</style>
|
ZYZ