ccweb: 兄弟组件+强制刷新+实现tab切换提交表单的流程思路：代码同上篇随笔笔记

思路和流程：

1：两个表单，受理页表单+工单处理表单。

2：实现第一个表单是一个tab页（受理页）提交后跳转到第二个表单（不用路由跳转这里用弹出新tab标签页并自动切换到工单处理页面表单）

3：受理页tab页面和工单处理tab标签页封装成组件，两个tab标签页的关系是兄弟组件关系。

4：两个标签页组件共同放在父组件info.vue组件内。info组件同时包含其他子组件用来显示其他信息比如来电详情和各种基础info数据展示（这里只重点讲解两个tab页组件互通的逻辑）

5：受理页面tab组件：customPage.vue,提交后弹出的兄弟组件workInfoPage.vue,两个数据通过父组件进行传值和事件。

6：受理页面的回显用父组件info.vue传入来的各种prop按对象形式进行接收，配合字典项和接口来进行回显

7：提交工单tab组件的值和回显是需要根据兄弟组件受理页面传入的数据以及配合字典项和接口进行接收并回显。

8：受理页面提交后并且成功收到数据后才会弹出工单tab标签并传入组件值。

9：工单内含有选择部门和人员结构图，选择部门是树状结构图，选择部门后显示对应部门的人员信息，并且可进行单选人员并把指定的人员id储存起来，等提交表单时一起发送。

10：选完人员后弹出确认框，会有一个可再次选择抄送人的选择，如果同意就会再次重复选择（共用组件用一个值区分开，或者再写个模态框是专门选择抄送人的）

11：选择抄送人是多选，可同时选择多个，如果是多个人发送给后端的是用逗号隔开的字符串（默认的选中数组处理成字符串既可）然后等提交表单时一起发送。

12：结束后关闭工单处理表单，同时上一个标签页受理表单（通知父组件关闭兄弟组件）。

大概的需求以及思路流程是这样的，具体再根据客户的提出进行调整增删改查。

涉及到的知识点和注意事项：

1：tab页面切换=》提交表单后新增tab页面：

这里做过两个思路-都要在父组件info.vue内完成布局和逻辑：第一个思路是类似add,new 一个新的标签页，详细可参考其他项目这里不赘述

第二个思路是用v-if 来实现父组件已经创建好的，不在methods方法内创建，而是通过v-if来决定是否渲染第二个tab组件：

2：el-tab 的v-show 和v-if 是不一样的，v-show 不会起作用的，这个知识点自己查这里不做赘述。还有一个方案是同时显示两个table(v-show也会同时显示)然后用：disabled绑定的值进行切换

这种最不推荐，但是可以做参考。

3：当点击提交表单按钮时调用接口返回成功，开始新增并切换跳转到工单的tab页面，把数据带过去进行回显。这里涉及到兄弟传值的问题，这时候的问题比较多，一定要注意了：

在受理表单发送$emit通知父组件并把值带给父组件后，父组件用的是props传递给工单tab页面，由于是v-if进行绑定的，v-if 和v-show的主要区别：v-if 提交前是不会渲染dom和数据的

所以会最新渲染，这就要在挂载组件时候把值赋给子组件的form表单并把该处理的数据都处理一遍最后进行回显。这时候是没问题的

4：当切换回受理标签页面重新修改值并再次提交后，标签页再次切换回工单详情页面，这个时候就出问题了，数据回显失败，永远是第一次提交的数据，原因是组件已经渲染完了，剩下的切换

工单标签页不会出发数据更新，这时候就需要使用watch 进行监听数据了（在工单tab页面组件内监听父组件传下来的数据），并把监听到改变的数据重新赋值给本组件要处理回显的form数据

5：还需要额外注意的是，好多人会觉得这里有监听数据赋值（中间有个人就这样改了，变成了初始化没值，再次提交才会有值）会把挂载时候的数据处理删掉。这样做的坏处是第一次提交表单是不会有值

第二次提交才会有对的回显，正确的做法是挂载要赋值，监听也要赋值。二者都不可或缺。

6：最后一个会容易犯的注意点是，在监听完后一定不要忘了强制刷新组件。（好多人都会忽略这点，造提交表单后工单组件打印出来值也都接收到了，这就是最终回显老是出问题的原因-我这里那天中午就是帮礼辉处理这个的-数据对了半天都是正确的，最后打印的值也对就是显示不对，让他好一顿抓狂。。。）

回显问什么总是容易出问题，但凡缺少一个环节都会出问题，但凡对vue有关兄弟传值进行业务代码实现的机制和流程一知半解或者马虎一点的，肯定是会容易回显出问题的。

下面贴出具体代码参考：

父组件：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

<template>
  <el-tabs type="card" v-model="activeName" ref="tabs" class="info-tab">
    <el-tab-pane
      label="话后小结"
      v-if="isShowchatSummary"
      name="chatSummary"
      lazy
    >
      <chatSummary
        v-show="activeName === 'chatSummary'"
        @updateDialog="updateDialog"
        :info="info"
      ></chatSummary>
    </el-tab-pane>
    <!-- <el-tab-pane v-for="tab in tabs" :label="tab.name" :name="tab.name" :key="tab.sort" lazy>
      <component :key="tab.sort" :is="tab.url" :info="info" v-if="tab.defaultSource === '1'"></component>
      <iframe class="inline-iframe" :src="setUrl(tab.url)" v-else />
    </el-tab-pane> -->
    <!-- 新增 -->
    <el-tab-pane label="受理单" name="shoulidan" key="shoulidan">
      <customApply
        @showWorkOrderPage="showWorkOrderPage"
        :info="info"
      ></customApply>
    </el-tab-pane>　　
    <el-tab-pane
      v-if="gongdanTabShow"
      label="工单"
      name="gongdan"
      key="gongdan"
    >
      <workOrderLog
        @closeTabwork="closeTabwork"
        v-show="activeName === 'gongdan'"
        :info="info"
        :subobj="subobj"
      ></workOrderLog>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import cache from "@/utils/cache.js";
import chatSummary from "@/view/common/tabs/chat-summary.vue"; // 话后小结tab
// import order from '@/view/common/tabs/order.vue' // 工单
// import custom from '@/view/common/tabs/custom.vue' // 客户信息
// import trade from '@/view/trade/tradeMain.vue' // 代客交易
import customApply from "@/view/common/phone/customserverapply.vue"; // 受理页面
import workOrderLog from "@/view/common/phone/workorderinfo/workorderlog.vue"; // 工单
export default {
  data() {
    return {
      activeName: "", // 高亮tab
      isShowchatSummary: false, // 话后小结开关
      subobj: null, // 提交后传入的值
      gongdanTabShow: false, // 工单的tab
    };
  },
  props: ["info", "tabs"],
  components: {
    // order, // 工单
    chatSummary, // 话后小结tab
    workOrderLog, // 工单tab
    // custom,
    // trade,
    customApply,
  },
  created() {
    const selectPropertiesByMap = cache.getDicsStorageByName(
      "selectPropertiesByMap"
    );
    this.isShowchatSummary = selectPropertiesByMap.DialogSum_SWITCH === "1";
    // this.activeName = this.isShowchatSummary ? 'chatSummary' : this.tabs[0].name
    this.activeName = "shoulidan";
  },
  methods: {
    closeTabwork(){
      this.gongdanTabShow = false
      this.activeName = "shoulidan";
      console.log(this.gongdanTabShow,this.activeName)
    },
    // 显示workOrderPage
    showWorkOrderPage(obj) {
      
      this.activeName = "gongdan";
      this.gongdanTabShow = true
      
      this.subobj = obj;
      console.log(this.subobj);
      // 动态加载了兄弟tab组件所以需要重新赋值给workOrderLog
    },
    /**
     * 更新会话
     */
    updateDialog(obj) {
      this.$emit("updateDialog", obj);
    },
    /**
     * 设置客户信息iframe地址
     * @param {object} item 客户对象
     */
    setUrl(url) {
      const {
        contactId, // 联系方式id
        jobId,
        dialogId, // 会话id
      } = this.info;
      const perfix = url.includes("?") ? "&" : "?";
      return (
        url +
        perfix +
        `contactId=${contactId}&jobId=${jobId}&dialogId=${dialogId}`
      );
    },
  },
};
</script>
<style lang="stylus" scoped>
.info-tab {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
 
  >>>.el-tabs__content {
    flex: 1;
    height: 100%;
  }
 
  >>>.el-tab-pane {
    height: 100%;
  }
 
  >>>.el-tabs__header {
    margin-bottom: 0;
  }
 
  .inline-iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
}
</style>

兄弟组件-受理tab标签页：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

<template>
  <div class="shouliTab">
    <el-form
      ref="form"
      :label-position="labelPosition"
      label-width="80px"
      :model="form"
    >
      <!-- 表格表单1 -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="业务来源">
            <el-select v-model="form.busiSoureId" placeholder="请选择业务来源">
              <el-option
                v-for="item in yewulaiyuanObj"
                :key="item.value"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="业务类型">
            <el-select v-model="form.busiTypeId" placeholder="请选择业务类型">
              <el-option
                v-for="item in yewuleixingObj"
                :key="item.value"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户名称" prop="name">
            <el-input
              style="max-width: 200px"
              v-model="form.customName"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系方式" prop="phoneNumber">
            <el-input
              style="max-width: 200px"
              v-model="form.phoneNumb"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" v-if="this.form.busiSoureId == '9'">
          <el-form-item label="客户类别">
            <el-select v-model="form.customLevel" placeholder="请选择客户类别">
              <el-option
                v-for="item in kehuleibieObj"
                :key="item.value"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="this.form.busiSoureId == '9'">
          <el-form-item label="是否购买">
            <el-select v-model="form.isBuy" placeholder="是否购买">
              <el-option
                v-for="item in shifoumaiObj"
                :key="item.value"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="受理来源">
            <el-select v-model="form.sourceType" placeholder="受理来源">
              <el-option
                v-for="item in sourceTypeList"
                :key="item.value"
                :label="item.value"
                :value="item.key"
                disabled
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="this.form.busiTypeId == '1'">
          <el-form-item label="销售人员">
            <el-input
              style="max-width: 200px"
              v-model="form.salesMan"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="hr"></div>
      <!-- 表格表单2 -->
      <el-row class="overTab">
        <!-- <el-col :span="4">
          <el-form-item label="所属位置" prop="serviceLargeType">
            <el-select
              size="small"
              v-model="form.serviceLargeType"
              @change="getServiceType($event, 1)"
              placeholder="--省--"
            >
              <el-option
                v-for="item in serviceLargeList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="serviceMediumType">
            <el-select
              size="small"
              v-model="form.serviceMediumType"
              @change="getServiceType($event, 2)"
              placeholder="--市--"
            >
              <el-option
                v-for="item in serviceMediumList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="serviceSmallType">
            <el-select
              size="small"
              v-model="form.serviceSmallType"
              placeholder="--镇--"
            >
              <el-option
                v-for="item in serviceSmallList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button>查询</el-button>
        </el-col> -->
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="子公司:">
            <el-select v-model="form.subsidiaryName" placeholder="子公司">
              <el-option
                v-for="item in zigongsiObj"
                :key="item.value"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="片区:">
            <el-select v-model="form.areaInfo" placeholder="片区">
              <el-option
                v-for="item in pianquObj"
                :key="item.value"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="detail" :span="24">
        <el-col :span="6">
          <el-form-item label="总代理地址:">
            <el-input v-model="form.areaAddress" placeholder="总代理地址">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="总代理姓名:">
            <el-input v-model="form.areaManagerName" placeholder="总代理姓名">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="总代理手机号:">
            <el-input v-model="form.areaManPhone" placeholder="总代理手机号">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="this.form.busiTypeId == '2'">
        <el-col :span="10">
          <el-form-item label="投诉类型">
            <el-cascader
              v-model="form.complainType"
              :options="options"
              clearable
              @change="fnChangeOpt"
            ></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="hr"></div>
      <!-- 表格表单3 -->
      <el-row>
        <el-col class="detail" :span="24">
          <el-form-item label="咨询内容" prop="desc">
            <el-input
              type="textarea"
              :autosize="{ minRows: 5, maxRows: 8 }"
              v-model="form.consultContent"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="detail" :span="24">
          <el-form-item label="处理意见" prop="desc">
            <el-input
              type="textarea"
              :autosize="{ minRows: 5, maxRows: 8 }"
              v-model="form.dealOpinions"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="hr"></div>
      <!-- 表格表单4 -->
      <el-row class="detail" :span="24">
        <el-col :span="6">
          回访时间：<span>
            <el-date-picker
              v-model="form.returnTime"
              type="datetime"
              value-format="yyyy-MM-dd hh:ss:mm"
              placeholder="选择日期"
            >
            </el-date-picker>
          </span>
        </el-col>
        <el-col :span="6">
          <el-form-item label="手机号:">
            <el-input
              v-model="messageObj.phoneNumb"
              placeholder="接收短信的手机号"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="片区名称:">
            <el-input v-model="messageObj.areaName" placeholder="片区名称">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="detail" :span="24">
        <el-col :span="6">
          <el-form-item label="经理名称:">
            <el-input v-model="messageObj.managerName" placeholder="经理名称">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="经理手机号:">
            <el-input v-model="messageObj.mobile" placeholder="经理手机号">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item>
            <el-button @click="fnsendmessage" v-prevent-click type="primary"
              >发送短信</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col class="detail" :span="24">
          <el-input
            style="margin: 10px"
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 6 }"
            v-model="messageObj.duanxin"
          ></el-input>
          <el-button @click="fnsendmessage">发送短信</el-button>
        </el-col>
      </el-row> -->
      <div class="hr"></div>
      <!-- 提交 -->
      <el-form-item>
        <el-button type="primary" @click="confirmSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "outcall",
  props: {
    /**
     * 弹窗是否回显
     */
    value: {
      type: Boolean,
    },
    info: {
      type: Object,
    },
  },
  directives: {
    // 自定义指令-防止按钮频发点击
    preventClick: {
      inserted(el, binding) {
        el.addEventListener("click", () => {
          if (!el.disabled) {
            el.disabled = true;
            setTimeout(() => {
              el.disabled = false;
            }, 6000);
          }
        });
      },
    },
  },
  data() {
    return {
      labelPosition: "right",
      options: [],
      messageObj: {
        mobile: "",
        managerName: "",
        areaName: "",
        phoneNumb: this.info.contactNumber,
        // dunaxin: "",
      },
      form: {
        busiSoureId: "", // 业务来源
        busiTypeId: "", // 业务类型
        customName: "", // 客户姓名
        phoneNumb: this.info.contactNumber, // 联系方式-电话号码
        customLevel: "", // 客户类别
        isBuy: "", // 是否购买
        // serviceLargeType: "", // 省
        // serviceMediumType: "", // 市
        // serviceSmallType: "", // 镇
        subsidiaryName: "", // 子公司
        areaInfo: "", // 片区-所属片区
        consultContent: "", // 咨询内容
        dealOpinions: "", // 处理意见
        areaManagerName: "", // 片区经理姓名
        areaManPhone: "", // 总代理手机号码
        areaAddress: "", // 总代理地址
        isSendManager: false, // 是否发送短信 0 否 1 是
        complainType: "", // 投诉类型
        returnTime: "", // 回访时间
        salesMan: "", // 销售人员
        id: "",
      },
      rules: {
        name: [{ required: true, message: "请输入文字" }],
        phoneNumber: [{ required: true, message: "请输入号码" }],
        serviceLargeType: [
          {
            required: true,
            message: "请选择服务类型",
            trigger: "change",
          },
        ],
        serviceMediumType: [
          {
            required: true,
            message: "请选择服务类型",
            trigger: "change",
          },
        ],
        serviceSmallType: [
          {
            required: true,
            message: "请选择服务类型",
            trigger: "change",
          },
        ],
      },
      yewulaiyuanObj: [],
      yewuleixingObj: [],
      kehuleibieObj: [],
      shifoumaiObj: [],
      sourceTypeList: [], // 受理来源
      serviceLargeList: [], // 问题类型第1级
      serviceMediumList: [], // 问题类型第2级
      serviceSmallList: [], // 问题类型第3级
      zigongsiObj: [],
      pianquObj: [],
    };
  },
  created() {
    this.yewulaiyuanObj = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).HS_BUSI_SOURCE;
    this.yewuleixingObj = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).HS_BUSI_TYPE;
    this.kehuleibieObj = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).HS_CUSTOM_LEVEL;
    this.shifoumaiObj = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).IS_BUY;
    this.zigongsiObj = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).SUBDEPT;
    this.pianquObj = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).AREA_DICT;
    this.sourceTypeList = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).SOURCE_TYPE;
    this.form.sourceType = this.info.callType;
    console.log("*****呼叫类型********", this.info.callType);
    console.log(this.value, this.info);
    this.ajaxgetComplain1();
    this.ajaxgetPhoneInfo();
  },
  computed: {},
  methods: {
    // 改变级联结果的数组为字符串
    fnChangeOpt(e) {
      // console.log(e);
      if (e && e.length > 0) {
        this.form.complainType = e.join(",");
      } else {
        this.form.complainType = "";
      }
      // console.log(this.form.complainType);
    },
    // 获取投诉类型接口
    ajaxgetComplain1() {
      this.$axios
        .post(this.$apis.ccweb.newDataSL.getComplainTree)
        .then((res) => {
          console.log("投诉类型：", res.data);
          if (res.data) {
            this.options = res.data;
          }
        });
    },
    // 获取代理信息
    ajaxgetPhoneInfo() {
      const params = {
        phoneNumber: this.info.contactNumber,
      };
      this.$axios
        .post(this.$apis.ccweb.newDataSL.getPhoneInfo, params)
        .then((res) => {
          console.log(res.data);
        });
    },
    // 发送短信
    fnsendmessage() {
      // console.log("发送短信", this.messageObj);
      const params = this.messageObj;
      this.$axios
        .post(this.$apis.ccweb.newDataSL.sendSms, params)
        .then((res) => {
          if (res) {
            this.$message({
              message: "发送成功!",
              type: "success",
            });
            this.form.isSendManager = true;
          }
        });
    },
    confirmSubmit() {
      this.$confirm("是否发起工单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.onSubmit()
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "失败",
          // });
        });
    },
    onSubmit() {//这里就是提交后的表单需要弹出兄弟标签页组件并传入数据给父组件然后再通过父组件传入到其他兄弟工单标签页组件
      var obj = {
        sourceType: this.info.callType, // 电话来源ID0 入呼，1 外呼
        dialogId: this.info.dialogId, // 会话ID
        customId: this.info.customid, // 客户ID - 第一次没有  往后返回 id 后端是小写 这里注意
        contactId: this.info.contactId, // 会话客户信息ID
      };
      // let params = {};
      Object.assign(obj, this.form);
      this.$axios
        .post(this.$apis.ccweb.newDataSL.insertAcceptInfo, obj)
        .then((res) => {
          console.log("接收的值", res.data);
          this.form.id = res.data.id;
          this.$emit("showWorkOrderPage", res.data);
        });
    },
    getServiceType(code, type) {
      console.log(code, type); // code 是选中的值 type是自定义
    },
    handleClose() {
      this.$emit("input", false);
      this.form.call = "";
    },
  },
};
</script>
<style lang="stylus" scoped>
.el-textarea {
  textarea {
    padding: 8px; // 设置文本框的 padding
    height: $inputHeight; // 设置文本框的 height
    font-size: $inputFontSize;
    line-height: 21px;
  }
}
 
.shouliTab { // 表单框
  padding: 10px;
  overflow-y: scroll;
  height: 90%;
}
 
.hr {
  width: 100%;
  height: 1px;
  background: #ccc;
  margin: 10px 0;
}
 
.detail {
  p {
    padding-left: 10px;
    line-height: 30px;
    font-size: 16px;
    color: #606266;
  }
}
</style>

　兄弟组件----工单tab标签组件：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

<template>
  <!-- 受理页工单 -->
  <div class="shouliTab">
    <el-form ref="workform" :model="workform" label-width="80px">
      <!-- 表格表单1 -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="子公司:">
            <el-select v-model="workform.subsidiaryId" placeholder="子公司">
              <el-option
                v-for="item in zigongsiObj"
                :key="item.value"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="片区:">
            <el-select v-model="workform.areaInfoId" placeholder="片区">
              <el-option
                v-for="item in pianquObj"
                :key="item.value"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="总代理信息">
            <el-input
              style="max-width: 200px"
              v-model="workform.areaManager"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="客户名称">
            <el-input
              style="max-width: 200px"
              v-model="workform.cusTomName"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户电话">
            <el-input
              style="max-width: 200px"
              v-model="workform.cusTomPhone"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="投诉时间">
            <el-input
              style="max-width: 200px"
              v-model="workform.compTime"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="受理坐席">
            <el-input
              style="max-width: 200px"
              v-model="workform.acceptUserName"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="投诉来源">
            <el-select v-model="workform.compSource" placeholder="投诉来源">
              <el-option
                v-for="item in yewulaiyuanObj"
                :key="item.value"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客服电话">
            <el-input
              style="max-width: 200px"
              v-model="workform.acceptUserPhone"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="hr"></div>
      <!-- 表格表单2 -->
      <el-row class="overTab">
        <el-col :span="10">
          <el-form-item label="投诉类型">
            <el-cascader
              v-model="workform.compTypeId"
              :options="workoptions"
              clearable
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="投诉等级:">
            <el-select
              @change="changeCompType"
              v-model="workform.compLevelId"
              placeholder="投诉等级"
            >
              <el-option
                v-for="item in compLevel"
                :key="item.value"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="投诉备注">
            <el-input
              style="max-width: 600px"
              v-model="workform.remark"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="hr"></div>
      <!-- 表格表单3 -->
      <el-row>
        <el-col class="detail" :span="24">
          <el-form-item label="投诉内容" prop="desc">
            <el-input
              type="textarea"
              :autosize="{ minRows: 5, maxRows: 8 }"
              v-model="workform.workContent"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="hr"></div>
      <!-- 提交 -->
      <el-form-item>
        <el-button type="primary" @click="confirmSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "workorderlog",
  props: {
    info: {
      type: Object,
    },
    subobj: {
      type: Object,
    },
  },
  watch: {
    subobj: function (n, o) {
      console.log(n, o);
      // console.log("兄弟组件传来了数据：", this.subobj, this.info);
      // console.log(this.workform, "*****");
      this.formatData(n);
      this.formatTreeDate(n);
      this.$forceUpdate();
    },
  },
  directives: {
    // 自定义指令-防止按钮频发点击
    preventClick: {
      inserted(el, binding) {
        el.addEventListener("click", () => {
          if (!el.disabled) {
            el.disabled = true;
            setTimeout(() => {
              el.disabled = false;
            }, 6000);
          }
        });
      },
    },
  },
  data() {
    return {
      parentObj: {},
      workoptions: [],
      messageObj: {
        mobile: "",
        managerName: "",
        areaName: "",
        cusTomPhone: "",
        // dunaxin: "",
      },
      workform: {
        subsidiaryId: "", // 子公司
        areaInfoId: "", // 片区
        areaManager: "", // 总代理信息
        cusTomName: "", // 客户名称
        cusTomPhone: "", // 客户电话
        compTime: "", // 投诉时间
        acceptUserId: "", // 受理坐席ID
        acceptUserName: "", // 受理坐席姓名
        compSource: "", // 投诉来源
        acceptUserPhone: "", // 客服电话
        compTypeId: "", // 投诉类型ID
        compLevelId: "", // 投诉等级
        feedbackTime: "", // 反馈时间
        remark: "", // 投诉备注
        workContent: "", // 投诉内容
        dialogId: "", // 会话ID
        customId: "", // 客户ID
        acceptId: "", // 受理ID
        ccListMenId: "", // 抄送人ID 多个逗号分隔
        workOrderMenId: "", // 工单主负责人ID
        workOrderDeptId: "", // 主责人部门ID
      },
      rules: {
        name: [{ required: true, message: "请输入文字" }],
        phoneNumber: [{ required: true, message: "请输入号码" }],
      },
      yewulaiyuanObj: [],
      zigongsiObj: [],
      pianquObj: [],
      compLevel: [],
    };
  },
  created() {
    // this.yewuleixingObj = JSON.parse(sessionStorage.getItem('dics-getAllDatas')).HS_BUSI_TYPE
    // this.kehuleibieObj = JSON.parse(sessionStorage.getItem('dics-getAllDatas')).HS_CUSTOM_LEVEL
    this.yewulaiyuanObj = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).HS_BUSI_SOURCE;
    this.zigongsiObj = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).SUBDEPT;
    this.pianquObj = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).AREA_DICT;
    this.compLevel = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).COMPLAIN_LEVEL;
    console.log("subobj", this.subobj);
    // this.sourceTypeList = JSON.parse(sessionStorage.getItem('dics-getAllDatas')).SOURCE_TYPE
    this.getComplain();
  },
  mounted() {
    console.log(this.value, this.info, this.subobj);
    if (this.subobj) {
      this.workform = this.subobj;
      console.log("parentobj:", this.workform);
      this.formatTreeDate(this.workform);
      this.formatData(this.workform);
    }
  },
  methods: {
    formatData(formData) {
      if (formData) {
        console.log("工单数据传输", formData);
        this.getOnlineSeat(formData.apccetUserId); // 获取受理坐席姓名
        this.workform.subsidiaryId = formData.subsidiaryName;
        this.workform.areaInfoId = formData.areaInfo;
        this.workform.areaManager =
          formData.areaManagerName + ":" + this.subobj.areaManPhone;
        this.workform.cusTomName = formData.customName;
        this.workform.cusTomPhone = formData.phoneNumb;
        this.workform.compTime = formData.createTime;
        this.workform.acceptUserId = formData.apccetUserId;
        this.workform.compSource = formData.busiSoureId;
        this.workform.compTypeId = formData.complainType;
        this.workform.dialogId = formData.dialogId;
        this.workform.customId = formData.customId;
        this.workform.acceptId = formData.id;
        this.getThreeDate(3);
        this.formatTreeDate(this.workform);
      }
    },
    getThreeDate(date) {
      var num = date;
      var n = num;
      var d = new Date();
      var year = d.getFullYear();
      var mon = d.getMonth() + 1;
      var day = d.getDate();
      if (day <= n) {
        if (mon > 1) {
          mon = mon - 1;
        } else {
          year = year - 1;
          mon = 12;
        }
      }
      d.setDate(d.getDate() + n);
      year = d.getFullYear();
      mon = d.getMonth() + 1;
      day = d.getDate();
      var feedbackTime =
        year +
        "-" +
        (mon < 10 ? "0" + mon : mon) +
        "-" +
        (day < 10 ? "0" + day : day);
      return feedbackTime;
    },
    /**
     * 获取投诉类型等级备注
     */
    changeCompType() {
      this.workform.feedbackTime = this.getThreeDate(3);
      if (this.workform.compLevelId == "A") {
        this.workform.remark =
          "该投诉事件判定为A类投诉，请于" +
          this.workform.feedbackTime +
          "内填写并反馈本工单";
      } else if (this.workform.compLevelId == "B") {
        this.workform.remark =
          "该投诉事件判定为B类投诉，请于" +
          this.workform.feedbackTime +
          "内填写并反馈本工单";
      } else {
        this.workform.remark =
          "该投诉事件判定为B类投诉，请于" +
          this.workform.feedbackTime +
          "内填写并反馈本工单";
      }
    },
    formatTreeDate(data) {
      if (!data) return;
      var str = data.complainType;
      // console.log(typeof str)// obj '1,2' 看着是字符串其实是数组
      // str = JSON.stringify(str)
      // console.log(typeof str)// str 转成真正的字符串就不会报错了
      if (str) {
        str = str.split(",");
        this.workform.compTypeId = str;
        // this.form.complainType = JSON.parse(str);
      }
    },
    // 获取投诉类型接口
    getComplain() {
      this.$axios
        .post(this.$apis.ccweb.newDataSL.getComplainTree)
        .then((res) => {
          console.log(res.data);
          if (res.data) {
            this.workoptions = res.data;
          }
        });
    },
    // 根据用户ID获取用户姓名
    getOnlineSeat(id) {
      var obj = {
        userId: id,
      };
      this.$axios
        .post(this.$apis.ccweb.workOrder.getOnlineSeat, obj)
        .then((res) => {
          console.log(res.data);
          if (res.data) {
            this.workform.acceptUserName = res.data.realName;
            this.workform.acceptUserPhone = res.data.phone;
            console.log(
              "this.form.acceptUserPhone",
              this.workform.acceptUserPhone
            );
          }
        });
    },
    // 关闭工单
    closeTabwork() {
      this.$emit("closeTabwork");
    },
    confirmSubmit() {
      this.$confirm("是否发起工单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.onSubmit();
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "失败",
          // });
        });
    },
    onSubmit() {
      this.closeTabwork();
      var obj = {
        id: "", // id - 第一次没有  往后返回
        areaManPhone: "", // 片区经理姓名
        sourceType: "", // 电话来源ID0 入呼，1 外呼
        dialogId: "", // 会话ID
        customId: "", // 客户ID - 第一次没有  往后返回
        contactId: "", // 会话客户信息ID
      };
      // let params = {};
      Object.assign(obj, this.workform);
      console.log(obj);
      this.$axios
        .post(this.$apis.ccweb.workOrder.insertWorkInfo, obj)
        .then((res) => {
          console.log(res);
          this.workform.id = res.data.id;
          this.closeTabwork();
        });
    },
  },
};
</script>
<style lang="stylus" scoped>
.el-textarea {
  textarea {
    padding: 8px; // 设置文本框的 padding
    height: $inputHeight; // 设置文本框的 height
    font-size: $inputFontSize;
    line-height: 21px;
  }
}
 
.shouliTab { // 表单框
  padding: 10px;
  overflow-y: scroll;
  height: 90%;
}
 
.hr {
  width: 100%;
  height: 1px;
  background: #ccc;
  margin: 10px 0;
}
 
.detail {
  p {
    padding-left: 10px;
    line-height: 30px;
    font-size: 16px;
    color: #606266;
  }
}
</style>

posted @ 2021-07-18 01:35 少哨兵阅读(581) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

公告

昵称：少哨兵
园龄： 4年8个月
粉丝： 16
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

少哨兵

ccweb: 兄弟组件+强制刷新+实现tab切换提交表单的流程思路：代码同上篇随笔笔记

公告

搜索

常用链接

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论